@import url('../vendor/webawesome/styles/color/palettes/default.css');

@layer wa-color-palette {
    :root {
        --wa-color-cyan-95: #e8f6f9;
        --wa-color-cyan-90: #c9ebf2;
        --wa-color-cyan-80: #8ed4e3;
        --wa-color-cyan-70: #5cbdd3;
        --wa-color-cyan-60: #3aa8c3;
        --wa-color-cyan-50: #2e98b6;   /* <- Key brand color */
        --wa-color-cyan-40: #257a92;
        --wa-color-cyan-30: #1c5c6e;
        --wa-color-cyan-20: #133e4a;
        --wa-color-cyan-10: #0a2027;
        --wa-color-cyan-05: #051014;

        --wa-color-cyan: var(--wa-color-cyan-50);
        --wa-color-cyan-key: 50;

        --wa-color-brand-95: var(--wa-color-cyan-95);
        --wa-color-brand-90: var(--wa-color-cyan-90);
        --wa-color-brand-80: var(--wa-color-cyan-80);
        --wa-color-brand-70: var(--wa-color-cyan-70);
        --wa-color-brand-60: var(--wa-color-cyan-60);
        --wa-color-brand-50: var(--wa-color-cyan-50);
        --wa-color-brand-40: var(--wa-color-cyan-40);
        --wa-color-brand-30: var(--wa-color-cyan-30);
        --wa-color-brand-20: var(--wa-color-cyan-20);
        --wa-color-brand-10: var(--wa-color-cyan-10);
        --wa-color-brand-05: var(--wa-color-cyan-05);

        --wa-color-brand: var(--wa-color-brand-50);
        --wa-color-brand-key: 50;
    }
}

/* Only override tokens that genuinely differ from default.css. */
@layer wa-theme-overrides {
    :root {
        --wa-font-family-body: var(--is-font-body-myriad);
        --wa-font-family-heading: var(--is-font-condensed);
        --wa-font-family-longform: var(--wa-font-family-body);
    }

    /* Hint for dark-mode browser extensions (e.g. Noir). */
    @media (prefers-color-scheme: dark) {
        :root:not(.wa-light) {
            color-scheme: dark;
        }
    }
}

/* Align callout icon with first line of text. */
wa-callout::part(icon) {
    align-items: flex-start;
    padding-block-start: 0.15em;
}

.dialog-code-input::part(input) {
    letter-spacing: 0.5rem;
    text-align: center;
    font-size: var(--wa-font-size-xl);
    font-weight: var(--wa-font-weight-bold);
}

/* Site Layout */

/* Shared content-width wrapper. */
.page-container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--wa-space-xl);
    box-sizing: border-box;
}

@keyframes bannerShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.wa-dark .site-logo-img {
    filter: brightness(2);
}

wa-page {
    --menu-width: 0px;
    --main-width: 1fr;
    --aside-width: 0px;
}

wa-page[view='mobile'] {
    --menu-width: auto;
    --aside-width: auto;
}

wa-page::part(navigation-toggle) {
    display: none;
}

wa-page::part(header) {
    background:
        radial-gradient(ellipse 60% 100% at 10% 50%, color-mix(in oklab, var(--wa-color-brand-80) 12%, transparent), transparent 70%),
        radial-gradient(ellipse 50% 100% at 90% 50%, color-mix(in oklab, var(--wa-color-brand-90) 10%, transparent), transparent 70%),
        color-mix(in oklab, var(--wa-color-surface-default) 92%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--wa-color-surface-border) 60%, transparent);
}

wa-page::part(base),
wa-page::part(body),
wa-page::part(main-content) {
    background-color: transparent;
}

wa-page > main {
    padding: 0;
}

wa-page::part(main-footer) {
    padding: 0;
    background-color: var(--wa-color-surface-lowered);
}

header[slot="header"] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logos nav account";
    align-items: center;
    padding-block: var(--wa-space-s);
    background-color: transparent;
}

/* Beats main's stacking contexts (filter on .pdp-deck-front, hero-inner, etc.)
   so the megamenu paints over page content. The backdrop-filter lives here —
   not on ::part(header) — because putting it on the shadow part creates a
   stacking context there that traps this z-index and lets main's positioned
   descendants paint over the mega panel. */
header[slot="header"] {
    position: relative;
    z-index: 5;
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

/* Full-viewport gradient behind the header (breaks out of .page-container via 100vw pseudo-element). */
header[slot="header"].has-aurora {
    isolation: isolate;
}
header[slot="header"].has-aurora::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    background: var(--aurora-bg-light);
    z-index: -1;
    pointer-events: none;
}
.wa-dark header[slot="header"].has-aurora::before {
    background: var(--aurora-bg-dark, var(--aurora-bg-light));
}
body:not(.has-page-aurora) wa-page:has(header[slot="header"].has-aurora)::part(header) {
    background: var(--wa-color-surface-default);
}
body:not(.has-page-aurora) header[slot="header"].has-aurora {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Page-wide gradient on wa-page itself; internal parts go transparent so it shows through. */
body.has-page-aurora wa-page {
    background: var(--page-aurora-light);
    background-attachment: fixed;
    min-height: 100vh;
}
.wa-dark body.has-page-aurora wa-page {
    background: var(--page-aurora-dark, var(--page-aurora-light));
    background-attachment: fixed;
}
body.has-page-aurora header[slot="header"].has-aurora::before {
    display: none;
}
body.has-page-aurora wa-page::part(base),
body.has-page-aurora wa-page::part(body),
body.has-page-aurora wa-page::part(main-content),
body.has-page-aurora wa-page::part(header),
body.has-page-aurora wa-page::part(main-footer) {
    background-color: transparent;
}
body.has-page-aurora header[slot="header"] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.has-page-aurora wa-page:has(header[slot="header"].has-aurora)::part(header) {
    background-color: transparent;
}
body.has-page-aurora footer[slot="main-footer"] {
    background-color: transparent;
}

header[slot="header"].has-collab-logo,
header[slot="header"]:has(.collab-logo-btn) {
    grid-template-columns: auto 1fr auto;
}

wa-page[view='mobile'] header[slot="header"],
wa-page[view='mobile'] header[slot="header"].has-collab-logo,
wa-page[view='mobile'] header[slot="header"]:has(.collab-logo-btn) {
    grid-template-columns: 1fr;
    grid-template-areas:
        "logos"
        "nav";
    padding: 0;
    max-width: none;
}

wa-page[view='mobile']::part(header) {
    padding: 0;
}

/* Site-wide revert of native.css's media constraints (max-width: 100%,
   height: auto, border-radius). We size logos, hero imagery, and label
   previews explicitly; the defaults fight that everywhere. */
img, svg, picture, video {
    max-width: revert;
    height: revert;
    border-radius: revert;
}

.header-logos {
    grid-area: logos;
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
}

wa-page[view='mobile'] .header-logos {
    justify-self: center;
    padding-block: var(--wa-space-m) var(--wa-space-2xs);
    padding-inline: var(--wa-space-m);
}
wa-page[view='mobile'] .site-logo-img {
    height: 32px;
}
.site-logo {
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: opacity var(--wa-transition-normal) ease;
}
.site-logo:hover { opacity: 0.7; }
.site-logo-img {
    height: 32px;
    width: auto;
    user-select: none;
}
.site-logo-mark {
    display: none;
}
wa-page[view='mobile'] .has-collab-logo .site-logo-full,
wa-page[view='mobile'] header:has(.collab-logo-btn) .site-logo-full {
    display: none;
}
wa-page[view='mobile'] .has-collab-logo .site-logo-mark,
wa-page[view='mobile'] header:has(.collab-logo-btn) .site-logo-mark {
    display: block;
    height: 42px;
}
.logo-collab-x {
    font-size: var(--wa-font-size-l);
    color: var(--wa-color-text-quiet);
    font-weight: 300;
    line-height: 1;
}
.collab-logo-btn {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: opacity var(--wa-transition-normal) ease;
}
.collab-logo-btn:hover { opacity: 0.7; }

wa-popover[for="collab-logo-btn"] {
    --arrow-size: 0.5rem;
}
wa-popover[for="collab-logo-btn"]::part(body) {
    box-shadow: var(--wa-shadow-l), var(--wa-shadow-s);
    border: 1px solid var(--wa-color-surface-border);
}

.org-switcher-current {
    padding: var(--wa-space-xs) 0;
}
.org-switcher-item {
    text-align: left;
    padding: var(--wa-space-xs) var(--wa-space-s);
    border-radius: var(--wa-border-radius-m);
    text-decoration: none;
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-s);
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    transition: background-color var(--wa-transition-normal) ease;
    flex-wrap: nowrap;
}
.org-switcher-item:hover {
    background: var(--wa-color-brand-fill-quiet);
}
/* Truncate long brand names with an ellipsis instead of wrapping below
   the avatar. min-width:0 lets the span shrink past its content size,
   which is what defeats the default flex behavior of "never shrink
   below the longest word." */
.org-switcher-item > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ── Brand chrome logo (header + collab hero) ─────────────────────────
   Renders via templates/components/_brand_chrome_logo.html. Variants
   are picked at render time; light/dark face swap is CSS-driven via
   Web Awesome's `.wa-dark` class on <html>. */
.brand-chrome-logo {
    display: block;
    width: auto;
    object-fit: contain;
    user-select: none;
    /* Opt out of native.css's global img reset (max-width:100%, height:auto,
       border-radius). We size and position these explicitly. */
    max-width: revert;
    height: revert;
    border-radius: revert;
}
.brand-chrome-logo.is-header {
    height: 42px;
    max-width: 180px;
}
.brand-chrome-logo.is-hero {
    max-width: 360px;
    max-height: 130px;
}

/* Light/dark face swap. Default: light face shown. .wa-dark on <html>
   swaps to the dark face. Both stay in the DOM so the cached image
   doesn't reflow on theme change. */
.brand-chrome-logo--dark { display: none; }
:root.wa-dark .brand-chrome-logo--light { display: none; }
:root.wa-dark .brand-chrome-logo--dark { display: block; }

/* Single-variant brands: wrap the lone face in a contrasting box so it
   stays readable in the wrong-mode environment. The box only renders
   in the wrong mode — in the right mode, the box collapses to its
   transparent default and the logo sits on the page background. */
.brand-chrome-logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--wa-space-2xs) var(--wa-space-xs);
    border-radius: var(--wa-border-radius-m);
    background: transparent;
}
:root.wa-dark .brand-chrome-logo-box--in-dark {
    /* primary-only brand viewed in dark mode → off-white box */
    background: #f5f5f5;
}
:root:not(.wa-dark) .brand-chrome-logo-box--in-light {
    /* reversed-only brand viewed in light mode → off-black box */
    background: #1a1a1a;
}

/* No-logo fallback: brand name typeset in Myriad Pro Condensed, semibold.
   Distinct enough from the IntelliScanner wordmark not to be mistaken
   for it, condensed enough to keep the same vertical footprint as the
   logo it replaces. */
.brand-chrome-wordmark {
    font-family: var(--is-font-condensed);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--wa-color-text-normal);
    user-select: none;
    white-space: nowrap;
}
.brand-chrome-wordmark.is-header {
    font-size: 1.5rem;
}
.brand-chrome-wordmark.is-hero {
    font-size: clamp(2rem, 5vw, 3.25rem);
    margin-bottom: 0;
}

:root {
    /* Adobe Fonts kit wfv3lvd. */
    --is-font-condensed: "myriad-pro-cond", ui-sans-serif, system-ui, sans-serif;
    --is-font-semi-condensed: "myriad-pro-semi-condensed", ui-sans-serif, system-ui, sans-serif;
    --is-font-semi-extended: "myriad-pro-semiextended", ui-sans-serif, system-ui, sans-serif;
    --is-font-body-myriad: "myriad-pro", ui-sans-serif, system-ui, sans-serif;
    --is-font-museo: "museo-sans", ui-sans-serif, system-ui, sans-serif;
    --is-font-futura: "futura-pt", ui-sans-serif, system-ui, sans-serif;
}

.brand-nav {
    grid-area: nav;
    justify-self: end;
    margin-right: var(--wa-space-m);
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--wa-color-surface-default) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--wa-color-surface-border) 80%, transparent);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    box-shadow: var(--wa-shadow-s);
}
.brand-nav a {
    font-family: var(--is-font-condensed);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.015em;
    color: light-dark(#4e4e4e, #c5c5c5);
    text-decoration: none;
    padding: 0.6rem 1.25rem;
    line-height: 1;
    border-right: 1px solid color-mix(in srgb, var(--wa-color-surface-border) 80%, transparent);
    transition: background-color 140ms ease, color 140ms ease;
}
.brand-nav a:first-child {
    padding-left: 1.75rem;
}
.brand-nav a:last-child {
    padding-right: 1.75rem;
    border-right: none;
}
.brand-nav a:hover {
    background: color-mix(in srgb, var(--wa-color-surface-border) 50%, transparent);
}
.brand-nav a:focus-visible {
    outline: 2px solid var(--wa-color-brand-border-normal);
    outline-offset: 2px;
}
wa-page[view='mobile'] .brand-nav {
    justify-self: center;
    margin-right: 0;
    margin-bottom: var(--wa-space-3xs);
}

.nav-pill {
    --nav-radius: 9px;
    grid-area: nav;
    position: relative;
    justify-self: center;
    z-index: 10;
}

wa-page[view='mobile'] .nav-pill {
    justify-self: center;
    margin-bottom: var(--wa-space-xs);
    max-width: 100vw;
}

wa-page[view='mobile'] .nav-mega {
    min-width: 0;
    width: calc(100vw - var(--wa-space-m));
    max-width: 420px;
    grid-template-columns: 1fr;
}

wa-page[view='mobile'] .nav-mega-preview {
    display: none;
}

.nav-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--brand-color, var(--wa-color-brand-30));
    border-radius: var(--nav-radius);
    z-index: 0;
}

.nav-items {
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
    padding: var(--wa-space-2xs);
    position: relative;
    z-index: 1;
}

.nav-link {
    text-decoration: none;
    color: color-mix(in oklab, white 85%, transparent);
    font-weight: 700;
    font-size: var(--wa-font-size-s);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--wa-form-control-padding-block) var(--wa-form-control-padding-inline);
    border-radius: var(--nav-radius);
    display: flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    white-space: nowrap;
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: color var(--wa-transition-normal) ease;
}
.nav-link wa-icon {
    font-size: 1em;
    opacity: 0.7;
}
.nav-link.is-active {
    color: var(--wa-color-brand-30);
}
.nav-link.is-active wa-icon {
    opacity: 1;
}

.nav-highlight {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: var(--nav-radius);
    background: white;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.nav-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}
.nav-panel.is-open {
    opacity: 1;
    pointer-events: auto;
}

.nav-panel-inner {
    padding: var(--wa-space-xs) var(--wa-space-2xs) var(--wa-space-2xs);
    border-top: 1px solid color-mix(in oklab, white 15%, transparent);
    margin-top: var(--wa-space-xs);
}

.nav-panel-content {
    display: none;
    flex-direction: column;
    gap: 0;
}
.nav-panel-content.is-active {
    display: flex;
}

.nav-mega {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wa-space-s);
    min-width: 420px;
}

.nav-mega-item {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-xs) var(--wa-space-s);
    border-radius: var(--wa-border-radius-m);
    text-decoration: none;
    color: color-mix(in oklab, white 80%, transparent);
    transition: background var(--wa-transition-normal) ease, color var(--wa-transition-normal) ease;
}
.nav-mega-item strong {
    font-weight: 600;
    font-size: var(--wa-font-size-s);
    color: white;
}
.nav-mega-item span {
    font-size: var(--wa-font-size-xs);
    color: color-mix(in oklab, white 55%, transparent);
}
.nav-mega-icon {
    font-size: 1.1rem;
    opacity: 0.5;
    flex-shrink: 0;
}

.nav-mega-item.is-default {
    background: color-mix(in oklab, white 6%, transparent);
}
.nav-mega-item.is-hovered,
.nav-mega-item:hover {
    background: color-mix(in oklab, white 12%, transparent);
    color: white;
}
.nav-mega-item.is-hovered .nav-mega-icon,
.nav-mega-item:hover .nav-mega-icon {
    opacity: 0.9;
}

.nav-mega-preview {
    position: relative;
    border-radius: var(--wa-border-radius-m);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: color-mix(in oklab, white 5%, transparent);
}
.nav-mega-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--wa-border-radius-m);
    opacity: 0;
}
.nav-mega-preview img.is-active {
    opacity: 1;
}

.nav-panel-footer {
    border-top: 1px solid color-mix(in oklab, white 15%, transparent);
    margin-top: var(--wa-space-xs);
    padding-top: var(--wa-space-xs);
}
.nav-panel-footer a {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-xs) var(--wa-space-s);
    border-radius: var(--wa-border-radius-m);
    text-decoration: none;
    font-size: var(--wa-font-size-s);
    font-weight: 600;
    color: color-mix(in oklab, white 60%, transparent);
    transition: background var(--wa-transition-normal) ease, color var(--wa-transition-normal) ease;
}
.nav-panel-footer a:hover {
    background: color-mix(in oklab, white 10%, transparent);
    color: white;
}
.nav-panel-footer wa-icon {
    font-size: 1.1rem;
    opacity: 0.5;
}

.header-account-bar {
    grid-area: account;
    justify-self: end;
}

.cart-line-preview {
    flex: none;
    width: 192px;
    height: 96px;
    padding: var(--wa-space-s);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wa-color-surface-lowered);
    border-radius: var(--wa-border-radius-m);
    overflow: hidden;
}
.cart-line-preview svg {
    max-width: 100%;
    max-height: 100%;
}
.cart-line-qty-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-xs);
}
.cart-line-qty {
    width: 6rem;
}
.cart-line-qty::part(input) {
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.cart-line-spinner {
    font-size: 1rem;
    visibility: hidden;
}
.cart-line-qty.htmx-request + .cart-line-spinner {
    visibility: visible;
}
.cart-line-price {
    font-variant-numeric: tabular-nums;
}

wa-page[view='mobile'] .header-account-bar {
    position: absolute;
    top: var(--wa-space-2xs);
    right: var(--wa-space-2xs);
    z-index: 2;
    gap: var(--wa-space-3xs);
    background: transparent;
    padding: 0;
    min-height: 0;
}

.mobile-cta {
    font-size: var(--wa-font-size-xs);
}
.mobile-cta button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: var(--wa-color-neutral-70);
    font-weight: 500;
}
.mobile-cta wa-button {
    font-size: var(--wa-font-size-2xs);
}

.header-cta-pill {
    padding: var(--wa-space-3xs);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-pill);
    background: color-mix(in oklab, var(--wa-color-surface-default) 50%, transparent);
}
.header-cta-pill wa-button::part(base) {
    border-radius: var(--wa-border-radius-pill);
}
.header-cta-link {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--wa-color-text-normal);
    font-weight: 500;
    font-size: var(--wa-font-size-s);
    padding: var(--wa-space-xs) var(--wa-space-m);
    border-radius: var(--wa-border-radius-pill);
    transition: color var(--wa-transition-normal) ease, background-color var(--wa-transition-normal) ease;
}
.header-cta-link:hover {
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-fill-loud);
}

.delivery-banner {
    background: linear-gradient(90deg, var(--wa-color-brand-40), var(--wa-color-brand-50), var(--wa-color-brand-40));
    background-size: 200% 100%;
    animation: bannerShimmer 8s ease infinite;
    color: var(--wa-color-brand-on-loud);
    text-align: center;
    padding: var(--wa-space-xs) var(--wa-space-l);
    font-size: var(--wa-font-size-s);
    font-weight: 500;
}

footer[slot="main-footer"] {
    display: block;
    background-color: transparent;
    color: var(--wa-color-text-normal);
    padding-block: var(--wa-space-4xl) var(--wa-space-xl);
}
.footer-logo-img {
    height: 32px;
    width: auto;
    display: block;
    margin-bottom: var(--wa-space-xs);
    user-select: none;
}
.footer-tagline {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: var(--wa-font-size-2xs);
    color: var(--wa-color-text-quiet);
    margin-bottom: var(--wa-space-2xs);
}
.footer-blurb {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    line-height: 1.4;
    max-width: 320px;
    margin-top: 0;
}
.footer-phone {
    font-family: var(--wa-font-family-heading);
    font-size: var(--wa-font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--wa-space-s);
}
.footer-hours {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    line-height: 1.8;
}
.footer-links-heading {
    display: block;
    font-weight: 700;
    font-size: var(--wa-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wa-color-text-quiet);
    margin-bottom: var(--wa-space-s);
}
.footer-links a {
    color: var(--wa-color-text-normal);
    text-decoration: none;
    font-size: var(--wa-font-size-s);
    transition: color var(--wa-transition-normal) ease;
}
.footer-links a:hover { color: var(--wa-color-text-link); }

.footer-bottom {
    margin-top: var(--wa-space-3xl);
    padding-top: var(--wa-space-l);
    border-top: 1px solid var(--wa-color-surface-border);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
}
.footer-bottom a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.footer-bottom a:hover {
    color: var(--wa-color-text-normal);
}

/* ─────────────────────────────────────────────────────────────────────────
   Floating UI: pending-brand sticky card + debug overlay.
   Loaded on every page (base.html) because these elements follow the user
   across navigation. Kept out of start_v2.css, which is /start-only.
   ───────────────────────────────────────────────────────────────────────── */

/* Pending-brand sticky card — floats bottom-right across every page while
   session['pending_brand'] is live (user finalized during Resolving).
   See labels/routes/pending_brand.py. */
.pending-brand-card {
    position: fixed;
    bottom: var(--wa-space-l);
    right: var(--wa-space-l);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-s);
    padding: var(--wa-space-m);
    max-width: 340px;
    background: var(--wa-color-surface-raised);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    box-shadow: var(--wa-shadow-l);
}
.pending-brand-card-body {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
}
.pending-brand-card-ring {
    font-size: 32px;
    flex-shrink: 0;
    color: var(--wa-color-brand-fill-loud);
}
.pending-brand-card-text {
    flex: 1;
    min-width: 0;
}
.pending-brand-card-title {
    font-weight: var(--wa-font-weight-semibold);
    font-size: var(--wa-font-size-s);
    line-height: var(--wa-line-height-condensed);
    color: var(--wa-color-text-normal);
}
.pending-brand-card-sub {
    margin-top: var(--wa-space-3xs);
    font-size: var(--wa-font-size-2xs);
    color: var(--wa-color-text-quiet);
}
.pending-brand-card-actions {
    justify-content: flex-end;
}

.field-hint--error {
    color: var(--wa-color-danger-fill-loud);
    font-weight: var(--wa-font-weight-semibold);
}

wa-input[data-user-invalid]::part(base) {
    border-color: var(--wa-color-danger-border-loud);
    box-shadow: 0 0 0 1px var(--wa-color-danger-border-loud);
}
wa-input[data-user-invalid]::part(hint) {
    color: var(--wa-color-danger-fill-loud);
}

wa-input:has(> .field-hint--error)::part(base) {
    border-color: var(--wa-color-danger-border-loud);
    box-shadow: 0 0 0 1px var(--wa-color-danger-border-loud);
}
wa-input:has(> .field-hint--error)::part(hint) {
    color: var(--wa-color-danger-fill-loud);
}

/* Maker-mode banner — replaces the ship-info banner whenever a maker
   session is authenticated. Yellow + black hazard stripes around a solid
   pill, so it reads as a state indicator on every page. */
.maker-banner {
    background: repeating-linear-gradient(
        45deg,
        #fcd34d 0 14px,
        #1a1a1a 14px 22px
    );
    padding: 0.4rem 0;
    text-align: center;
    line-height: 1;
}
.maker-banner-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fcd34d;
    color: #1a1a1a;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 0 0 2px #1a1a1a;
}
.maker-banner-pill a {
    color: #1a1a1a;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.maker-banner-pill a:hover {
    text-decoration-thickness: 2px;
}
.maker-banner-pill wa-icon {
    font-size: 1rem;
}