/* ==================================================
   XO LABS UI TOKEN SYSTEM / A75BASE ENGINEERING SHELL
==================================================
Why:
  XO Labs uses A75Base class names, layout helpers, and backend conventions,
  but the visual authority is the Lovable prototype: clean white surfaces,
  black navigation, red brand actions, compact cards, and crisp catalog/admin
  surfaces.
Impact / blast radius:
  These tokens drive every screen and future module. Keep this file as the
  shared design system. Do not copy Lovable React architecture into this PHP
  app; adapt only the visual language.
================================================== */
:root {
    color-scheme: light;

    /* --------------------------------------------------
       XO Labs brand tokens adapted from the Lovable prototype
       -------------------------------------------------- */
    --a75-bg: #ffffff;
    --a75-bg-soft: #f8f8f9;
    --a75-workspace: #f5f5f7;
    --a75-card: #ffffff;
    --a75-card-soft: #f5f5f7;
    --a75-ink: #111111;
    --a75-muted: #6b6b6b;
    --a75-faint: #8a8a8a;
    --a75-border: #e5e5e5;
    --a75-border-strong: #cccccc;
    --a75-primary: #dc2626;
    --a75-primary-dark: #b91c1c;
    --a75-primary-soft: #fff1f2;
    --a75-coral: #dc2626;
    --a75-gold: #b46b00;
    --a75-success: #138a36;
    --a75-success-soft: #e6f4ea;
    --a75-warning: #b46b00;
    --a75-warning-soft: #fff3e0;
    --a75-danger: #b00020;
    --a75-danger-soft: #fdecef;
    --a75-info: #1a3a8a;
    --a75-info-soft: #e8eefc;

    /* Lovable-inspired navigation chrome. */
    --a75-sidebar: #111111;
    --a75-sidebar-2: #1d1d1f;
    --a75-sidebar-ink: #ffffff;
    --a75-sidebar-muted: #c6c6c8;
    --a75-sidebar-active: rgba(209, 31, 42, .20);
    --a75-sidebar-border: rgba(255, 255, 255, .09);

    /* Layout, radius, and shadow tokens. */
    --a75-app-drawer-width: 292px;
    --a75-app-rail-width: 86px;
    --a75-top-app-bar-height: 76px;
    --a75-window-padding: clamp(16px, 2vw, 30px);
    --a75-content-max-width: 1500px;
    --a75-touch-target: 46px;
    --a75-radius-xs: 6px;
    --a75-radius-sm: 10px;
    --a75-radius: 16px;
    --a75-radius-xl: 22px;
    --a75-shadow: 0 18px 44px rgba(17, 17, 17, .10);
    --a75-shadow-soft: 0 8px 22px rgba(17, 17, 17, .07);
    --a75-ring: 0 0 0 4px rgba(209, 31, 42, .18);

    /* Motion. Keep interactions smooth but not flashy. */
    --a75-transition: 180ms cubic-bezier(.2, .8, .2, 1);

    /* === Lovable visual port - tokens === */
    /* These tokens mirror the Lovable prototype's :root variables so prototype
       component classes can be ported verbatim while referencing --a75-*. */
    --a75-surface: #f5f5f7;           /* aligned to Lovable prototype --color-surface */
    --a75-surface-2: #ececef;         /* aligned to Lovable prototype --color-surface-2 */
    --a75-primary-contrast: #ffffff;
    --a75-secondary: #111111;
    --a75-accent: #dc2626;
    --a75-radius-md: 10px;            /* aligned to Lovable prototype --radius-md */
    --a75-radius-lg: 16px;            /* aligned to Lovable prototype --radius-lg */
    --a75-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --a75-shadow-md: 0 6px 20px rgba(0,0,0,.08);
    --a75-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --a75-container: 1200px;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --a75-bg: #111111;
    --a75-bg-soft: #1d1d1f;
    --a75-workspace: #151515;
    --a75-card: #1f1f21;
    --a75-card-soft: #27272a;
    --a75-ink: #ffffff;
    --a75-muted: #c8c8ca;
    --a75-faint: #96969a;
    --a75-border: #3a3a3d;
    --a75-border-strong: #535357;
    --a75-primary: #ff4a55;
    --a75-primary-dark: #ff7a82;
    --a75-primary-soft: rgba(209, 31, 42, .18);
    --a75-sidebar: #080808;
    --a75-sidebar-2: #111111;
    --a75-sidebar-ink: #ffffff;
    --a75-sidebar-muted: #c8c8ca;
    --a75-shadow: 0 22px 60px rgba(0, 0, 0, .38);
    --a75-shadow-soft: 0 10px 28px rgba(0, 0, 0, .28);
}

html[data-density="compact"] {
    --a75-top-app-bar-height: 66px;
    --a75-window-padding: clamp(12px, 1.6vw, 22px);
}

/* ==================================================
   BASE / ACCESSIBILITY
================================================== */
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--a75-bg);
    color: var(--a75-ink);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
:focus-visible {
    outline: none;
    box-shadow: var(--a75-ring);
}
.a75-skip-link {
    position: fixed;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    z-index: 1000;
    transform: translateY(-160%);
    background: var(--a75-primary);
    color: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    box-shadow: var(--a75-shadow);
}
.a75-skip-link:focus { transform: translateY(0); }

/* ==================================================
   AUTH SURFACE
================================================== */
.a75-auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(135deg, #111111 0%, #2b2b2b 100%);
}
.a75-auth-card {
    width: min(500px, 100%);
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--a75-border);
    border-radius: var(--a75-radius-xl);
    padding: clamp(24px, 4vw, 42px);
    box-shadow: var(--a75-shadow);
    backdrop-filter: blur(14px);
}
html[data-theme="dark"] .a75-auth-card { background: rgba(36, 29, 26, .92); }
.a75-auth-brand { text-align: center; margin-bottom: 24px; }
.a75-brand-mark {
    width: 58px;
    height: 58px;
    display: inline-grid;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #dc2626 0%, #111111 100%);
    color: #fff;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: 0 18px 36px rgba(209, 31, 42, .24);
}

/* ==================================================
   A75 ADAPTIVE APPLICATION SHELL
================================================== */
.a75-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--a75-app-drawer-width) minmax(0, 1fr);
}
.a75-workspace {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.a75-main {
    min-height: calc(100vh - var(--a75-top-app-bar-height));
    padding: var(--a75-window-padding);
}
.a75-content {
    width: min(100%, var(--a75-content-max-width));
    margin: 0 auto;
}

/* ==================================================
   SIDEBAR / RAIL / MOBILE DRAWER
================================================== */
.a75-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 20px 14px;
    background: linear-gradient(180deg, var(--a75-sidebar) 0%, var(--a75-sidebar-2) 100%);
    color: var(--a75-sidebar-ink);
    border-inline-end: 1px solid var(--a75-sidebar-border);
    z-index: 30;
}
.a75-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 22px;
    border-bottom: 1px solid var(--a75-sidebar-border);
    margin-bottom: 18px;
}
.a75-brand strong { display: block; letter-spacing: 0; }
.a75-brand span { display: block; color: var(--a75-sidebar-muted); font-size: .78rem; }
.a75-nav {
    display: grid;
    gap: 8px;
}
.a75-nav a {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 16px;
    padding: 10px 12px;
    color: var(--a75-sidebar-muted);
    transition: background var(--a75-transition), color var(--a75-transition), transform var(--a75-transition);
}
.a75-nav a:hover { background: rgba(255,255,255,.07); color: var(--a75-sidebar-ink); transform: translateX(2px); }
.a75-nav a.is-active {
    background: var(--a75-sidebar-active);
    color: var(--a75-sidebar-ink);
    box-shadow: inset 4px 0 0 var(--a75-primary);
}
.a75-nav a span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(255,255,255,.08);
    color: #ffc7cc;
}
.a75-nav a b { font-size: .92rem; }

/* ==================================================
   TOPBAR
================================================== */
.a75-topbar {
    min-height: var(--a75-top-app-bar-height);
    display: grid;
    grid-template-columns: auto minmax(170px, 1fr) minmax(260px, 560px) auto;
    align-items: center;
    gap: 14px;
    padding: 12px var(--a75-window-padding);
    background: color-mix(in srgb, var(--a75-bg-soft) 86%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--a75-border);
    position: sticky;
    top: 0;
    z-index: 25;
}
.a75-icon-button {
    width: var(--a75-touch-target);
    height: var(--a75-touch-target);
    border: 1px solid var(--a75-border);
    border-radius: 16px;
    background: var(--a75-card);
    color: var(--a75-ink);
    display: none;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--a75-shadow-soft);
}
.a75-topbar-title small {
    display: block;
    color: var(--a75-primary-dark);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.a75-topbar-title strong {
    display: block;
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    letter-spacing: 0;
}
.a75-search-shell {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--a75-border);
    border-radius: 18px;
    padding: 0 14px;
    background: var(--a75-card);
    box-shadow: var(--a75-shadow-soft);
}
.a75-search-shell input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--a75-ink);
}
.a75-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.a75-lang-form select,
.a75-form select,
.a75-form input,
.a75-form textarea {
    border: 1px solid var(--a75-border);
    background: var(--a75-card);
    color: var(--a75-ink);
    border-radius: 14px;
    min-height: 44px;
    padding: 0 12px;
}
.a75-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    border-radius: 999px;
    padding: 5px 12px 5px 6px;
    background: var(--a75-card);
    border: 1px solid var(--a75-border);
    box-shadow: var(--a75-shadow-soft);
}
.a75-profile-chip span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #dc2626, #111111);
    color: #fff;
    font-weight: 900;
}
.a75-profile-chip b { font-size: .88rem; }
.a75-topbar-link {
    min-height: 40px;
    padding: 8px 13px;
    font-size: .86rem;
}

/* ==================================================
   PAGE HERO / CARDS / BADGES
================================================== */
.a75-page-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    margin-bottom: 24px;
    padding: clamp(22px, 4vw, 40px);
    border: 1px solid var(--a75-border);
    border-radius: var(--a75-radius-xl);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--a75-card) 96%, transparent), var(--a75-card-soft));
    box-shadow: var(--a75-shadow);
    overflow: hidden;
    border-block-start: 4px solid var(--a75-primary);
}
.a75-page-hero::after {
    content: none;
}
.a75-eyebrow {
    margin: 0 0 8px;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--a75-primary-dark);
}
.a75-page-hero h1 {
    margin: 0;
    max-width: 850px;
    font-size: clamp(2rem, 5vw, 4.2rem);
    line-height: .96;
    letter-spacing: 0;
}
.a75-page-hero p:not(.a75-eyebrow) {
    max-width: 760px;
    margin: 14px 0 0;
    color: var(--a75-muted);
    font-size: clamp(.98rem, 1.5vw, 1.12rem);
}
.a75-hero-badges,
.a75-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.a75-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--a75-border);
    background: var(--a75-card);
    color: var(--a75-muted);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .01em;
}
.a75-pill-info { color: #1d4ed8; background: var(--a75-info-soft); border-color: #c7d7ff; }
.a75-pill-success { color: var(--a75-success); background: var(--a75-success-soft); border-color: #bde6ca; }
.a75-pill-warning { color: var(--a75-warning); background: #fff3e0; border-color: #f4d9b3; }
.a75-pill-danger { color: var(--a75-danger); background: var(--a75-danger-soft); border-color: #ffc4bd; }
.a75-pill-neutral { color: var(--a75-muted); }

.a75-card,
.a75-setting-card,
.a75-health-card,
.a75-provider-card,
.a75-stat-card {
    border: 1px solid var(--a75-border);
    background: var(--a75-card);
    border-radius: var(--a75-radius);
    box-shadow: var(--a75-shadow-soft);
}
.a75-card,
.a75-setting-card,
.a75-health-card,
.a75-provider-card { padding: clamp(18px, 2.2vw, 26px); }
.a75-card h2,
.a75-setting-card h2,
.a75-health-card h2 { margin: 0 0 8px; letter-spacing: 0; }
.a75-card p,
.a75-setting-card p,
.a75-health-card p { color: var(--a75-muted); margin-top: 0; }

.a75-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.a75-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
}
.a75-stat-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--a75-primary-soft);
    color: var(--a75-primary-dark);
    font-weight: 900;
}
.a75-stat-card span { display: block; color: var(--a75-muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.a75-stat-card strong { display: block; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: 0; }
.a75-stat-card small { color: var(--a75-muted); }

.a75-grid-2,
.a75-two-pane {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.a75-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.a75-surface-demo,
.a75-tool-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.a75-surface-demo span,
.a75-tool-cloud span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--a75-primary-soft);
    color: var(--a75-primary-dark);
    font-weight: 800;
}

/* ==================================================
   BUTTONS / FORMS / TABLES
================================================== */
.a75-button-primary,
.a75-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 15px;
    font-weight: 850;
    cursor: pointer;
    transition: transform var(--a75-transition), box-shadow var(--a75-transition), background var(--a75-transition);
}
.a75-button-primary {
    border: 1px solid var(--a75-primary-dark);
    background: var(--a75-primary);
    color: #fff;
    box-shadow: 0 12px 28px rgba(209, 31, 42, .18);
}
.a75-button-secondary {
    border: 1px solid var(--a75-border);
    background: var(--a75-card);
    color: var(--a75-ink);
}
.a75-button-primary:hover,
.a75-button-secondary:hover { transform: translateY(-1px); box-shadow: var(--a75-shadow-soft); }
.a75-form {
    display: grid;
    gap: 16px;
}
.a75-form label {
    display: grid;
    gap: 7px;
    color: var(--a75-muted);
    font-size: .82rem;
    font-weight: 800;
}
.a75-form input,
.a75-form select,
.a75-form textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
}
.a75-form textarea { min-height: 120px; padding-top: 12px; resize: vertical; }
.a75-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.a75-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 8px; }
.a75-alert-danger {
    border: 1px solid #ffc4bd;
    background: var(--a75-danger-soft);
    color: var(--a75-danger);
    border-radius: 16px;
    padding: 12px 14px;
    font-weight: 750;
}
.a75-table-wrap {
    overflow: auto;
    border: 1px solid var(--a75-border);
    border-radius: var(--a75-radius);
    background: var(--a75-card);
    box-shadow: var(--a75-shadow-soft);
}
.a75-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.a75-table th,
.a75-table td { padding: 13px 15px; border-bottom: 1px solid var(--a75-border); text-align: left; }
.a75-table th { color: var(--a75-muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.a75-table tr:last-child td { border-bottom: 0; }
.a75-definition-list { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 16px; }
.a75-definition-list dt { color: var(--a75-muted); font-weight: 800; }
.a75-definition-list dd { margin: 0; }
.a75-empty {
    border: 1px dashed var(--a75-border-strong);
    border-radius: var(--a75-radius);
    padding: 24px;
    background: var(--a75-card-soft);
    text-align: center;
}
.a75-empty p { color: var(--a75-muted); }

/* ==================================================
   LOGO-FIRST STATIC-PORT INSPIRED COMPONENTS
================================================== */
.a75-provider-card {
    position: relative;
    overflow: hidden;
}
.a75-provider-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -28px;
    inset-block-start: -28px;
    width: 100px;
    height: 100px;
    border-radius: 28px;
    background: color-mix(in srgb, var(--a75-primary) 10%, transparent);
    transform: rotate(18deg);
}
.a75-logo-cloud {
    display: grid;
    grid-template-columns: repeat(8, minmax(46px, 1fr));
    gap: 10px;
    align-items: center;
}
.a75-logo-cloud img,
.a75-logo-token {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 17px;
    padding: 9px;
    background: var(--a75-card);
    border: 1px solid var(--a75-border);
    box-shadow: var(--a75-shadow-soft);
}

/* ==================================================
   XO LABS LOVABLE-ADAPTED STOREFRONT SURFACES
================================================== */
.xo-catalog-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 18px;
    align-items: end;
    margin-bottom: 18px;
    padding: clamp(24px, 4vw, 46px);
    border-radius: var(--a75-radius-xl);
    background: linear-gradient(135deg, #111111 0%, #2b2b2b 100%);
    color: #ffffff;
    border-bottom: 4px solid var(--a75-primary);
    box-shadow: var(--a75-shadow);
}
.xo-kicker,
.xo-product-meta {
    display: inline-flex;
    color: var(--a75-primary);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.xo-catalog-hero h2 {
    margin: 8px 0 10px;
    font-size: clamp(2rem, 5vw, 3.9rem);
    line-height: .96;
    letter-spacing: 0;
}
.xo-catalog-hero p {
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
}
.xo-info-stack {
    display: grid;
    gap: 8px;
}
.xo-info-stack span {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #ffffff;
    font-size: .82rem;
    font-weight: 800;
}
.xo-info-stack span::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--a75-primary);
}
.xo-product-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.xo-product-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--a75-border);
    border-radius: var(--a75-radius);
    background: var(--a75-card);
    box-shadow: var(--a75-shadow-soft);
}
.xo-product-media {
    min-height: 190px;
    display: grid;
    place-items: center;
    background: var(--a75-workspace);
    color: var(--a75-primary);
    font-size: 2.4rem;
    font-weight: 950;
    letter-spacing: 0;
}
.xo-product-media-dark {
    background: #111111;
    color: #ffffff;
}
.xo-product-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
}
.xo-product-body h3 {
    margin: 0;
    font-size: 1.12rem;
    letter-spacing: 0;
}
.xo-product-body p {
    margin: 0;
    color: var(--a75-muted);
}
.xo-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

/* ==================================================
   FLASH / SNACKBAR-STYLE FEEDBACK
================================================== */
.a75-flash-stack {
    position: fixed;
    z-index: 120;
    inset-inline-end: 22px;
    inset-block-end: 24px;
    display: grid;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
}
.a75-flash {
    border-radius: 18px;
    padding: 13px 16px;
    color: #fff;
    box-shadow: var(--a75-shadow);
    transition: opacity var(--a75-transition), transform var(--a75-transition);
}
.a75-flash-success { background: #166534; }
.a75-flash-danger { background: #991b1b; }
.a75-flash-info, .a75-flash-warning { background: #2d2724; }

/* ==================================================
   MOBILE BOTTOM NAV / SCRIM
================================================== */
.a75-mobile-nav { display: none; }
.a75-scrim {
    position: fixed;
    inset: 0;
    z-index: 28;
    border: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--a75-transition);
}
.a75-scrim.is-visible { opacity: 1; pointer-events: auto; }

/* ==================================================
   RESPONSIVE SURFACES
================================================== */
@media (max-width: 1180px) {
    .a75-shell { grid-template-columns: var(--a75-app-rail-width) minmax(0, 1fr); }
    .a75-sidebar { padding: 16px 10px; }
    .a75-brand { justify-content: center; padding-bottom: 14px; }
    .a75-brand div:not(.a75-brand-mark),
    .a75-nav a b { display: none; }
    .a75-nav a { justify-content: center; padding: 10px; }
    .a75-nav a.is-active { box-shadow: inset 0 -4px 0 var(--a75-primary); }
    .a75-topbar { grid-template-columns: minmax(160px, 1fr) minmax(220px, 440px) auto; }
    .a75-icon-button { display: none; }
    .a75-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .xo-catalog-hero,
    .xo-product-preview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .a75-shell { display: block; padding-bottom: 86px; }
    .a75-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: min(86vw, 320px);
        transform: translateX(-105%);
        transition: transform var(--a75-transition);
        box-shadow: var(--a75-shadow);
    }
    html[dir="rtl"] .a75-sidebar { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(105%); }
    .a75-sidebar.is-open { transform: translateX(0); }
    .a75-brand div:not(.a75-brand-mark),
    .a75-nav a b { display: block; }
    .a75-brand { justify-content: flex-start; }
    .a75-nav a { justify-content: flex-start; }
    .a75-nav a.is-active { box-shadow: inset 4px 0 0 var(--a75-primary); }
    .a75-topbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
    }
    .a75-icon-button { display: grid; }
    .a75-search-shell { grid-column: 1 / -1; min-height: 44px; }
    .a75-lang-form, .a75-profile-chip b { display: none; }
    .a75-topbar-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
    .a75-topbar-actions .a75-topbar-link + .a75-topbar-link { display: none; }
    .a75-main { padding: 16px 16px 108px; }
    .a75-page-hero { grid-template-columns: 1fr; padding: 18px; }
    .a75-page-hero h1 { font-size: 1.9rem; }
    .a75-hero-badges { justify-content: flex-start; }
    .xo-catalog-hero,
    .xo-product-preview-grid,
    .xo-product-card { grid-template-columns: 1fr; }
    .xo-catalog-hero { padding: 18px; gap: 12px; }
    .xo-catalog-hero h2 { font-size: 1.85rem; }
    .xo-catalog-hero p { font-size: .94rem; }
    .xo-info-stack span { min-height: 32px; font-size: .74rem; }
    .xo-info-stack span:nth-child(n+3) { display: none; }
    .xo-product-media { min-height: 150px; }
    .a75-stat-grid, .a75-grid-2, .a75-two-pane, .a75-card-grid, .a75-form-grid { grid-template-columns: 1fr; }
    .a75-mobile-nav {
        position: fixed;
        inset-inline: 12px;
        inset-block-end: 12px;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
        border: 1px solid var(--a75-border);
        border-radius: 24px;
        background: color-mix(in srgb, var(--a75-card) 92%, transparent);
        backdrop-filter: blur(16px);
        box-shadow: var(--a75-shadow);
    }
    .a75-mobile-nav a {
        display: grid;
        gap: 2px;
        place-items: center;
        min-height: 54px;
        border-radius: 18px;
        color: var(--a75-muted);
        font-size: .72rem;
        font-weight: 800;
    }
    .a75-mobile-nav a span { font-size: 1.1rem; }
    .a75-mobile-nav a.is-active { background: var(--a75-primary-soft); color: var(--a75-primary-dark); }
}
@media (min-width: 1800px) {
    .a75-content { --a75-content-max-width: 1680px; }
    .a75-stat-grid { grid-template-columns: repeat(4, minmax(260px, 1fr)); }
    .a75-card, .a75-setting-card, .a75-health-card, .a75-provider-card { padding: 32px; }
}
.a75-surface-tv .a75-content { max-width: 1760px; }
.a75-surface-tv .a75-stat-card strong { font-size: 3rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ==================================================
   === Lovable visual port - components ===
   --------------------------------------------------
   Why: Module pages and the storefront chrome reference these unprefixed
   class names exactly as the Lovable prototype uses them. Rules below are
   ported verbatim from docs/LOVEABLE-XOLABS-PROTOTYPE/prototype/assets/css/
   styles.css, with --color-* replaced by --a75-* tokens. Do not rename.
================================================== */

/* --- Layout primitives --- */
.container { max-width: var(--a75-container); margin: 0 auto; padding: 0 1.25rem; }
.row { display: flex; flex-wrap: wrap; gap: 1rem; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stack > * + * { margin-top: 1rem; }
.split { display: grid; grid-template-columns: 1fr 360px; gap: 1.5rem; align-items: start; }
.section { padding: 2.5rem 0; }
.section h2 { margin-bottom: 1rem; }

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .65rem 1.1rem; border-radius: var(--a75-radius-md);
    border: 1px solid transparent; font-weight: 600; cursor: pointer;
    background: var(--a75-surface); color: var(--a75-ink); font-size: .95rem;
    transition: transform .05s ease, opacity .15s;
    text-decoration: none;
}
.btn:hover { opacity: .9; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--a75-primary); color: var(--a75-primary-contrast); border-color: var(--a75-primary); }
.btn-secondary { background: var(--a75-secondary); color: #fff; border-color: var(--a75-secondary); }
.btn-outline { background: transparent; border-color: var(--a75-border); color: var(--a75-ink); }
.btn-success { background: var(--a75-success); color: #fff; border-color: var(--a75-success); }
.btn-danger { background: var(--a75-danger); color: #fff; border-color: var(--a75-danger); }
.btn-block { width: 100%; }
.btn-lg { padding: 1rem 1.5rem; font-size: 1.1rem; }
.btn-sm { padding: .45rem .7rem; font-size: .82rem; border-radius: var(--a75-radius-sm); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Cards --- */
.card {
    background: var(--a75-bg); border: 1px solid var(--a75-border);
    border-radius: var(--a75-radius-md); padding: 1rem; box-shadow: var(--a75-shadow-sm);
}
.card.surface { background: var(--a75-surface); }
.kpi { padding: 1.25rem; }
.kpi .label { font-size: .8rem; color: var(--a75-muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi .value { font-size: 1.75rem; font-weight: 700; margin-top: .25rem; }

/* --- Badges --- */
.badge {
    display: inline-block; padding: .15rem .55rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    background: var(--a75-surface); color: var(--a75-ink); border: 1px solid var(--a75-border);
}
.badge.success { background: #e6f4ea; color: var(--a75-success); border-color: #c6e7d1; }
.badge.warning { background: #fff3e0; color: var(--a75-warning); border-color: #f4d9b3; }
.badge.danger { background: #fdecef; color: var(--a75-danger); border-color: #f4c2cc; }
.badge.info { background: #e8eefc; color: var(--a75-info); border-color: #c4d2f0; }

/* --- Forms --- */
.form-row { display: grid; gap: .75rem; }
.form-row.two { grid-template-columns: 1fr 1fr; }
.checkbox { display: flex; gap: .55rem; align-items: flex-start; font-weight: 500; font-size: .9rem; }
.checkbox input { margin-top: .2rem; }

/* --- Tables --- */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--a75-border); }
.table th { background: var(--a75-surface); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--a75-muted); }
.table tbody tr:hover { background: var(--a75-surface); }
.order-status-form {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(130px, 1fr) auto;
    gap: .45rem;
    align-items: center;
    min-width: min(520px, 100%);
}
.order-status-form select {
    width: 100%;
    border: 1px solid var(--a75-border);
    border-radius: var(--a75-radius-sm);
    background: #fff;
    color: var(--a75-ink);
    padding: .45rem .6rem;
    font-size: .82rem;
}
@media (max-width: 760px) {
    .order-status-form { grid-template-columns: 1fr; min-width: 0; }
}

/* --- Site chrome: header --- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--a75-bg);
    border-bottom: 1px solid var(--a75-border);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 2rem;
    min-height: 5rem;
}
.site-header .brand {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 700; color: var(--a75-ink); text-decoration: none;
}
.site-header .brand-logo {
    /* Live demo pattern: anchor on height, free width, scale up at sm/md.
       Mark-only SVG so the wordmark + slogan are not crammed into a tiny box. */
    height: 48px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    display: block;
}
@media (min-width: 640px) {
    .site-header .brand-logo { height: 56px; max-width: 112px; }
}
@media (min-width: 768px) {
    .site-header .brand-logo { height: 72px; max-width: 144px; }
}
.site-header .brand-mark {
    display: inline-grid; place-items: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, #dc2626, #111111);
    color: #fff; font-weight: 900; font-size: .82rem; letter-spacing: 0;
}
.site-header .brand-name { font-weight: 700; }
.site-header nav,
.site-header .primary-nav {
    display: flex;
    gap: 1.5rem;
    margin: 0;
}
.site-header nav a,
.site-header .primary-nav a {
    color: var(--a75-ink);
    font-weight: 500;
    padding: 0;
}
.site-header nav a:hover { color: var(--a75-primary); text-decoration: none; }
.site-header .search { flex: 1; max-width: 360px; margin-left: auto; }
.site-header .search input {
    width: 100%; padding: .55rem .75rem;
    border: 1px solid var(--a75-border); border-radius: var(--a75-radius-sm);
    font: inherit; background: #fff; color: var(--a75-ink);
}
.site-header .header-actions { display: flex; align-items: center; gap: .75rem; }
.site-header .cart-link { color: var(--a75-ink); font-weight: 600; }
.site-header .cart-link:hover { color: var(--a75-primary); text-decoration: none; }
.compliance-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--a75-surface); color: var(--a75-ink);
    border: 1px solid var(--a75-border);
    padding: .25rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
}
.cart-badge {
    display: inline-block; min-width: 22px; padding: 0 .35rem;
    border-radius: 999px; background: var(--a75-primary); color: #fff;
    font-size: .72rem; font-weight: 800; text-align: center;
}

/* --- Site chrome: footer --- */
.site-footer {
    margin-top: 4rem; padding: 2rem 0; border-top: 1px solid var(--a75-border);
    background: var(--a75-surface); color: var(--a75-muted); font-size: .875rem;
}
.site-footer h4 { color: var(--a75-ink); font-size: .95rem; margin-bottom: .5rem; }
.site-footer .footer-logo {
    width: 120px;
    max-width: 100%;
    height: auto;
    margin-bottom: .65rem;
}
.site-footer a { color: var(--a75-muted); display: block; padding: .15rem 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin: 0; }

/* --- Mobile drawer (triggered from top-header burger) --- */
.burger {
    display: none;
    width: 42px; height: 42px;
    border: 1px solid var(--a75-border); border-radius: 10px;
    background: var(--a75-bg); color: var(--a75-ink);
    font-size: 1.2rem; cursor: pointer;
    align-items: center; justify-content: center;
}
.mobile-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(86vw, 320px);
    z-index: 110;
    background: var(--a75-bg);
    border-inline-end: 1px solid var(--a75-border);
    padding: 1.25rem 1rem;
    display: none;
    flex-direction: column;
    gap: .35rem;
    box-shadow: var(--a75-shadow-md);
}
.mobile-drawer a {
    display: block;
    padding: .65rem .75rem;
    border-radius: var(--a75-radius-sm);
    color: var(--a75-ink);
    font-weight: 600;
}
.mobile-drawer a:hover { background: var(--a75-surface); text-decoration: none; }
.mobile-drawer.open { display: flex; }
.mobile-drawer-backdrop {
    position: fixed; inset: 0;
    z-index: 100;
    background: rgba(0,0,0,.45);
    display: none;
}
.mobile-drawer-backdrop.open { display: block; }
.mobile-drawer .drawer-search { margin-bottom: .5rem; }
.mobile-drawer .drawer-search input {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--a75-border);
    border-radius: var(--a75-radius-sm);
    font: inherit;
    background: #fff;
    color: var(--a75-ink);
}

/* --- Admin email template WYSIWYG editor --- */
.email-editor { border: 1px solid var(--a75-border); border-radius: var(--a75-radius-sm); overflow: hidden; background: #fff; }
.email-editor-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .4rem; background: var(--a75-surface); border-bottom: 1px solid var(--a75-border); }
.email-editor-toolbar button { padding: .3rem .55rem; border: 1px solid var(--a75-border); border-radius: 6px; background: #fff; color: var(--a75-ink); cursor: pointer; font-size: .85rem; line-height: 1.1; }
.email-editor-toolbar button:hover { background: var(--a75-bg); }
.email-editor-surface { min-height: 220px; max-height: 460px; overflow-y: auto; padding: .85rem 1rem; background: #fff; color: var(--a75-ink); line-height: 1.5; outline: none; }
.email-editor-surface:focus { box-shadow: inset 0 0 0 2px rgba(220,38,38,.15); }
.email-editor-html { width: 100%; border: 0; padding: .85rem 1rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; resize: vertical; }

.hero {
    min-height: 520px;
    display: grid;
    align-items: end;
    color: #fff;
    padding: 4.5rem 0 3.5rem;
    background: #2a2a2a;
}
.hero h1 { max-width: 760px; color: #fff; font-size: clamp(2.6rem, 6vw, 5rem); line-height: .94; margin: 0 0 1rem; }
.hero p { max-width: 620px; color: rgba(255,255,255,.84); font-size: 1.08rem; }
.hero .cta { margin-top: 1.5rem; }

/* --- Catalog hero / info strip --- */
.catalog-hero {
    background: #2a2a2a;
    color: #fff; padding: 3rem 0;
}
.catalog-hero .chip-hero {
    display: inline-block; padding: .3rem .75rem; border-radius: 999px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.catalog-hero h1 { font-size: 2.5rem; margin: .75rem 0 .5rem; color: #fff; }
.catalog-hero p { color: rgba(255,255,255,.8); max-width: 560px; }

.info-strip { background: var(--a75-surface); border-bottom: 1px solid var(--a75-border); padding: .65rem 0; font-size: .8rem; }
.info-strip .row { justify-content: center; gap: 2rem; margin: 0; }
.info-strip .bullet { display: inline-flex; align-items: center; gap: .4rem; color: var(--a75-ink); font-weight: 500; }
.info-strip .bullet::before { content: "*"; color: var(--a75-primary); font-weight: 800; }

/* --- Catalog layout --- */
.catalog-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; padding-top: 2rem; }
.cat-sidebar h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--a75-muted); margin-bottom: .5rem; }
.cat-sidebar ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .15rem; }
.cat-sidebar li button {
    width: 100%; text-align: left; padding: .5rem .75rem; border-radius: var(--a75-radius-sm);
    background: transparent; border: 0; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--a75-ink);
}
.cat-sidebar li button:hover { background: var(--a75-surface); }
.cat-sidebar li button.active { background: var(--a75-primary); color: var(--a75-primary-contrast); }
.cat-section { margin-bottom: 3rem; }
.cat-section .label { font-size: .75rem; color: var(--a75-primary); font-weight: 700; text-transform: uppercase; }
.cat-section h2 { margin: .25rem 0 .25rem; }
.cat-section .desc { color: var(--a75-muted); margin-bottom: 1.25rem; }
.catalog-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* --- Product card --- */
.product-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.product-card .img-wrap {
    background: var(--a75-surface); aspect-ratio: 1/1;
    display: grid; place-items: center; padding: 1.25rem; overflow: hidden;
}
.product-card .img-wrap img { width: 55%; opacity: .9; }
.product-card .body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; flex: 1; }
.product-card .meta { font-size: .7rem; color: var(--a75-primary); text-transform: uppercase; font-weight: 700; letter-spacing: .05em; }
.product-card h3 { font-size: 1rem; margin: 0; font-weight: 700; }
.product-card h3 a { color: inherit; }
.product-card .desc { font-size: .8rem; color: var(--a75-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-card .variant-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.product-card .vchip {
    font-size: .7rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px;
    border: 1px solid var(--a75-border); background: #fff; color: var(--a75-muted); cursor: pointer;
}
.product-card .vchip.active { border-color: var(--a75-primary); background: color-mix(in oklab, var(--a75-primary) 10%, #fff); color: var(--a75-primary); }
.product-card .coa {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    font-size: .75rem; font-weight: 600; padding: .35rem .6rem;
    border: 1px solid var(--a75-border); border-radius: var(--a75-radius-sm);
    background: #fff; color: var(--a75-primary);
}
.product-card .coa.muted { color: var(--a75-muted); }
.product-card .price { font-weight: 800; color: var(--a75-primary); font-size: 1.35rem; }
.product-card .price small { color: var(--a75-muted); font-weight: 500; margin-left: .35rem; font-size: .75rem; }
.product-card .qty { display: flex; border: 1px solid var(--a75-border); border-radius: var(--a75-radius-sm); overflow: hidden; }
.product-card .qty button { background: #fff; border: 0; padding: .35rem .65rem; cursor: pointer; font-weight: 700; }
.product-card .qty button:hover { background: var(--a75-surface); }
.product-card .qty input { border: 0; text-align: center; width: 100%; padding: .35rem; font-weight: 700; }

/* --- Tabs --- */
.tabs { border-bottom: 1px solid var(--a75-border); display: flex; gap: 1rem; margin-bottom: 1rem; }
.tab { padding: .65rem .25rem; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 600; color: var(--a75-muted); }
.tab.active { color: var(--a75-ink); border-color: var(--a75-primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* --- Payment / wizard / flow --- */
.pay-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pay-method {
    border: 2px solid var(--a75-border); border-radius: var(--a75-radius-md);
    padding: .9rem; cursor: pointer; background: #fff; text-align: left;
    display: flex; flex-direction: column; gap: .35rem;
}
.pay-method:hover { border-color: var(--a75-primary); }
.pay-method.selected { border-color: var(--a75-primary); background: #fff8f8; }
.pay-method .pm-name { font-weight: 700; }
.pay-method .pm-type { font-size: .7rem; color: var(--a75-muted); text-transform: uppercase; }
.pay-panel {
    margin-top: 1rem; padding: 1.25rem; border-radius: var(--a75-radius-md);
    border: 2px dashed var(--a75-primary); background: #fff8f8;
}
.pay-panel .ref {
    background: #fff; border: 1px solid var(--a75-border); border-radius: var(--a75-radius-sm);
    padding: .75rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1rem;
}
.pay-panel .amount { font-size: 2rem; font-weight: 800; color: var(--a75-primary); }

.flow {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: 1rem; background: var(--a75-surface); border-radius: var(--a75-radius-md);
    border: 1px solid var(--a75-border);
}
.flow .node {
    padding: .55rem .85rem; background: #fff; border: 1px solid var(--a75-border);
    border-radius: var(--a75-radius-sm); font-size: .85rem; font-weight: 600;
}
.flow .arrow { color: var(--a75-muted); }

.wizard-steps { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.wizard-step {
    flex: 1; min-width: 120px; padding: .65rem .85rem; border-radius: var(--a75-radius-sm);
    background: var(--a75-surface); border: 1px solid var(--a75-border); font-size: .85rem;
}
.wizard-step.active { background: var(--a75-primary); color: var(--a75-primary-contrast); border-color: var(--a75-primary); }
.wizard-step .num { font-weight: 800; margin-right: .35rem; }

/* --- Chips --- */
.chip {
    padding: .35rem .8rem; border-radius: 999px; background: var(--a75-surface);
    border: 1px solid var(--a75-border); font-size: .85rem; cursor: pointer;
}
.chip.active { background: var(--a75-primary); color: var(--a75-primary-contrast); border-color: var(--a75-primary); }

/* --- Modal --- */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.6);
    display: grid; place-items: center; z-index: 1000; padding: 1rem;
}
.modal {
    background: var(--a75-bg); border-radius: var(--a75-radius-lg);
    max-width: 520px; width: 100%; padding: 1.75rem; box-shadow: var(--a75-shadow-md);
}
.modal h2 { font-size: 1.4rem; }
.modal .actions { display: flex; gap: .5rem; margin-top: 1.25rem; justify-content: flex-end; }
.modal .checks { display: grid; gap: .65rem; margin: 1rem 0; }

/* --- States: toast / empty / loading / error --- */
.toast {
    position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 2000;
    background: var(--a75-secondary); color: #fff; padding: .75rem 1rem;
    border-radius: var(--a75-radius-md); box-shadow: var(--a75-shadow-md); font-size: .9rem;
    opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-info { background: var(--a75-secondary); }
.toast-success { background: var(--a75-success, #138a36); }
.toast-warning { background: #8a4b08; }
.toast-error { background: var(--a75-danger, #b00020); }
.cart-empty-state {
    text-align: center;
    padding: 3rem;
    max-width: 520px;
    margin: 0 auto;
}
.empty, .loading, .error {
    padding: 2rem; text-align: center; border: 1px dashed var(--a75-border);
    border-radius: var(--a75-radius-md); color: var(--a75-muted); background: var(--a75-surface);
}
.error { color: var(--a75-danger); border-color: var(--a75-danger); background: #fdecef; }

/* --- Admin sub-nav (in-page horizontal row) --- */
.admin-subnav {
    display: flex; flex-wrap: wrap; gap: .5rem;
    border-bottom: 1px solid var(--a75-border);
    padding-bottom: .75rem; margin-bottom: 1.25rem;
}
.admin-subnav a {
    padding: .45rem .85rem;
    border-radius: var(--a75-radius-sm);
    color: var(--a75-ink);
    font-weight: 600;
    font-size: .9rem;
    border: 1px solid transparent;
}
.admin-subnav a:hover { background: var(--a75-surface); text-decoration: none; }
.admin-subnav a.active {
    background: var(--a75-primary);
    color: var(--a75-primary-contrast);
    border-color: var(--a75-primary);
}

/* --- Centered auth card (login/register) --- */
.auth-card {
    width: min(480px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}
.auth-card .brand {
    display: inline-flex; align-items: center; gap: .5rem;
    justify-content: center;
    font-weight: 700; color: var(--a75-ink); text-decoration: none;
    margin-bottom: .5rem;
}
.auth-card .brand-logo {
    height: 64px;
    width: auto;
    max-width: 128px;
    object-fit: contain;
}
.auth-card .brand-mark {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(135deg, #dc2626, #111111);
    color: #fff; font-weight: 900; font-size: .9rem;
}

/* --- Utilities (Lovable visual port) --- */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-sm { gap: .5rem; }
.gap-md { gap: 1rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.hidden { display: none !important; }
.muted { color: var(--a75-muted); font-size: .875rem; }

/* --- Responsive: collapse multi-column at 880px --- */
@media (max-width: 880px) {
    .catalog-layout { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; }
    .form-row.two { grid-template-columns: 1fr; }
}

/* --- Responsive: switch top-header to burger before tablet chrome crowds.
   Phase 7B Agent A: V3 prototype hides the primary nav at Tailwind `lg` (<1024px)
   and only Sign In hides below `md` (<768px). Join + Cart + Menu remain visible
   at all widths so the mobile shell matches the prototype + live. --- */
@media (max-width: 1023.98px) {
    .site-header nav,
    .site-header .primary-nav { display: none; }
    .site-header .search { display: none; }
    .site-header .container { gap: .5rem; padding: .7rem 1rem; }
    .site-header .brand-name { display: none; }
    .site-header .header-actions { margin-left: auto; gap: .4rem; }
    .cart-link { padding: .35rem .45rem; }
    .burger { display: inline-flex; }
}
/* Sign In drops below 768 only — Join + Cart + Menu remain at all widths. */
@media (max-width: 767.98px) {
    .site-header .btn-signin,
    .site-header .a75-profile-chip { display: none; }
}

/* ==================================================
   Live-reference visual match (xolabs.industryresults.com)
   ================================================== */

.i-user::before { content: "\1F464"; font-size: 1.05rem; }
.i-cart::before { content: "\1F6D2"; font-size: 1.1rem; }
.i-ig::before { content: "\1F4F7"; font-size: 1rem; }
.i-tt::before { content: "\1F39E"; font-size: 1rem; }

.site-header { background: #fff; }
.site-header .primary-nav a {
    padding: 0;
    border-radius: 0;
    background: none;
    transition: color .15s ease;
}
.site-header .primary-nav a:hover,
.site-header .primary-nav a.active { color: var(--a75-primary); background: transparent; }
.site-header .primary-nav { margin: 0; }
.site-header .header-actions { margin: 0; }
.btn-signin { display: inline-flex; align-items: center; gap: .35rem; }
.btn-join { font-weight: 700; }
.cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .55rem;
    border-radius: 8px;
    color: var(--a75-ink);
}
.cart-link .cart-badge {
    background: var(--a75-primary);
    color: #fff;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: .72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero {
    position: relative;
    background: linear-gradient(120deg, #1a0608 0%, #4a0a0e 35%, #b81824 80%, #dc2626 100%);
    color: #fff;
    overflow: hidden;
    padding: 4rem 0;
}
.hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; }
.hero h1 {
    font-size: clamp(2.4rem, 4.5vw, 4.5rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 1rem 0;
}
/* Live demo keeps the three-line headline at 72px on tablet (down to 768px)
   instead of letting the clamp scale it down with the viewport. */
@media (min-width: 768px) and (max-width: 1100px) {
    .hero h1 {
        font-size: 4.5rem;
        line-height: .95;
    }
}
@media (max-width: 640px) {
    .hero h1 {
        font-size: 3rem;
        line-height: .95;
    }
}
.hero p { font-size: 1.1rem; max-width: 56ch; opacity: .92; }
.hero .gradient-text {
    background: linear-gradient(90deg, #4a8cff 0%, #9a5cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hero .chip-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem .35rem .65rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.hero .cta { margin-top: 1.25rem; }
.hero .btn { padding: .85rem 1.4rem; font-weight: 600; }
.hero .btn-primary { background: #fff; color: #111; border: none; }
.hero .btn-primary:hover { background: #f5f5f7; }
.hero .btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.hero .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.hero-stats { display: grid; grid-template-columns: repeat(3, max-content); gap: 2.5rem; margin-top: 1.75rem; }
.hero-stats .stat .v { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.hero-stats .stat .l { font-size: .78rem; opacity: .8; margin-top: .25rem; letter-spacing: .03em; }
.hero-image {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    justify-self: center;
}
.hero-image img { display: block; width: 100%; height: auto; }
@media (max-width: 880px) {
    .hero .container { grid-template-columns: 1fr; }
    .hero-image { order: 2; }
    .hero-stats { grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
}

.trust-strip { background: var(--a75-surface); padding: 1rem 0; border-bottom: 1px solid var(--a75-border); }
.trust-strip .container { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.trust-item { display: flex; align-items: center; gap: .55rem; color: var(--a75-ink); font-size: .85rem; font-weight: 600; }
.trust-item .dot {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: rgba(209,31,42,.12);
    color: var(--a75-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem;
}
@media (max-width: 980px) { .trust-strip .container { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .trust-strip .container { grid-template-columns: 1fr 1fr; } }

.section-eyebrow {
    display: inline-block;
    padding: .25rem .75rem;
    background: rgba(209,31,42,.08);
    color: var(--a75-primary);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .12em;
    border-radius: 999px;
    text-transform: uppercase;
}
.section-heading { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.01em; margin: .65rem 0; }
.section-subhead { color: var(--a75-muted); max-width: 60ch; margin: 0 auto; }

.goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.goal-card {
    background: #fff;
    border: 1px solid var(--a75-border);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}
.goal-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.06); border-color: rgba(209,31,42,.4); }
.goal-card.active { border-color: var(--a75-primary); box-shadow: 0 10px 30px rgba(209,31,42,.12); }
.goal-card .goal-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(209,31,42,.1);
    color: var(--a75-primary);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}
.goal-card h3 { font-size: 1.1rem; margin: .25rem 0 .35rem; }
.goal-card .muted { font-size: .85rem; }
.goal-card .goal-cta { display: inline-flex; align-items: center; gap: .25rem; margin-top: .85rem; color: var(--a75-primary); font-weight: 600; font-size: .9rem; }
.goal-chip-row { display: flex; flex-wrap: wrap; gap: .35rem; margin: -.1rem 0 .15rem; }
.goal-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    width: fit-content;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: rgba(209,31,42,.08);
    color: var(--a75-primary);
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
}
@media (max-width: 980px) { .goal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .goal-grid { grid-template-columns: 1fr; } }

.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.review-card { background: #fff; border: 1px solid var(--a75-border); border-radius: 14px; padding: 1.5rem; }
.review-stars { color: #f5a623; letter-spacing: 2px; font-size: 1rem; }
.review-quote { margin: .85rem 0; font-size: .98rem; line-height: 1.5; }
.review-author { color: var(--a75-muted); font-size: .82rem; letter-spacing: .04em; }
.reviews-section { background: #fbf1ef; padding: 4rem 0; }
@media (max-width: 880px) { .reviews-grid { grid-template-columns: 1fr; } }

.product-card .ptag {
    display: inline-block;
    color: var(--a75-primary);
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}
.product-card .size-option-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.product-card .size-option-chip {
    padding: .25rem .6rem;
    border: 1px solid rgba(209,31,42,.35);
    color: var(--a75-primary);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
}
.product-card .size-option-chip.active { background: var(--a75-primary); color: #fff; }
.product-card .coa-link {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem .7rem;
    border: 1px solid var(--a75-border);
    border-radius: 8px;
    color: var(--a75-ink);
    font-size: .82rem;
    text-decoration: none;
    margin: .5rem 0;
}
.product-card .coa-link.coming-soon { color: var(--a75-muted); cursor: default; }
.buy-now-cta {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
    gap: .65rem;
    align-items: stretch;
    margin-top: .45rem;
}
.buy-now-qty {
    display: grid;
    grid-template-columns: 2.1rem minmax(2.2rem, 1fr) 2.1rem;
    align-items: stretch;
    min-height: 3.05rem;
    overflow: hidden;
    border: 1px solid var(--a75-border);
    border-radius: 18px;
    background: #fff;
}
.buy-now-qty button {
    border: 0;
    background: #fff;
    color: var(--a75-ink);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}
.buy-now-qty button:hover { background: var(--a75-surface); color: var(--a75-primary); }
.buy-now-qty input {
    width: 100%;
    min-width: 0;
    border: 0;
    padding: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    color: var(--a75-ink);
    appearance: textfield;
}
.buy-now-qty input::-webkit-outer-spin-button,
.buy-now-qty input::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}
.buy-now-button {
    width: 100%;
    min-width: 0;
    min-height: 3.05rem;
    justify-content: center;
    border-radius: 18px;
    font-weight: 800;
    white-space: nowrap;
}
.buy-now-cta-card { gap: .55rem; }
.buy-now-cta-card .buy-now-qty {
    grid-template-columns: 1.85rem minmax(1.8rem, 1fr) 1.85rem;
    min-height: 2.9rem;
    border-radius: 14px;
}
.buy-now-cta-card .buy-now-button {
    min-height: 2.9rem;
    border-radius: 14px;
    padding-inline: .55rem;
}

.site-footer { background: #fbf1ef; border-top: 1px solid var(--a75-border); padding: 3rem 0 1.5rem; margin-top: 4rem; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--a75-border);
}
.footer-brand .footer-logo { width: 140px; height: auto; margin-bottom: .85rem; }
.footer-brand .muted { font-size: .9rem; max-width: 28ch; }
.footer-social { margin-top: 1rem; }
.footer-social .social-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--a75-border);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--a75-ink);
}
.site-footer h4 { font-size: .78rem; letter-spacing: .14em; color: var(--a75-muted); margin-bottom: .75rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.site-footer ul a { color: var(--a75-ink); font-size: .9rem; text-decoration: none; }
.site-footer ul a:hover { color: var(--a75-primary); }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 0 .75rem; gap: 1rem;
    border-bottom: 1px solid var(--a75-border);
}
.footer-bottom a { color: var(--a75-ink); font-size: .85rem; margin-right: 1.25rem; text-decoration: none; }
.footer-bottom a:hover { color: var(--a75-primary); }
.footer-compliance {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 0 0; font-size: .78rem; color: var(--a75-muted);
    flex-wrap: wrap; gap: .75rem;
}
.footer-compliance-tag { color: var(--a75-primary); font-weight: 700; letter-spacing: .08em; }
@media (max-width: 880px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .footer-compliance { flex-direction: column; align-items: flex-start; }
}

.page-hero {
    background: linear-gradient(135deg, #1a0608 0%, #b81824 100%);
    color: #fff;
    padding: 3.5rem 0;
    margin-bottom: 0;
}
.page-hero h1 { font-size: clamp(2rem, 3.5vw, 3rem); margin: 0 0 .65rem; font-weight: 800; }
.page-hero p { opacity: .9; max-width: 60ch; }
.about-mission { padding: 4rem 0; }
.about-mission p { font-size: 1.05rem; line-height: 1.65; max-width: 68ch; }
.feature-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.feature-stat-card { background: #fff; border: 1px solid var(--a75-border); border-radius: 14px; padding: 1.5rem; text-align: center; }
.feature-stat-card .icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(209,31,42,.1);
    color: var(--a75-primary);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: .85rem;
    font-size: 1.2rem;
}
.feature-stat-card h3 { font-size: 1rem; margin: .25rem 0; }
.feature-stat-card .muted { font-size: .88rem; }
@media (max-width: 880px) { .feature-stat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .feature-stat-grid { grid-template-columns: 1fr; } }
.cta-band {
    background: linear-gradient(135deg, #4a0a0e 0%, #dc2626 100%);
    color: #fff;
    padding: 3rem 0;
    text-align: center;
}
.cta-band h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0 0 1rem; }
.cta-band .btn { background: #fff; color: #111; }

.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; }
.contact-info-card { background: var(--a75-surface); border-radius: 14px; padding: 1.75rem; }
.contact-info-card dl { display: grid; gap: 1rem; margin: 0; }
.contact-info-card dt { font-size: .78rem; letter-spacing: .12em; color: var(--a75-muted); text-transform: uppercase; }
.contact-info-card dd { margin: .15rem 0 0; font-weight: 600; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.blog-list { display: grid; gap: 1.25rem; }
.blog-row {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 1.5rem;
    background: #fff;
    border: 1px solid var(--a75-border);
    border-radius: 14px;
    padding: 1.25rem;
    align-items: center;
    transition: box-shadow .15s ease;
}
.blog-row:hover { box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.blog-row .blog-thumb {
    background: var(--a75-surface);
    border-radius: 10px;
    aspect-ratio: 16/10;
    display: flex; align-items: center; justify-content: center;
    color: var(--a75-muted);
    font-size: .8rem;
}
.blog-row .blog-category {
    display: inline-block;
    padding: .25rem .65rem;
    background: rgba(209,31,42,.1);
    color: var(--a75-primary);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.blog-row h3 { font-size: 1.15rem; margin: 0 0 .25rem; }
.blog-row .blog-meta { font-size: .82rem; color: var(--a75-muted); }
.blog-row .blog-cta { color: var(--a75-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 720px) {
    .blog-row { grid-template-columns: 1fr; }
    .blog-row .blog-thumb { aspect-ratio: 21/9; }
}

.cart-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; }
.cart-item {
    background: #fff;
    border: 1px solid var(--a75-border);
    border-radius: 14px;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 1.25rem;
    align-items: center;
}
.cart-item .cart-thumb { background: var(--a75-surface); border-radius: 10px; overflow: hidden; aspect-ratio: 1/1; }
.cart-item .cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item .cart-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.cart-summary-card {
    position: sticky;
    top: 100px;
    background: #fff;
    border: 1px solid var(--a75-border);
    border-radius: 14px;
    padding: 1.5rem;
    align-self: start;
}
.cart-summary-card .row { padding: .35rem 0; }
.promo-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin: .75rem 0; }
.promo-row input { padding: .55rem .65rem; border: 1px solid var(--a75-border); border-radius: 8px; }
.cart-promo-hint {
    margin: .85rem 0 .25rem;
    padding: .75rem .85rem;
    border: 1px solid rgba(220, 38, 38, .18);
    border-radius: 10px;
    background: var(--a75-primary-soft);
}
.cart-promo-hint strong {
    display: block;
    font-size: .9rem;
    line-height: 1.2;
}
.cart-promo-hint p {
    margin: .25rem 0 0;
    color: var(--a75-muted);
    font-size: .82rem;
    line-height: 1.35;
}
@media (max-width: 880px) {
    .cart-grid { grid-template-columns: 1fr; }
    .cart-summary-card { position: static; }
    .cart-item { grid-template-columns: 64px 1fr; }
    .cart-item .cart-actions { grid-column: 1 / -1; align-items: flex-start; }
}

.checkout-hero {
    background: linear-gradient(135deg, #1a0608 0%, #6a0c12 60%, #b81824 100%);
    color: #fff;
    padding: 3rem 0 2rem;
}
.checkout-hero h1 { font-size: 2.25rem; margin: 0 0 .35rem; font-weight: 800; }
.checkout-hero p { opacity: .85; margin: 0; }
/* Old chunky .checkout-stepper rules removed — replaced by the slim
   numbered stepper defined further down under the Checkout polish section. */
.checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; }
@media (max-width: 880px) { .checkout-grid { grid-template-columns: 1fr; } }
.you-are-paying { background: #fdecef; border: 1px solid rgba(176,0,32,.2); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.you-are-paying .eyebrow { font-size: .7rem; letter-spacing: .12em; font-weight: 700; color: var(--a75-muted); text-transform: uppercase; }
.you-are-paying h3 { font-size: 1.15rem; margin: .25rem 0 .35rem; }
.you-are-paying p { margin: 0; font-size: .88rem; color: var(--a75-muted); }
.payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin: 1rem 0; }
.payment-card {
    background: #fff;
    border: 2px solid var(--a75-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    text-align: left;
}
.payment-card:hover { border-color: rgba(209,31,42,.6); background: #fff8f8; }
.payment-card.selected { border-color: var(--a75-primary); background: #fff8f8; box-shadow: 0 0 0 3px rgba(209,31,42,.08); }
.payment-card .pm-icon { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .35rem; font-size: 1.05rem; }
.payment-card.pm-zelle .pm-icon { background: #efe6fc; color: #6f3fdf; }
.payment-card.pm-applepay .pm-icon { background: #e8f0fd; color: #1b1b1f; }
.payment-card.pm-venmo .pm-icon { background: #e8efff; color: #3d95ce; }
.payment-card.pm-cashapp .pm-icon { background: #e6f7ec; color: #00c244; }
.payment-card .pm-name { font-weight: 700; }
.payment-card .pm-handle { font-size: .82rem; color: var(--a75-muted); display: block; margin-top: .15rem; }
.warning-band {
    background: #fdf2c4;
    border: 1px solid #f0d875;
    border-radius: 10px;
    padding: .85rem 1rem;
    font-weight: 700;
    color: #5d4500;
    font-size: .82rem;
    letter-spacing: .04em;
    text-align: center;
    margin: 1.5rem 0 1.25rem;
}
.warning-band.danger { background: #fff; border-color: var(--a75-primary); color: var(--a75-primary); }
.send-payment-panel { background: #ecfbf2; border: 1px solid #b6e6c8; border-radius: 14px; padding: 1.5rem; margin-top: 1.25rem; }
.send-payment-panel h3 { margin: 0 0 .85rem; display: flex; align-items: center; gap: .5rem; }
.verify-card { background: #fdf2c4; border: 1px solid #f0d875; border-radius: 10px; padding: 1rem 1.15rem; margin-top: 1rem; }
.verify-card .v-title { font-weight: 700; color: #5d4500; margin-bottom: .65rem; }
.verify-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.verify-card code { background: #fff; padding: .15rem .4rem; border-radius: 4px; border: 1px solid #f0d875; font-size: .85rem; }
.amount-due { text-align: center; background: #fff; border: 1px solid var(--a75-border); border-radius: 14px; padding: 1.25rem; margin: 1.25rem 0; }
.amount-due .label { color: var(--a75-muted); font-size: .75rem; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; }
.amount-due .value { color: #138a36; font-size: 2.25rem; font-weight: 800; margin-top: .25rem; }
.summary-card { position: sticky; top: 100px; background: #fff; border: 1px solid var(--a75-border); border-radius: 14px; padding: 1.5rem; align-self: start; }
.summary-card h3 { margin: 0 0 1rem; }
.summary-ship-soon { background: rgba(19,138,54,.08); color: #0d6b2a; border-radius: 8px; padding: .5rem .75rem; font-size: .82rem; font-weight: 600; text-align: center; margin-bottom: 1rem; }
.summary-card .line { display: flex; justify-content: space-between; padding: .35rem 0; }
.summary-card .total { font-size: 1.25rem; font-weight: 800; padding-top: .75rem; border-top: 1px solid var(--a75-border); margin-top: .25rem; }
.summary-card .ship-to { margin-top: 1rem; font-size: .88rem; }
.summary-card .ship-to .label { font-size: .72rem; letter-spacing: .1em; color: var(--a75-muted); text-transform: uppercase; }
.secure-badge { display: flex; justify-content: center; align-items: center; gap: .35rem; margin-top: 1rem; font-size: .82rem; color: var(--a75-muted); }
.complete-order-btn {
    width: 100%;
    padding: 1rem;
    background: #138a36;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1rem;
    transition: background .15s ease;
}
.complete-order-btn:hover { background: #0d6b2a; }

/* Product detail page - live AOD layout */
.product-detail-page { padding-top: 1.5rem; }
.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    margin-top: 1rem;
}
.product-detail-image {
    background: var(--a75-surface, #fafafa);
    border: 1px solid var(--a75-border, #e7e5e4);
    border-radius: 1rem;             /* 16px = rounded-2xl per V3 */
    padding: 2.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.product-detail-image img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.product-detail-info { gap: 1rem; }
.ptag-pill {
    display: inline-block;
    background: rgba(209,31,42,.1);
    color: var(--a75-primary);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .14em;
    padding: .35rem .75rem;
    border-radius: 999px;
    text-transform: uppercase;
    width: max-content;
}
.product-detail-name {
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
}
.product-detail-desc { font-size: 1.02rem; line-height: 1.55; }
.product-detail-price { display: flex; align-items: baseline; gap: .75rem; margin: .5rem 0; }
.product-detail-price .value { color: var(--a75-primary); font-size: 2.6rem; font-weight: 800; line-height: 1; }
.product-detail-price .unit { font-size: .9rem; }
.product-detail-sizes .label {
    font-size: .78rem;
    letter-spacing: .14em;
    font-weight: 700;
    color: var(--a75-muted);
    margin-bottom: .5rem;
}
.size-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.size-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    border: 2px solid var(--a75-border);
    border-radius: 10px;
    background: #fff;
    color: var(--a75-ink);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.size-chip:hover { border-color: rgba(209,31,42,.5); }
.size-chip.selected { border-color: var(--a75-primary); background: var(--a75-primary); color: #fff; }
.size-chip .sz { font-weight: 700; }
.size-chip .pr { opacity: .85; }
.buy-now-cta-detail {
    grid-template-columns: minmax(8rem, .75fr) minmax(12rem, 1fr);
    margin-top: .5rem;
}
.buy-now-cta-detail .buy-now-qty,
.buy-now-cta-detail .buy-now-button {
    min-height: 3.6rem;
}
.trust-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .75rem;
    margin-top: 1rem;
}
.trust-pill {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #fff;
    border: 1px solid var(--a75-border);
    border-radius: 12px;
    padding: .85rem .95rem;
}
.trust-pill .dot {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(209,31,42,.1);
    color: var(--a75-primary);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.trust-pill strong { display: block; font-size: .92rem; line-height: 1.1; }
.trust-pill .muted { display: block; font-size: .72rem; }
.research-disclaimer {
    background: #fdecef;
    border: 1px solid rgba(176,0,32,.15);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    font-size: .92rem;
    line-height: 1.5;
    margin-top: .5rem;
}
.research-disclaimer strong { color: var(--a75-ink); }
@media (max-width: 880px) {
    .product-detail-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .product-detail-image { padding: 2rem 1rem; }
    .trust-row { grid-template-columns: 1fr; }
}

/* Related products section */
.related-section { margin-top: 4rem; }
.related-heading {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: 1.5rem;
}

/* Peptide card style (matches live YOU MAY ALSO LIKE) */
.peptide-card {
    background: #fff;
    border: 1px solid var(--a75-border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, transform .15s ease;
}
.product-card[data-clickable-card="1"] { cursor: pointer; }
.product-card[data-clickable-card="1"] a,
.product-card[data-clickable-card="1"] button { cursor: pointer; }
.product-card[data-clickable-card="1"] input { cursor: text; }
.peptide-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.07); transform: translateY(-2px); }
.peptide-card .img-wrap {
    background: var(--a75-surface);
    padding: 1.5rem;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.peptide-card .img-wrap img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.peptide-card .body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.peptide-card .card-name { font-size: 1.05rem; font-weight: 800; margin: 0; }
.peptide-card .card-name a { color: var(--a75-ink); text-decoration: none; }
.peptide-card .card-name a:hover { color: var(--a75-primary); }
.peptide-card .card-desc { font-size: .85rem; line-height: 1.4; margin: 0; flex-grow: 1; min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.peptide-card .price-row { display: flex; align-items: baseline; gap: .5rem; }
.peptide-card .price-row .price { color: var(--a75-primary); font-size: 1.5rem; font-weight: 800; }
.peptide-card .buy-now-button { padding: .55rem .75rem; font-size: .9rem; font-weight: 800; }

/* Product flag badges (Lovable handoff: featured / staff_pick / new_arrival / trending) */
.peptide-card { position: relative; }
.flag-badge-stack {
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: flex-start;
}
.flag-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .6rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 999px;
    color: #fff;
}
.flag-badge.trending { background: linear-gradient(135deg, #f97316 0%, #dc2626 100%); }
.flag-badge.staff-pick { background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%); color: #4b2c00; }
.flag-badge.featured { background: var(--a75-primary); }
.flag-badge.new { background: #16a34a; }
.flag-badge.limited { background: #6b7280; }

/* Goal tag chip below product description */
.peptide-card .goal-tag {
    display: inline-flex;
    align-items: center;
    padding: .22rem .65rem;
    background: #f5f3f2;
    color: #1a1d2e;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    width: max-content;
}

/* Prototype-simple hero (single column, no image, no stats) */
.hero.hero-simple { padding: 4.5rem 0; }
.hero.hero-simple .container { display: block; }
.hero.hero-simple h1 { max-width: 18ch; }
.hero.hero-simple p { max-width: 58ch; }

/* /gate full-page age verification */
.gate-body {
    margin: 0;
    min-height: 100vh;
    background: rgba(15, 8, 8, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--a75-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    color: var(--a75-ink, #111111);
    position: relative;
}
.gate-backdrop {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, #2a0509, #0a0203 70%);
    z-index: 0;
}
.gate-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
}
.gate-card {
    background: #fff;
    width: 100%;
    max-width: 520px;
    border-radius: 18px;
    padding: 2.5rem 2rem 1.75rem;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.gate-eyebrow {
    color: var(--a75-primary, #dc2626);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    margin-bottom: 1rem;
}
.gate-heading {
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 800;
    margin: 0 0 0.85rem;
    letter-spacing: -0.01em;
}
.gate-lead { color: #4a4a4a; margin: 0 0 1.5rem; line-height: 1.5; }
.gate-error { color: #b00020; font-weight: 600; margin: 0 0 1rem; }
.gate-actions { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.5rem; }
.gate-btn {
    display: block;
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease, background 0.15s ease;
}
.gate-btn-primary { background: var(--a75-primary, #dc2626); color: #fff; }
.gate-btn-primary:hover { filter: brightness(0.92); }
.gate-btn-exit { background: #fdecef; color: var(--a75-ink, #111); border-color: rgba(176, 0, 32, 0.15); }
.gate-btn-exit:hover { background: #fbdde2; }
.gate-fineprint { color: var(--a75-muted, #6b6b6b); font-size: 0.82rem; line-height: 1.5; margin: 0; }
.gate-fineprint a { color: inherit; text-decoration: underline; }

/* Live-chat placeholder bubble */
.chat-bubble {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 60;
    font-family: var(--a75-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}
.chat-bubble-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--a75-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.chat-bubble-toggle:hover { transform: translateY(-2px); }
.chat-bubble-panel {
    position: absolute;
    right: 0;
    bottom: 72px;
    width: 300px;
    max-width: calc(100vw - 2rem);
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--a75-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    padding: 1.1rem;
    display: none;
    font-size: 0.9rem;
    line-height: 1.45;
}
.chat-bubble[data-open="1"] .chat-bubble-panel { display: block; }
.chat-bubble-panel h4 {
    font-size: 0.92rem;
    margin: 0 0 0.45rem;
    color: var(--a75-ink);
}
.chat-bubble-panel p { color: var(--a75-muted); margin: 0 0 0.6rem; }
.chat-bubble-panel a { color: var(--a75-primary); font-weight: 600; }
.chat-bubble-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--a75-muted);
    margin-top: 0.35rem;
}
.chat-bubble-status .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #138a36;
}

/* Shop catalog tabs and grid */
.shop-goals {
    margin: 1rem 0 1.25rem;
    padding: 1.15rem;
    border: 1px solid var(--a75-border);
    border-radius: 16px;
    background: #fff;
}
.shop-goals .section-heading {
    margin: .25rem 0 0;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}
.shop-goal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.shop-goal-grid .goal-card { padding: 1rem; }
.shop-goal-grid .goal-card .goal-icon { width: 34px; height: 34px; margin-bottom: .75rem; }
.shop-goal-grid .goal-card h3 { font-size: 1rem; }
.shop-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.25rem 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--a75-border);
}
.shop-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border: 1px solid var(--a75-border);
    background: #fff;
    color: var(--a75-ink);
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    font-size: .9rem;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.shop-tab:hover { border-color: var(--a75-primary); color: var(--a75-primary); }
.shop-tab.active { background: var(--a75-primary); color: #fff; border-color: var(--a75-primary); }
.shop-tab .count {
    display: inline-block;
    background: rgba(0,0,0,.08);
    color: inherit;
    border-radius: 999px;
    padding: 0 .55rem;
    font-size: .7rem;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}
.shop-tab.active .count { background: rgba(255,255,255,.25); }
.shop-search { display: flex; gap: .5rem; max-width: 540px; margin: .5rem 0 1rem; }
.shop-search input {
    flex: 1;
    padding: .65rem .85rem;
    border: 1px solid var(--a75-border);
    border-radius: 10px;
    font-size: .95rem;
}
.shop-search .btn { padding: .65rem 1.25rem; }
.shop-result-meta { margin: .5rem 0 1.25rem; }
.shop-grid { gap: 1.25rem; }

/* Age-gate modal refinements */
.age-gate-modal { max-width: 480px; text-align: left; }
.age-gate-modal h2 { font-size: 1.5rem; margin: 0 0 .65rem; }
.age-gate-modal .checks { margin: 1rem 0; }
.age-gate-modal .checks label { display: block; padding: .35rem 0; }
.age-gate-modal .actions { justify-content: center; margin-top: 1rem; }
.age-gate-modal .actions .btn { padding: .85rem 1.5rem; min-width: 200px; font-weight: 700; }
.age-gate-foot { font-size: .8rem; margin-top: 1rem; color: var(--a75-muted); text-align: center; }
.modal-backdrop[data-age-gate] { backdrop-filter: blur(4px); }
.modal-backdrop[data-age-gate] .modal { animation: ag-pop .25s ease-out; }
@keyframes ag-pop { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Promotional popup banner shown after the age gate.
   z-index sits above the sticky storefront header and mobile drawer backdrop. */
.promo-banner-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2300;
    display: grid;
    place-items: center;
    padding: clamp(14px, 3vw, 36px);
    background: rgba(10, 10, 12, .72);
    backdrop-filter: blur(7px);
}

.promo-banner-dialog {
    position: relative;
    width: min(960px, 94vw);
    max-height: 88vh;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .35);
    overflow: hidden;
    animation: ag-pop .22s ease-out;
}

.promo-banner-media,
.promo-banner-link {
    display: block;
    line-height: 0;
}

.promo-banner-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 88vh;
    object-fit: contain;
    background: #fff;
}

.promo-banner-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: #151515;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.promo-banner-close:hover,
.promo-banner-close:focus-visible {
    outline: none;
    border-color: var(--a75-primary, #dc2626);
    color: var(--a75-primary, #dc2626);
}

@media (max-width: 640px) {
    .promo-banner-backdrop { padding: 10px; align-items: center; }
    .promo-banner-dialog { width: min(96vw, 560px); max-height: 82vh; }
    .promo-banner-media img { max-height: 82vh; }
    .promo-banner-close { top: 8px; right: 8px; width: 34px; height: 34px; font-size: 1.45rem; }
}

/* ==================================================
 * Customer account dashboard (profile + /account/*)
 * ================================================== */
.account-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-top: 1rem;
}
.account-sidebar {
    background: var(--a75-surface, #fff);
    border: 1px solid var(--a75-border, #e5e7eb);
    border-radius: 12px;
    padding: .5rem;
    position: sticky;
    top: 1rem;
}
.account-sidebar nav ul { list-style: none; margin: 0; padding: 0; }
.account-sidebar nav li { margin: 0; }
.account-sidebar-link {
    display: block;
    padding: .65rem .85rem;
    border-radius: 8px;
    color: var(--a75-ink, #111);
    text-decoration: none;
    font-size: .95rem;
    transition: background-color .15s ease, color .15s ease;
}
.account-sidebar-link:hover {
    background: var(--a75-secondary-soft, #f3f4f6);
}
.account-sidebar-link.is-active {
    background: var(--a75-primary, #dc2626);
    color: var(--a75-primary-contrast, #fff);
    font-weight: 600;
}
.account-sidebar-link-muted { color: var(--a75-muted, #6b7280); }
.account-sidebar-divider {
    height: 1px;
    background: var(--a75-border, #e5e7eb);
    margin: .5rem 0;
}
.account-main { min-width: 0; }
.address-card { height: 100%; }

/* Step indicator for wholesale application status */
.account-steps {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    counter-reset: account-step;
}
.account-step {
    flex: 1 1 0;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem;
    background: var(--a75-secondary-soft, #f3f4f6);
    border: 1px solid var(--a75-border, #e5e7eb);
    border-radius: 10px;
    color: var(--a75-muted, #6b7280);
}
.account-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--a75-border, #e5e7eb);
    color: var(--a75-ink, #111);
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
}
.account-step-label { font-weight: 600; }
.account-step.is-current {
    background: rgba(220, 38, 38, .08);
    border-color: var(--a75-primary, #dc2626);
    color: var(--a75-ink, #111);
}
.account-step.is-current .account-step-dot {
    background: var(--a75-primary, #dc2626);
    color: var(--a75-primary-contrast, #fff);
}
.account-step.is-complete {
    background: rgba(34, 197, 94, .08);
    border-color: rgba(34, 197, 94, .35);
    color: var(--a75-ink, #111);
}
.account-step.is-complete .account-step-dot {
    background: #22c55e;
    color: #fff;
}

@media (max-width: 768px) {
    .account-grid { grid-template-columns: 1fr; }
    .account-sidebar { position: static; }
    .account-steps { flex-direction: column; }
    .account-step { width: 100%; }
}

/* ==================================================
 * Research stacks (bundles) + Top Sellers surfaces
 * ==================================================
 * Why: /stacks list + /stacks/view detail page need stack-specific
 * card chrome and a sticky pricing aside. Reuses .peptide-card,
 * .grid grid-*, .price-row everywhere possible to minimize churn.
 */
.stack-list { gap: 1.5rem; }
.stack-card {
    background: #fff;
    border: 1px solid var(--a75-border);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.25rem;
    display: flex; flex-direction: column;
}
.stack-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.stack-card-eyebrow {
    font-size: .7rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--a75-muted);
}
.savings-pill {
    display: inline-flex; align-items: center;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(34,139,34,.12);
    color: #1f8b1f;
    font-size: .75rem; font-weight: 700;
    border: 1px solid rgba(34,139,34,.25);
}
.stack-card-name { margin: .25rem 0 .35rem; font-size: 1.25rem; font-weight: 800; }
.stack-card-desc { margin: 0 0 1rem; font-size: .95rem; }
.stack-card-included { margin-bottom: 1rem; }
.stack-card-included .label { font-size: .8rem; font-weight: 700; color: var(--a75-muted); text-transform: uppercase; letter-spacing: .06em; }
.stack-card-inclusions { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .9rem; line-height: 1.6; }
.stack-card-pricing { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1rem; padding-top: .75rem; border-top: 1px solid var(--a75-border); }
.stack-card-pricing .msrp { font-size: .85rem; color: var(--a75-muted); }
.stack-card-pricing .bundle-price { font-size: 1.5rem; font-weight: 800; color: var(--a75-primary); }

.stack-detail-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    align-items: start;
}
.stack-detail-items { display: flex; flex-direction: column; gap: 1rem; }
.stack-included-card { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; padding: 1rem; }
.stack-included-card .img-wrap { width: 100%; height: 100%; min-height: 100px; }
.stack-included-card .body { padding: 0; }
.stack-pricing-card {
    background: #fff;
    border: 1px solid var(--a75-border);
    border-radius: 14px;
    padding: 1.5rem;
    position: sticky;
    top: 6rem;
}
.stack-pricing-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--a75-muted); margin: 0 0 .75rem; }
.stack-pricing-row { display: flex; align-items: center; justify-content: space-between; padding: .35rem 0; font-size: .95rem; }
.stack-discount-amount { color: #1f8b1f; font-weight: 600; }
.stack-pricing-total {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--a75-border);
    font-size: 1rem; font-weight: 600;
}
.stack-pricing-total .bundle-price { font-size: 1.85rem; font-weight: 800; color: var(--a75-primary); }
.stack-pricing-savings { font-size: .8rem; font-weight: 700; color: #1f8b1f; text-align: right; margin-top: .25rem; }

@media (max-width: 900px) {
    .stack-detail-grid { grid-template-columns: 1fr; }
    .stack-pricing-card { position: static; }
}

/* Stack detail visual parity: live/V3 uses compact bundle rows rather
   than full product cards on stack pages. Keep the data/cart behavior
   unchanged and scope all changes to this public detail surface. */
.stack-detail-back {
    padding-top: 1rem;
    padding-bottom: .25rem;
}
.stack-detail-back a {
    color: var(--a75-muted, #737373);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}
.stack-detail-back a:hover { color: var(--a75-primary, #dc2626); }
.stack-detail-hero {
    padding: 3.5rem 0 3rem;
}
.stack-detail-eyebrow {
    display: inline-block;
    padding: .25rem .75rem;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}
.stack-included-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e7e5e4;
    border-radius: .75rem;
}
.stack-included-image {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    border-radius: .625rem;
    background: #f5f5f4;
}
.stack-included-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.stack-included-copy {
    min-width: 0;
    flex: 1 1 auto;
}
.stack-included-copy h3 {
    margin: 0 0 .25rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}
.stack-included-copy h3 a {
    color: var(--a75-ink, #18181b);
    text-decoration: none;
}
.stack-included-copy h3 a:hover { color: var(--a75-primary, #dc2626); }
.stack-included-copy p {
    margin: 0;
    color: var(--a75-muted, #737373);
    font-size: .875rem;
    line-height: 1.45;
}
.stack-included-price {
    flex: 0 0 auto;
    color: var(--a75-primary, #dc2626);
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 1023.98px) {
    .stack-detail-grid { grid-template-columns: 1fr; }
    .stack-pricing-card { position: static; }
}
@media (max-width: 520px) {
    .stack-included-row {
        align-items: flex-start;
        gap: .75rem;
    }
    .stack-included-image {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }
    .stack-included-price {
        font-size: .95rem;
    }
}

/* ==================================================
   Visual parity pass 2026-05-29 (live diff)
   ================================================== */

/* Header brand: drop wordmark; logo carries the brand on its own.
   The logo image already contains "XO LABS / USA / PREMIUM PEPTIDES" so
   adding a wordmark next to it duplicated the brand name. Match live. */
.site-header .brand { display: inline-flex; align-items: center; }
/* Old fixed-size brand-logo override removed; sizing handled by the
   height-anchored responsive rule + media queries earlier in this file. */

/* Hero chip pill: small blue dot before the text instead of sparkle emoji,
   matching live's `Premium Research Compounds` chip. */
.hero .chip-pill-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4a8cff;
    flex-shrink: 0;
}

/* Account dashboard layout (paired with .account-sidebar SP-AGENT-A shipped).
   Two-column grid with sidebar on the left and main content on the right. */
.account-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2rem;
    align-items: start;
}
.account-sidebar {
    background: #fff;
    border: 1px solid var(--a75-border);
    border-radius: 14px;
    padding: 1rem .75rem;
    position: sticky;
    top: 100px;
}
.account-sidebar nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.account-sidebar-divider { height: 1px; background: var(--a75-border); margin: .5rem 0; }
.account-sidebar-link {
    display: block;
    padding: .55rem .75rem;
    border-radius: 8px;
    color: var(--a75-ink);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}
.account-sidebar-link:hover { background: rgba(209,31,42,.06); color: var(--a75-primary); }
.account-sidebar-link.is-active { background: var(--a75-primary); color: #fff; }
.account-sidebar-link-muted { color: var(--a75-muted); }
.account-main { min-width: 0; }
@media (max-width: 880px) {
    .account-grid { grid-template-columns: 1fr; }
    .account-sidebar { position: static; }
}

/* ==================================================
   Admin sidebar + Lovable admin controls
   ================================================== */
.admin-shell {
    width: min(100%, var(--a75-content-max-width));
    margin: 0 auto;
    padding: 2rem 1.25rem 0;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.admin-sidebar {
    position: sticky;
    top: 92px;
    min-height: calc(100vh - 112px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--a75-border);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 12px 32px rgba(17,17,17,.06);
}
.admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .3rem .25rem 1rem;
    border-bottom: 1px solid var(--a75-border);
    margin-bottom: .75rem;
}
.admin-sidebar-mark {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--a75-primary), #111);
    color: #fff;
    font-weight: 800;
    font-size: .78rem;
}
.admin-sidebar-eyebrow {
    color: var(--a75-muted);
    font-size: .68rem;
    letter-spacing: .14em;
    font-weight: 800;
}
.admin-sidebar-nav {
    display: grid;
    gap: .2rem;
}
.admin-sidebar a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .58rem .7rem;
    border-radius: 9px;
    color: var(--a75-ink);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
}
.admin-sidebar a:hover {
    background: rgba(220,38,38,.06);
    color: var(--a75-primary);
}
.admin-sidebar a.is-active {
    background: var(--a75-primary);
    color: #fff;
}
.admin-sidebar-icon {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(17,17,17,.06);
    color: inherit;
    font-size: .72rem;
    font-weight: 900;
}
.admin-sidebar a.is-active .admin-sidebar-icon {
    background: rgba(255,255,255,.22);
}
.admin-sidebar-child-nav {
    display: grid;
    gap: .14rem;
    margin: .05rem 0 .35rem 2.05rem;
    padding-left: .55rem;
    border-left: 1px solid var(--a75-border);
}
.admin-sidebar .admin-sidebar-child-link {
    gap: .45rem;
    padding: .36rem .55rem;
    border-radius: 8px;
    color: var(--a75-muted);
    font-size: .8rem;
    font-weight: 700;
}
.admin-sidebar .admin-sidebar-child-link:hover {
    background: rgba(220,38,38,.06);
    color: var(--a75-primary);
}
.admin-sidebar .admin-sidebar-child-link.is-active {
    background: rgba(220,38,38,.10);
    color: var(--a75-primary);
}
.admin-sidebar-child-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: .5;
    flex: 0 0 auto;
}
.admin-sidebar-child-link.is-active .admin-sidebar-child-dot {
    opacity: 1;
}
.admin-sidebar-bottom {
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid var(--a75-border);
}
.admin-sidebar-mobile {
    display: none;
}
.admin-main {
    min-width: 0;
}
.admin-main > .container.section {
    width: 100%;
    max-width: none;
    padding: 0;
}
.admin-two-column {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.15fr);
    gap: 1rem;
    align-items: start;
}
.admin-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .55rem .85rem;
}
.admin-sort-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 120px;
    gap: .8rem;
    align-items: end;
    padding: .75rem 0;
    border-bottom: 1px solid var(--a75-border);
}
.admin-sort-row:last-child { border-bottom: 0; }
.admin-orders-page {
    max-width: 1320px;
}
.admin-orders-head {
    display: grid;
    gap: .75rem;
    margin-bottom: 1rem;
}
.admin-orders-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}
.admin-orders-head h1 {
    margin: .15rem 0 .35rem;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: .95;
    letter-spacing: 0;
}

.admin-orders-metric-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}
.admin-orders-metric-card {
    display: grid;
    gap: .3rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
}
.admin-orders-metric-card strong {
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    line-height: 1;
}
@media (max-width: 560px) {
    .admin-orders-metric-strip { grid-template-columns: 1fr; }
}
.admin-pin-dialog {
    width: min(92vw, 520px);
    max-height: min(86vh, 620px);
    margin: auto;
    padding: 0;
    overflow: auto;
    color: var(--a75-ink);
    background: var(--a75-surface);
    border: 1px solid var(--a75-border);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(17, 17, 17, .28);
}
.admin-pin-dialog::backdrop {
    background: rgba(17, 17, 17, .66);
    backdrop-filter: blur(3px);
}
body.is-admin-pin-open { overflow: hidden; }
.admin-pin-dialog > form { padding: 1.25rem; }
.admin-pin-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.admin-pin-dialog-head h2 { margin: .1rem 0 0; }
.admin-pin-dialog-head .a75-eyebrow { margin: 0; }
.admin-pin-field { gap: .4rem; font-weight: 700; }
.admin-pin-field input {
    width: 100%;
    min-height: 48px;
    font-size: 1.1rem;
    letter-spacing: .16em;
}
.admin-pin-dialog-actions {
    justify-content: flex-end;
    gap: .5rem;
}
.admin-order-detail-status {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}
.admin-ship-days {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 999px;
    color: #fff;
    background: #15803d;
    border: 2px solid #15803d;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1;
}
.admin-ship-days.is-waiting {
    color: #92400e;
    background: transparent;
    border-color: #d97706;
}
.admin-ship-days.is-legacy {
    color: var(--a75-muted);
    background: var(--a75-surface-soft, #f5f5f4);
    border-color: var(--a75-border);
}
.admin-ship-days-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin: -.35rem 0 1rem;
    font-size: .78rem;
}
.admin-ship-days-legend .admin-ship-days {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    font-size: .68rem;
}
@media (max-width: 560px) {
    .admin-pin-dialog { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
    .admin-pin-dialog > form { padding: 1rem; }
    .admin-pin-dialog-actions { display: grid; grid-template-columns: 1fr; }
    .admin-pin-dialog-actions .btn { width: 100%; min-height: 44px; }
}
.admin-order-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem;
}
.admin-orders-grid {
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
    gap: 1rem;
    align-items: start;
}
.admin-order-list,
.admin-order-detail {
    border-radius: 14px;
}
.admin-order-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    margin-bottom: .75rem;
}
.admin-order-search input {
    min-height: 42px;
    width: 100%;
    border: 1px solid var(--a75-border);
    border-radius: 10px;
    padding: .55rem .7rem;
}
.admin-order-list-rows {
    display: grid;
    gap: .35rem;
}
.admin-order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: center;
    padding: .8rem;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--a75-ink);
    text-decoration: none;
}
.admin-order-row:hover {
    background: rgba(220,38,38,.04);
    border-color: rgba(220,38,38,.14);
}
/* Status highlight (owner colour scheme): cancelled=light red, paid=yellow,
   delivered/tracking-entered=green, unpaid=white. Two-class selectors so these
   win over the generic :hover tint; the is-active ring layers on top. */
.admin-order-row--unpaid { background: #fff; }
.admin-order-row--cancelled { background: #fde2e2; border-color: rgba(220,38,38,.28); }
.admin-order-row--cancelled:hover { background: #fbd5d5; border-color: rgba(220,38,38,.40); }
.admin-order-row--paid { background: #fdf3c4; border-color: rgba(202,138,4,.38); }
.admin-order-row--paid:hover { background: #fbecac; border-color: rgba(202,138,4,.52); }
.admin-order-row--delivered { background: #dcf5e3; border-color: rgba(22,163,74,.34); }
.admin-order-row--delivered:hover { background: #c9efd4; border-color: rgba(22,163,74,.48); }
.admin-order-row.is-active {
    border-color: var(--a75-primary);
    box-shadow: inset 0 0 0 2px var(--a75-primary);
}
.admin-order-row strong,
.admin-order-row small {
    display: block;
}
.admin-order-row small {
    margin-top: .1rem;
    font-size: .82rem;
}
.admin-order-row-meta {
    display: grid;
    justify-items: end;
    gap: .35rem;
    white-space: nowrap;
}
.admin-order-detail {
    display: grid;
    gap: 1rem;
}
.admin-order-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.admin-order-detail-head h2 {
    margin: .15rem 0 .2rem;
    font-size: clamp(1.55rem, 3vw, 2.4rem);
    letter-spacing: 0;
}
.order-status-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .45rem;
    margin: .25rem 0;
    padding: 0;
}
.order-status-step {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 78px;
    padding: .55rem .35rem;
    border: 1px solid var(--a75-border);
    border-radius: 12px;
    background: #fff;
    color: var(--a75-muted);
    text-align: center;
    font-size: .78rem;
    font-weight: 800;
}
.order-status-dot {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--a75-surface-2);
    color: var(--a75-ink);
    font-weight: 900;
}
.order-status-step.is-complete {
    border-color: rgba(19,138,54,.24);
    background: var(--a75-success-soft);
    color: var(--a75-success);
}
.order-status-step.is-complete .order-status-dot {
    background: var(--a75-success);
    color: #fff;
}
.order-status-step.is-current {
    border-color: rgba(220,38,38,.34);
    background: #fff1f2;
    color: var(--a75-primary-dark);
}
.order-status-step.is-current .order-status-dot {
    background: var(--a75-primary);
    color: #fff;
}
.admin-order-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.admin-detail-label {
    display: block;
    margin-bottom: .35rem;
    color: var(--a75-muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.admin-order-items {
    display: grid;
    gap: .5rem;
}
.admin-order-item-row,
.admin-order-totals div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.admin-order-item-row {
    padding: .75rem;
    border: 1px solid var(--a75-border);
    border-radius: 12px;
    background: #fff;
}
.admin-order-item-row small {
    display: block;
    margin-top: .15rem;
}
.admin-order-totals {
    display: grid;
    gap: .35rem;
    padding-top: .75rem;
    border-top: 1px solid var(--a75-border);
}
.admin-order-totals div:last-child {
    font-size: 1.12rem;
    color: var(--a75-primary);
}
.admin-order-manage-form {
    min-width: 0;
}
.admin-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.admin-stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.admin-stack-card {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-height: 100%;
    padding: 1rem;
    border: 1px solid var(--a75-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(17,17,17,.05);
}
.admin-stack-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.admin-stack-card h2 {
    margin: 0;
    font-size: 1.2rem;
}
.admin-stack-card p {
    min-height: 3.2em;
    margin: 0;
}
.admin-stack-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}
.admin-stack-meta span {
    min-width: 0;
    padding: .55rem;
    border: 1px solid var(--a75-border);
    border-radius: 10px;
    background: var(--a75-surface);
    font-size: .82rem;
}
.admin-stack-meta strong,
.admin-stack-meta code {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-stack-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: auto;
}
.seo-admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem;
}
.seo-admin-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .5rem .85rem;
    border: 1px solid var(--a75-border);
    border-radius: 999px;
    background: #fff;
    color: var(--a75-ink);
    font-weight: 750;
    font-size: .88rem;
}
.seo-admin-tabs a.active,
.seo-admin-tabs a:hover {
    border-color: var(--a75-primary);
    background: var(--a75-primary);
    color: #fff;
}
.seo-sitemap-card {
    margin-top: 1rem;
}
.seo-url-list {
    display: grid;
    gap: .35rem;
    max-height: 260px;
    overflow: auto;
}
.seo-url-list code {
    display: block;
    padding: .45rem .55rem;
    border: 1px solid var(--a75-border);
    border-radius: 8px;
    background: var(--a75-surface);
    white-space: normal;
    overflow-wrap: anywhere;
}
.seo-robots-preview {
    min-height: 160px;
    margin: 0;
    padding: .8rem;
    border: 1px solid var(--a75-border);
    border-radius: 10px;
    background: #111;
    color: #fff;
    overflow: auto;
}
@media (max-width: 980px) {
    .admin-shell { grid-template-columns: 1fr; padding-top: 1.25rem; }
    /* Live demo collapses the desktop sidebar entirely below desktop and shows
       a compact horizontal admin chip row instead of a giant full-width card. */
    .admin-sidebar { display: none; }
    .admin-sidebar-mobile {
        display: flex;
        gap: .5rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        contain: inline-size;
        padding: .25rem .1rem .6rem;
        margin-bottom: .25rem;
        scrollbar-width: thin;
    }
    .admin-sidebar-mobile::-webkit-scrollbar { height: 6px; }
    .admin-sidebar-mobile-pill {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        flex: 0 0 auto;
        padding: .45rem .7rem;
        border-radius: 999px;
        border: 1px solid var(--a75-border);
        background: #fff;
        color: var(--a75-ink);
        font-weight: 700;
        font-size: .82rem;
        white-space: nowrap;
        text-decoration: none;
    }
    .admin-sidebar-mobile-pill svg { width: 15px; height: 15px; }
    .admin-sidebar-mobile-child {
        padding-left: .6rem;
        font-size: .78rem;
    }
    .admin-sidebar-mobile-pill.is-active {
        background: var(--a75-primary);
        border-color: var(--a75-primary);
        color: #fff;
    }
    .admin-two-column { grid-template-columns: 1fr; }
    .admin-orders-grid { grid-template-columns: 1fr; }
    .order-status-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .admin-orders-head-row,
    .admin-order-detail-head,
    .admin-order-detail-grid {
        display: grid;
        grid-template-columns: 1fr;
    }
    .admin-order-search,
    .admin-order-row {
        grid-template-columns: 1fr;
    }
    .admin-order-row-meta {
        justify-items: start;
    }
    .order-status-steps {
        grid-template-columns: 1fr;
    }
    .admin-stack-meta {
        grid-template-columns: 1fr;
    }
}

/* Shop page hero + info strip + product stacks rail (live parity 2026-05-29) */
.shop-hero { padding: 4rem 0 3rem; background: linear-gradient(120deg, #1a0608 0%, #4a0a0e 35%, #b81824 80%, #d11f2a 100%); color: #fff; }
.shop-hero .chip-pill { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.chip-pill-caps { letter-spacing: .14em; font-weight: 700; font-size: .72rem; }
.shop-hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 1rem 0 1rem;
    text-transform: uppercase;
}
.shop-hero p { max-width: 56ch; opacity: .92; font-size: 1.05rem; }
.shop-hero-stats { display: grid; grid-template-columns: repeat(3, max-content); gap: 2.5rem; margin-top: 1.75rem; }
.shop-hero-stats .stat .v { font-size: 1.85rem; font-weight: 800; }
.shop-hero-stats .stat .l { font-size: .72rem; letter-spacing: .14em; opacity: .8; margin-top: .15rem; text-transform: uppercase; }

.shop-info-strip { background: #fbf1ef; padding: .85rem 0; border-bottom: 1px solid var(--a75-border); }
.shop-info-strip .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2rem; }
.shop-info-strip .info-item { display: inline-flex; align-items: center; gap: .55rem; color: var(--a75-ink); font-size: .85rem; font-weight: 500; }
.shop-info-strip .info-item .ico { color: var(--a75-primary); }

.shop-stacks { padding: 2.5rem 0 1rem; }
.shop-stacks-heading { font-size: 1.25rem; font-weight: 800; letter-spacing: .04em; color: var(--a75-primary); display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.shop-stacks-inline {
    margin: 0 0 2rem;
}
.shop-stack-grid {
    margin-top: .75rem;
}
.shop-product-section {
    margin-top: 2.25rem;
}
.shop-stacks-inline + .shop-product-section,
.shop-main > .shop-product-section:first-child {
    margin-top: 0;
}
.shop-category-heading {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--a75-ink);
}
.stack-card-shop { padding: 1.5rem; }
.stack-card-shop .bundle-eyebrow { display: inline-block; color: var(--a75-primary); font-weight: 800; font-size: .72rem; letter-spacing: .14em; }
.stack-card-shop h3 { margin: .45rem 0 .35rem; font-size: 1.15rem; font-weight: 800; }
.stack-card-shop .muted { margin: 0 0 .85rem; font-size: .92rem; line-height: 1.45; }
.stack-card-shop .bundle-cta { color: var(--a75-primary); font-weight: 700; font-size: .9rem; text-decoration: none; }
.stack-card-shop .bundle-cta:hover { text-decoration: underline; }

@media (max-width: 880px) {
    .shop-hero-stats { gap: 1.25rem; }
    .shop-info-strip .container { flex-direction: column; align-items: flex-start; gap: .65rem; }
}

/* Cart page heading style (live: "YOUR CART" all caps, no hero) */
.cart-page-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}

/* Blog article body — markdown render */
.blog-article-body h2 { font-size: 1.35rem; font-weight: 800; margin: 1.5rem 0 .5rem; color: var(--a75-text); }
.blog-article-body h3 { font-size: 1.1rem; font-weight: 700; margin: 1.25rem 0 .35rem; }
.blog-article-body p { line-height: 1.7; margin: 0 0 .85rem; }
.blog-article-body ul, .blog-article-body ol { margin: 0 0 1rem 1.25rem; line-height: 1.7; }
.blog-article-body ul li, .blog-article-body ol li { margin: 0 0 .35rem; }
.blog-article-body strong { font-weight: 700; }
.blog-article-body code { background: var(--a75-surface-2, #f4f4f5); padding: .1rem .35rem; border-radius: 4px; font-size: .92em; }
.blog-article-body blockquote { border-left: 3px solid var(--a75-primary); padding: .25rem 0 .25rem 1rem; margin: 0 0 1rem; color: var(--a75-muted); }
.blog-article-body a { color: var(--a75-primary); text-decoration: underline; }

/* ============================================================
   PHASE 7 — PIXEL-PERFECT PARITY (against xolabs.industryresults.com @ 1440w)
   Append-only. Measured deltas captured 2026-05-29.
   ============================================================ */

/* --- Global typography rhythm (live: Inter / 16/24 / -0.02em on display) --- */
body { line-height: 1.5; }

/* H1 hero (live: 72px / 700 / lh .95 / ls -0.02em) */
.page-hero h1,
.shop-hero-title,
.hero-title,
main > section:first-of-type h1 {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: .95;
    letter-spacing: -0.02em;
    margin: 0 0 .5em;
}
@media (max-width: 1024px) {
    .page-hero h1, .shop-hero-title, .hero-title, main > section:first-of-type h1 { font-size: 3.5rem; }
}
@media (max-width: 768px) {
    .page-hero h1, .shop-hero-title, .hero-title, main > section:first-of-type h1 { font-size: 2.5rem; line-height: 1; }
}

/* H2 section (live: 48px / 700 / lh 1.0 / ls -0.02em) */
.section-heading,
main h2 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}
@media (max-width: 768px) { .section-heading, main h2 { font-size: 2rem; line-height: 1.1; } }

/* H3 card (live: 18px / 700 / lh 28px / ls -0.02em) */
.card h3,
.product-card h3,
main h3 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.02em;
}

/* Lead paragraph in hero (live: 16px / lh 26px) */
.page-hero p,
.shop-hero p { font-size: 1rem; line-height: 1.625; }

/* Header chrome (live: 80px tall, sticky, white bg, 1px bottom border, 3-col flex space-between) */
.site-header { backdrop-filter: saturate(180%) blur(6px); background-color: rgba(255, 255, 255, .95); }
.site-header .primary-nav a {
    font-size: .875rem;
    font-weight: 500;
    padding: 0;
    letter-spacing: 0;
    text-transform: none;
}

/* Buttons (live: 14px / 600 / radius 8px / padding 12px 24px / 46px) */
.btn,
.btn-primary,
.btn-outline {
    font-size: .875rem;
    font-weight: 600;
    border-radius: .5rem;
    padding: .75rem 1.5rem;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    min-height: 2.75rem;
}
.btn-lg { font-size: 1rem; padding: .875rem 1.75rem; min-height: 3rem; }
.btn-primary { box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 8px -2px rgba(220, 38, 38, .25); }
.btn-outline:hover { background: var(--a75-surface, #f5f5f7); border-color: var(--a75-ink, #111); }

/* Hero CTA pair on dark gradient */
.page-hero .btn-primary { background: #fff; color: var(--a75-ink, #111); border-color: #fff; }
.page-hero .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.page-hero .btn-primary:hover { background: #fff; box-shadow: 0 6px 12px -2px rgba(0,0,0,.2); }
.page-hero .btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* Cards (live radius ~10px) */
.card,
.product-card,
.peptide-card,
.goal-card,
.stack-card-shop,
.cart-summary-card,
.account-sidebar,
.address-card {
    border-radius: .75rem;
    border: 1px solid var(--a75-border, #e7e5e4);
}

/* Product card elevation */
.product-card,
.peptide-card { box-shadow: 0 1px 2px 0 rgba(0,0,0,.04); transition: box-shadow .2s, transform .2s; }
.product-card:hover,
.peptide-card:hover { box-shadow: 0 8px 24px -6px rgba(220, 38, 38, .15); transform: translateY(-2px); }

/* Goal cards */
.goal-card { background: #fff; transition: box-shadow .2s, transform .2s, border-color .2s; }
.goal-card:hover { border-color: var(--a75-primary, #dc2626); box-shadow: 0 8px 24px -6px rgba(220, 38, 38, .15); }

/* Chip pills (live: 12px / 600) */
.chip-pill,
.chip-pill-caps {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: .375rem .75rem;
    border-radius: 9999px;
    line-height: 1;
}
.chip-pill-caps { text-transform: uppercase; letter-spacing: .1em; }

/* Filter chips */
.chip {
    font-size: .875rem;
    font-weight: 500;
    padding: .5rem .9rem;
    border-radius: 9999px;
    border: 1px solid var(--a75-border, #e7e5e4);
    background: #fff;
    color: var(--a75-ink, #111);
    transition: background .15s, border-color .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    text-decoration: none;
}
.chip:hover { background: var(--a75-surface, #f5f5f7); }
.chip.active {
    background: var(--a75-primary, #dc2626);
    color: #fff;
    border-color: var(--a75-primary, #dc2626);
}

/* Footer */
.site-footer,
footer.site-footer,
body > footer {
    background: #f7f5f4;
    border-top: 1px solid #e7e5e4;
    color: var(--a75-ink, #111);
}
.site-footer a,
body > footer a { color: var(--a75-muted, #737373); transition: color .15s; }
.site-footer a:hover,
body > footer a:hover { color: var(--a75-primary, #dc2626); }

/* Tokens — pull warmer to match live oklch palette */
:root {
    --a75-border: #e7e5e4;
    --a75-muted:  #737373;
    --a75-surface: #fafafa;
    --a75-surface-2: #f5f5f4;
    --a75-ink: #18181b;
}

/* Inputs (live: 14px / radius 8px / 44px target) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
    font-size: 1rem;
    padding: .75rem 1rem;
    border-radius: .5rem;
    border: 1px solid var(--a75-border, #e7e5e4);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    min-height: 2.75rem;
    font-family: inherit;
}
textarea { min-height: 6rem; line-height: 1.5; }
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--a75-primary, #dc2626);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

/* Form labels (live: 12px / 600 / uppercase / muted) */
.stack > label > span:first-child,
.form-row label > span:first-child,
form label > span:first-child {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--a75-muted, #737373);
}

/* Section padding (live container py-16) */
.section { padding-top: 4rem; padding-bottom: 4rem; }
@media (max-width: 768px) { .section { padding-top: 2.5rem; padding-bottom: 2.5rem; } }

/* Container caps at 1200px content */
.container { max-width: 1200px; padding-left: 1.5rem; padding-right: 1.5rem; }
@media (max-width: 768px) { .container { padding-left: 1rem; padding-right: 1rem; } }

/* Reduced motion + smooth scroll */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* Focus visibility (a11y + visual polish) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--a75-primary, #dc2626);
    outline-offset: 2px;
}

/* --- Auth pages (login / register / forgot / reset) — render inside storefront layout
   Live: header + footer visible, card centered, ~440px wide, with internal padding. */
.auth-page-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3rem;
    padding-bottom: 5rem;
}
main.auth-page-wrap > .auth-card,
.auth-page-wrap .auth-card {
    width: 100%;
    max-width: 28rem;
    background: #fff;
    border: 1px solid var(--a75-border, #e7e5e4);
    border-radius: .875rem;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 16px -4px rgba(0,0,0,.06), 0 0 1px 0 rgba(0,0,0,.04);
    box-sizing: border-box;
    margin: 0;
    display: block;
}
.auth-page-wrap .auth-card h1 {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 .35rem;
    color: var(--a75-ink, #18181b);
}
.auth-page-wrap .auth-card > p.muted {
    font-size: .95rem;
    color: var(--a75-muted, #737373);
    margin: 0 0 1.5rem;
}
.auth-page-wrap .auth-card form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.auth-page-wrap .auth-card .form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 480px) { .auth-page-wrap .auth-card .form-row.two { grid-template-columns: 1fr; } }
.auth-page-wrap .auth-card label.stack {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    width: 100%;
}
.auth-page-wrap .auth-card label.stack > span:first-child {
    font-size: .72rem;
    font-weight: 700;
    color: var(--a75-muted, #737373);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.auth-page-wrap .auth-card label.stack > small.muted {
    font-size: .75rem;
    color: var(--a75-muted, #737373);
    margin-top: .1rem;
}
.auth-page-wrap .auth-card .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: -.25rem;
}
.auth-page-wrap .auth-card .checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .875rem;
    line-height: 1.4;
    cursor: pointer;
    font-weight: 400;
}
.auth-page-wrap .auth-card .checkbox input[type="checkbox"] {
    margin: 0;
    width: 1rem;
    height: 1rem;
    min-height: 0;
    accent-color: var(--a75-primary, #dc2626);
    flex-shrink: 0;
    margin-top: .15rem;
}
.auth-page-wrap .auth-card a {
    color: var(--a75-primary, #dc2626);
    font-weight: 600;
    text-decoration: none;
}
.auth-page-wrap .auth-card a:hover { text-decoration: underline; }
.auth-page-wrap .auth-card .btn-primary.btn-block.btn-lg {
    width: 100%;
    font-size: .95rem;
    margin-top: .25rem;
}
.auth-page-wrap .auth-card hr {
    border: none;
    border-top: 1px solid var(--a75-border, #e7e5e4);
    margin: 1.5rem 0 1rem;
}
.auth-page-wrap .auth-card .text-center {
    font-size: .875rem;
    margin: 1.25rem 0 0;
    color: var(--a75-muted, #737373);
    text-align: center;
}
.auth-page-wrap .auth-card .text-center a { color: var(--a75-primary, #dc2626); font-weight: 600; }

/* Inline alert / status / error card inside auth-card */
.auth-page-wrap .auth-card .card.surface {
    background: rgba(220, 38, 38, .04);
    border: 1px solid rgba(220, 38, 38, .15);
    border-radius: .5rem;
    padding: .75rem .9rem;
    margin: 0 0 1rem;
    font-size: .875rem;
}
.auth-page-wrap .auth-card .card.surface strong { display: block; color: var(--a75-primary, #dc2626); margin-bottom: .15rem; }
.auth-page-wrap .auth-card .card.surface .muted { color: var(--a75-ink, #18181b); font-size: .85rem; }

/* --- Header active nav (live: red + 600 on current page) --- */
.site-header .primary-nav a[aria-current="page"] {
    color: var(--a75-primary, #dc2626);
    font-weight: 600;
}
.site-header .primary-nav a {
    transition: color .15s;
}
.site-header .primary-nav a:hover {
    color: var(--a75-primary, #dc2626);
}

/* --- Logo: height-anchored mark, matching the live demo's
   h-12 sm:h-14 md:h-[72px] w-auto pattern. Header sizing lives in the
   base + responsive media queries earlier in this file; only auth gets
   handled here. --- */
.auth-brand-logo {
    height: 72px;
    width: auto;
    max-width: 144px;
    object-fit: contain;
}

/* --- Hero stats (live: 30px / 700 / white / lh 36px) --- */
.hero-stats .stat .v,
.shop-hero-stats .stat .v {
    font-size: 1.875rem;        /* 30px */
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}
.hero-stats .stat .l,
.shop-hero-stats .stat .l {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
}

/* --- Hero image squared (live source asset is 1024x1024; rendered at 512x512) --- */
.hero-image {
    width: 100%;
    max-width: 32rem;            /* 512px */
    aspect-ratio: 1 / 1;
}
.hero-image img {
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 26px 40px rgba(0,0,0,.22));
}

.page-hero img.hero-vials,
.page-hero .hero-art img {
    width: 100%;
    max-width: 32rem;            /* 512px */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: .5rem;
}

/* --- Shop Now arrow inside button (live pattern) --- */
.btn .arrow,
.btn-icon-right { display: inline-flex; align-items: center; gap: .5rem; }
.btn-icon-right::after {
    content: "→";
    margin-left: .35rem;
    transition: transform .15s;
}
.btn-icon-right:hover::after { transform: translateX(2px); }

/* --- Sign In / Join header buttons (live: tighter, no border on Sign In) --- */
.btn-signin,
.btn.btn-signin {
    background: #fff;
    color: var(--a75-ink, #18181b);
    border: 1px solid var(--a75-border, #e7e5e4);
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    min-height: 2.25rem;
    border-radius: .5rem;
}
.btn-join,
.btn.btn-join {
    background: var(--a75-primary, #dc2626);
    color: #fff;
    padding: .5rem 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    min-height: 2.25rem;
    border-radius: .5rem;
    border: 1px solid var(--a75-primary, #dc2626);
}
.btn-join:hover {
    background: var(--a75-primary-dark, #b91c1c);
    border-color: var(--a75-primary-dark, #b91c1c);
    color: #fff;
}

/* --- Cart icon + badge (live: red circle badge bottom-right) --- */
.cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .5rem;
}
.cart-link .i-cart {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
}
.cart-badge {
    position: absolute;
    top: -.15rem;
    right: -.15rem;
    background: var(--a75-primary, #dc2626);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .2rem;
    border: 2px solid #fff;
}

/* --- Product card pixel-match (live: 287x287 image wrapper, 239x239 image,
       flat border, no shadow until hover) --- */
.product-card,
.peptide-card {
    background: #fff;
    border-radius: .625rem;             /* 10px (live) */
    border: 1px solid #e7e5e4;
    box-shadow: none;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.product-card:hover,
.peptide-card:hover {
    box-shadow: 0 12px 24px -8px rgba(220, 38, 38, .12);
    border-color: rgba(220, 38, 38, .25);
    transform: translateY(-2px);
}
.product-card .img-wrap,
.peptide-card .img-wrap {
    aspect-ratio: 1 / 1;
    background: #f5f5f4;
    padding: 1.5rem;                    /* 24px */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    border-radius: 0;
}
.product-card .img-wrap img,
.peptide-card .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Body (below image) */
.product-card .body,
.peptide-card .body {
    padding: 1rem 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Peptide tag (PEPTIDES) - live: 10px / 700 / uppercase / muted-red */
.product-card .ptag,
.peptide-card .ptag {
    font-size: .625rem;                 /* 10px */
    font-weight: 700;
    color: var(--a75-primary, #dc2626);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}

/* Product name (h3 inside card) */
.product-card .card-name,
.peptide-card .card-name,
.product-card h3,
.peptide-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
    margin: 0;
}
.product-card .card-name a,
.peptide-card .card-name a,
.product-card h3 a,
.peptide-card h3 a { color: var(--a75-ink, #18181b); text-decoration: none; }
.product-card .card-name a:hover,
.peptide-card .card-name a:hover { color: var(--a75-primary, #dc2626); }

.product-card .card-desc,
.peptide-card .card-desc {
    font-size: .875rem;
    color: var(--a75-muted, #737373);
    line-height: 1.5;
    margin: 0;
}

/* Goal tag (Weight Loss / Recovery / etc) - live: small chip */
.product-card .goal-tag,
.peptide-card .goal-tag {
    font-size: .7rem;
    font-weight: 600;
    color: var(--a75-muted, #737373);
    background: #f5f5f4;
    padding: .15rem .45rem;
    border-radius: 9999px;
    display: inline-block;
    align-self: flex-start;
}

/* Size chips on cards */
.product-card .size-option-chip,
.size-option-chip {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    color: var(--a75-ink, #18181b);
    background: #fff;
    border: 1px solid #e7e5e4;
    padding: .25rem .55rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.size-option-chip:hover { border-color: var(--a75-primary, #dc2626); }
.size-option-chip.active {
    background: var(--a75-primary, #dc2626);
    color: #fff;
    border-color: var(--a75-primary, #dc2626);
}
.size-option-chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--a75-primary) 35%, transparent); outline-offset: 2px; }
.size-option-chips { display: flex; gap: .35rem; flex-wrap: wrap; margin: .25rem 0; }

/* COA chip */
.product-card .coa-link,
.peptide-card .coa-link {
    font-size: .75rem;
    font-weight: 600;
    color: var(--a75-muted, #737373);
    text-decoration: none;
    align-self: flex-start;
}
.product-card .coa-link:hover { color: var(--a75-primary, #dc2626); }
.product-card .coa-link.coming-soon { color: var(--a75-muted, #737373); }

.product-card .price-row,
.peptide-card .price-row {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-top: .25rem;
}
.product-card .price,
.peptide-card .price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--a75-ink, #18181b);
    line-height: 1;
}
.product-card .price-row .muted,
.peptide-card .price-row .muted {
    font-size: .8rem;
    color: var(--a75-muted, #737373);
}

/* --- Flag badge stack (TRENDING / FEATURED / NEW / STAFF PICK) --- */
.flag-badge-stack {
    position: absolute;
    top: .65rem;
    left: .65rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    z-index: 2;
}
.flag-badge {
    display: inline-block;
    font-size: .625rem;             /* 10px */
    font-weight: 700;
    color: #fff;
    background: #ea580c;            /* orange-red default */
    padding: .2rem .55rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.2;
    width: fit-content;
}
/* NOTE: Phase 7B wave 2 (Agent B) overrides these in the block at end of
   file — keep the source-of-truth color decisions there. These defaults
   remain only as a safety net for cards that don't inherit the later
   selectors (e.g. legacy admin previews). */
.flag-badge.trending   { background: #ea580c; }   /* orange (live ref) */
.flag-badge.featured   { background: var(--a75-primary, #dc2626); }
.flag-badge.coa-coming-soon { background: var(--a75-muted, #737373); }

/* Product card must be relative so badge stack absolute-anchors */
.product-card,
.peptide-card { position: relative; }

/* ============================================================
   === Phase 7B wave 1 — Agent A global design system + mobile header ===
   Append-only. Closes audited deltas vs docs/XOLABSUSA-V3/ (Lovable V3
   prototype). Mobile-nav breakpoint fix lives in the prior responsive
   block (~line 1331); the rules below cover container width, button
   radius, header chrome polish, and footer typography/color parity.
   Owner: Agent A. Wave 1. Do not edit unless you own this wave.
   ============================================================ */

/* --- Container max-width: V3 uses Tailwind 7xl = 80rem (1280px) ---
   Was 1200px (line 83 token + 3250 override). Bump to 1280px so hero,
   header, and footer gutters match the prototype. */
:root { --a75-container: 80rem; } /* 1280px */
.container { max-width: 80rem; }

/* --- Button radius: V3 buttons use rounded-md = 6px ---
   Local was 8px (.btn / .btn-primary / .btn-outline / .btn-signin /
   .btn-join). Force 6px so primary CTA, header pills, and outline buttons
   share the prototype's tighter corner radius. */
.btn,
.btn-primary,
.btn-outline,
.btn-signin,
.btn.btn-signin,
.btn-join,
.btn.btn-join {
    border-radius: .375rem; /* 6px == Tailwind rounded-md */
}

/* --- Header chrome polish: V3 sets sticky z-40 + 1px border-bottom ---
   Local was z-50 + sub-pixel border on hi-dpi. Cosmetic alignment. */
.site-header {
    z-index: 40;
    border-bottom-width: 1px;
}

/* --- Footer background: V3 uses bg-muted (neutral near-white) ---
   Local was #fbf1ef (warm coral tint). Switch to the neutral soft surface
   so the footer doesn't introduce an extra brand-warm tint. */
.site-footer {
    background: var(--a75-bg-soft, #f5f5f5);
}

/* --- Footer column headings: V3 = uppercase, ink/foreground color ---
   Local was muted gray. Use ink so columns read as proper section labels. */
.site-footer h4 {
    color: var(--a75-ink, #18181b);
    text-transform: uppercase;
}

/* --- Footer link colors: V3 inverts the local pattern ---
   Default = muted gray, hover = ink/foreground (not red). Applies to both
   the column lists and the bottom-strip legal links. */
.site-footer ul a,
.footer-bottom a {
    color: var(--a75-muted, #6b6b6b);
}
.site-footer ul a:hover,
.footer-bottom a:hover {
    color: var(--a75-ink, #18181b);
}

/* --- Footer compliance tag: V3 renders the legal strip in muted gray ---
   Local was XO red. Brand may revisit; default to muted to match prototype. */
.footer-compliance-tag {
    color: var(--a75-muted, #6b6b6b);
    font-weight: 600;
}

/* --- Footer logo: V3 footer logo renders at 150px tall ---
   Local was 140px wide / ~93px tall (aspect-locked). Anchor on height. */
.footer-brand .footer-logo {
    height: 150px;
    width: auto;
}
/* === End Phase 7B wave 1 — Agent A === */

/* ============================================================
   === Phase 7B wave 2 — Agent B home/shop components ===
   Append-only. Closes audited P0/P1 deltas vs docs/XOLABSUSA-V3/.
   Owner: Agent B. Wave 2. Do not edit unless you own this wave.
   Scope: image-backed Browse-by-Goal cards, flag-badge color parity
   (Staff Pick orange, New indigo), short-rail width constraint,
   /shop sidebar layout (240px aside + product grid), trust-strip /
   shop-info-strip Lucide SVG glyph styling.
   ============================================================ */

/* --- Image-backed Browse-by-Goal cards ---
   V3: relative card w/ <img inset-0 object-cover opacity-90>, two
   stacked white gradients (full-card from-card via via-card/90 to
   to-card/20, plus a bottom h-40 from-card to transparent), and a
   primary/20 icon square anchored top-left. Our base .goal-card was
   a plain white box; the .goal-card-bg modifier adds the bg layers
   without breaking the simpler /shop sidebar usage that still wants
   the lighter pill-style goal pills. */
.goal-card.goal-card-bg {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    background: #fff; /* fallback while img loads */
    padding: 1.5rem 1.25rem;
}
.goal-card.goal-card-bg .goal-card-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .9;
    z-index: 0;
    transition: transform .6s ease;
}
.goal-card.goal-card-bg:hover .goal-card-bg-img { transform: scale(1.04); }
/* Why: stacked from-card gradients mirror V3 line 109+110. Top gradient
   covers full card so the headline stays legible; bottom h-40 gradient
   reinforces the white fade where the CTA sits. */
.goal-card.goal-card-bg .goal-card-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #fff 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.2) 100%);
    z-index: 1;
    pointer-events: none;
}
.goal-card.goal-card-bg .goal-card-fade-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 160px;
    background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 100%);
    z-index: 2;
    pointer-events: none;
}
.goal-card.goal-card-bg .goal-icon,
.goal-card.goal-card-bg h3,
.goal-card.goal-card-bg .muted,
.goal-card.goal-card-bg .goal-cta {
    position: relative;
    z-index: 3;
}
/* Why: V3 icon square is bg-primary/20 (red-ish translucent) with primary
   text. Slightly larger than our default 40px so it reads cleanly over
   the image. */
.goal-card.goal-card-bg .goal-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(209,31,42,.2);
    color: var(--a75-primary);
    border: 1px solid rgba(209,31,42,.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0;
}
.goal-card.goal-card-bg h3 {
    margin-top: 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255,255,255,.6);
}
.goal-card.goal-card-bg .muted {
    margin-top: .25rem;
    font-size: .85rem;
    color: #444;
}
.goal-card.goal-card-bg .goal-cta {
    margin-top: auto;
    padding-top: 1rem;
    color: var(--a75-primary);
    font-weight: 600;
    font-size: .9rem;
}
.goal-card.goal-card-bg:hover { border-color: var(--a75-primary); }

/* --- Flag badge color parity vs V3 ProductCard.tsx tones ---
   Wave-1 left a stale legacy block at ~3692 (Staff Pick = blue,
   New = green). V3: staff_pick = amber gradient, new = indigo-500.
   This block wins because it sits below all earlier badge rules. */
.flag-badge.staff-pick {
    background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
    color: #4b2c00;
}
.flag-badge.new,
.flag-badge.new-arrival {
    background: #6366f1;            /* indigo-500 — V3 tone='indigo' */
    color: #fff;
}

/* --- Short-rail width constraint ---
   .grid-4 = auto-fit minmax(200px, 1fr). With 2 children the empty tracks
   collapse and each card stretches to ~570px. V3 keeps a true 4-track
   grid via lg:grid-cols-4 so 2 cards stay at catalog-card width. The
   .rail-fixed-cols modifier opts a rail into that fixed grid. */
.grid.grid-4.rail-fixed-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem; /* demo: gap-5 = 20px */
}
@media (max-width: 1023.98px) {
    .grid.grid-4.rail-fixed-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .grid.grid-4.rail-fixed-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
    .grid.grid-4.rail-fixed-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- /shop sidebar layout ---
   V3: lg:grid-cols-[240px_1fr] with <aside> on the left. Local was a
   single block container with top-of-page tabs + goal grid. Rebuild
   as a 2-column grid that collapses on tablet. Sidebar holds search,
   categories list, and goal pills. */
.shop-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 980px) {
    .shop-layout { grid-template-columns: 1fr; gap: 1.25rem; }
}
.shop-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 1rem;
}
@media (max-width: 980px) {
    .shop-sidebar { position: static; }
}
.shop-sidebar-block {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.shop-sidebar-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--a75-muted);
    margin: 0 0 .5rem;
}
.shop-sidebar-search {
    position: relative;
    display: block;
}
.shop-sidebar-search input {
    width: 100%;
    padding: .55rem .85rem .55rem 2.25rem;
    border: 1px solid var(--a75-border);
    border-radius: 8px;
    font-size: .9rem;
    background: #fff;
    color: var(--a75-ink);
}
.shop-sidebar-search input:focus {
    outline: none;
    border-color: var(--a75-primary);
    box-shadow: 0 0 0 3px rgba(209,31,42,.12);
}
.shop-sidebar-search-icon {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--a75-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.shop-sidebar-search-icon svg { width: 16px; height: 16px; }
.shop-cats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.shop-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .7rem;
    border-radius: 6px;
    color: var(--a75-ink);
    text-decoration: none;
    font-weight: 500;
    font-size: .9rem;
    transition: background .15s ease, color .15s ease;
}
.shop-cat:hover { background: var(--a75-bg-soft, #f5f5f5); }
.shop-cat.active {
    background: var(--a75-primary);
    color: #fff;
    font-weight: 600;
}
.shop-cat .count {
    display: inline-block;
    background: rgba(0,0,0,.08);
    color: inherit;
    border-radius: 999px;
    padding: 0 .55rem;
    font-size: .7rem;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}
.shop-cat.active .count { background: rgba(255,255,255,.25); }
.shop-goal-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.shop-goal-pill {
    display: inline-flex;
    align-items: center;
    padding: .3rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--a75-border);
    background: #fff;
    color: var(--a75-ink);
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.shop-goal-pill:hover { border-color: var(--a75-ink, #18181b); }
.shop-goal-pill.active {
    border-color: var(--a75-primary);
    background: var(--a75-primary);
    color: #fff;
}
.shop-goal-pill-check { display: none; font-weight: 900; }
.shop-goal-pill.active .shop-goal-pill-check { display: inline; }
.shop-goal-pill:focus-visible { outline: 3px solid color-mix(in srgb, var(--a75-primary) 35%, transparent); outline-offset: 2px; }
.shop-main {
    min-width: 0; /* prevent grid blowout from long product names */
}
/* Why: V3 product grid inside the sidebar layout uses
   sm:2 / lg:3 / xl:4 (Tailwind). Our base .grid-4 = auto-fit
   minmax(200px,1fr) which over-packs the narrower right column. Force
   a deterministic responsive grid for the shop product list. */
.shop-main .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1279.98px) {
    .shop-main .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
    .shop-main .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559.98px) {
    .shop-main .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Trust-strip + shop-info-strip: Lucide SVG glyphs ---
   PHP module swap removes emoji and injects <svg> inside .dot/.ico. Style
   the wrapper as a transparent primary-tinted block (no pink dot fill).
   Slight size bump so 16px Lucide strokes read clean. */
.trust-strip .trust-item .dot.trust-svg {
    background: rgba(209,31,42,.08);
    color: var(--a75-primary);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.trust-strip .trust-item .dot.trust-svg svg {
    width: 16px;
    height: 16px;
}
.shop-info-strip .info-item .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--a75-primary);
}
.shop-info-strip .info-item .ico svg {
    width: 18px;
    height: 18px;
}
/* === End Phase 7B wave 2 — Agent B === */

/* === Phase 7B wave 3 — Agent C commerce === */
/* Why: Commerce surfaces (/product/view, /cart, /checkout, /track) had
   measured deltas vs the V3 Lovable prototype (docs/XOLABSUSA-V3/). This
   block is append-only and targets only commerce selectors so it does
   not collide with Agent A's global tokens or Agent B's shop/storefront
   work. */

/* Shared utility: prototype uses Tailwind .input-base for form inputs;
   define a minimal local equivalent so /track + /checkout markup that
   borrows the class still renders the bordered/rounded input feel. */
.input-base {
    width: 100%;
    padding: .65rem .85rem;
    border: 1px solid var(--a75-border, #e7e5e4);
    border-radius: .5rem;
    background: #fff;
    color: var(--a75-ink, #111);
    font-size: .95rem;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input-base:focus {
    outline: none;
    border-color: var(--a75-primary, #d11f2a);
    box-shadow: 0 0 0 3px rgba(209, 31, 42, .15);
}
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ---------- /product/view ---------- */
/* Audit P1: product-detail h1 should render uppercase per V3 prototype
   (`text-4xl md:text-5xl uppercase text-ink leading-tight`). */
.product-detail-name {
    text-transform: uppercase;
}
/* Audit P0: related rail used .grid grid-4 (auto-fit minmax 200/1fr) so
   long names blew the grid past the viewport. Lock the related rail to
   a deterministic 4-up grid that matches the catalog card width on
   1024px+ and collapses cleanly on smaller breakpoints. */
.related-section .related-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}
@media (max-width: 1279.98px) {
    .related-section .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
    .related-section .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559.98px) {
    .related-section .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Audit P1 responsive: prototype uses lg: (1024px) breakpoint, local
   .product-detail-grid collapsed at 880px. Bump to 1024px so the 880-
   1023px band stacks the way the prototype does. The 880px rule already
   exists above; override here at 1024. */
@media (max-width: 1023.98px) {
    .product-detail-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- /cart ---------- */
/* Audit P2: prototype cart heading is text-4xl (~36px) not 48px. */
.cart-page-title {
    font-size: 2.25rem;
}
/* Audit P0: line rebuild. Prototype = single rounded card with divide-y
   borders, NO thumbnails, NO Update button, icon-only trash remove. */
.cart-lines-card {
    background: var(--a75-card, #fff);
    border: 1px solid var(--a75-border, #e7e5e4);
    border-radius: .75rem;
    overflow: hidden;
}
.cart-line {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--a75-border, #e7e5e4);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line-info { min-width: 0; }
.cart-line-name {
    font-weight: 700;
    color: var(--a75-ink, #111);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-line-name:hover { color: var(--a75-primary, #d11f2a); }
.cart-line-size {
    font-size: .78rem;
    color: var(--a75-muted, #71717a);
    margin-top: .15rem;
}
.cart-line-qty-form { margin: 0; }
/* The generic .btn display rule must not reveal a completed minimum repair. */
[data-cart-minimum-repair][hidden] { display: none !important; }
.cart-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--a75-border, #e7e5e4);
    border-radius: .375rem;
    overflow: hidden;
    background: #fff;
}
.cart-qty-stepper button {
    background: transparent;
    border: 0;
    padding: .35rem .75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--a75-ink, #111);
    transition: background .15s ease;
}
.cart-qty-stepper button:hover:not(:disabled) { background: var(--a75-surface, #f5f5f7); }
.cart-qty-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.cart-qty-value {
    min-width: 2.5rem;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
}
.cart-line-total {
    min-width: 5rem;
    text-align: right;
    font-weight: 700;
    color: var(--a75-ink, #111);
}
.cart-line-remove { margin: 0; }
.cart-trash-btn {
    background: transparent;
    border: 0;
    padding: .35rem;
    color: var(--a75-muted, #71717a);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    transition: color .15s ease, background .15s ease;
}
.cart-trash-btn:hover:not(:disabled) {
    color: var(--a75-primary, #d11f2a);
    background: rgba(209,31,42,.08);
}
.cart-trash-btn:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 559.98px) {
    .cart-line {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "info trash"
            "qty total";
        column-gap: .75rem;
        row-gap: .65rem;
    }
    .cart-line-info { grid-area: info; }
    .cart-line-remove { grid-area: trash; }
    .cart-line-qty-form { grid-area: qty; }
    .cart-line-total { grid-area: total; }
}
/* Audit P1: sidebar refresh — fixed 380px column at lg+, h2 heading,
   free-shipping hint, demote Continue Shopping to text link, drop the
   trailing compliance paragraph (attestations are at checkout). */
.cart-grid {
    grid-template-columns: 1fr 380px;
    gap: 2.5rem;
}
@media (max-width: 1023.98px) {
    .cart-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .cart-summary-card { position: static; }
}
.cart-summary-heading {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}
.cart-free-shipping-hint {
    font-size: .78rem;
    margin: -.25rem 0 .5rem;
}
.cart-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: .25rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.cart-summary-total-value {
    font-size: 1.5rem;
    color: var(--a75-primary, #d11f2a);
}
.cart-checkout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .75rem;
}
.cart-continue-link {
    display: block;
    text-align: center;
    margin-top: .75rem;
    font-size: .88rem;
    color: var(--a75-muted, #71717a);
    text-decoration: none;
}
.cart-continue-link:hover {
    color: var(--a75-ink, #111);
    text-decoration: underline;
}

/* ---------- /checkout ---------- */
/* Audit P1: hero typography. Prototype = container-x py-12 + h1 text-4xl
   font-bold + p text-white/70 — compact. Local was oversized via the
   global hero h1 rule. Scope-override here for the checkout hero only. */
.checkout-hero {
    padding-block: 1.75rem;
}
/* Specificity bump: the broad `main > section:first-of-type h1` rule
   (font-size: 4.5rem) was outranking the single-class .checkout-hero h1
   on element count, so the local checkout h1 rendered at 72px while live
   shows 36px. Doubling the class wins the tie cleanly. */
.checkout-hero.checkout-hero h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
}
.checkout-hero p {
    color: rgba(255,255,255,.7);
    margin-top: .5rem;
}
/* Audit P0: send-payment-panel gating — only render after a method is
   chosen. PHP keeps the panel in markup but adds .panel-hidden; JS
   removes that class on click. */
.send-payment-panel.panel-hidden { display: none; }
/* Audit P1: warning band sits INSIDE the green panel as its first child.
   Override margins so the band hugs the panel top. */
.send-payment-panel > .warning-band {
    margin: -.25rem 0 1rem;
    padding: .65rem .85rem;
    border-radius: .375rem;
}
/* Audit P0: per-method tinted defaults so cards show colour BEFORE
   selection (matches V3 METHODS[].color). Selected state already wins
   via existing .payment-card.selected rule. */
.payment-card.pm-zelle    { border-color: #e9d5ff; background: rgba(250,245,255,.5); }
.payment-card.pm-apple    { border-color: #e2e8f0; background: rgba(248,250,252,.5); }
.payment-card.pm-applepay { border-color: #e2e8f0; background: rgba(248,250,252,.5); }
.payment-card.pm-venmo    { border-color: #bae6fd; background: rgba(240,249,255,.5); }
.payment-card.pm-cashapp  { border-color: #bbf7d0; background: rgba(240,253,244,.5); }
.payment-card .pm-icon {
    width: auto;
    height: auto;
    background: transparent !important;
    color: inherit !important;
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: .4rem;
}
/* Audit P1: AMOUNT DUE value should be ~48px (text-5xl) not 36px. */
.amount-due .value {
    font-size: 3rem;
    line-height: 1;
}
/* Audit P1: summary-card heading h2 not h3. The PHP now renders h2 so
   inherit /3xx phase-7 .card h2 sizing but tighten so the sticky aside
   still reads as a panel subhead. */
.summary-card h2 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 1rem;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
}
.summary-card .summary-line-scroll {
    /* Let the summary grow with the cart. Page scroll handles overflow.
       Only cap on very large carts (12+ items) to keep summary on-screen. */
    margin: 0 -.25rem;
    padding: 0 .25rem;
}
.summary-card .summary-line-scroll:has(> :nth-child(13)) {
    max-height: 28rem;
    overflow-y: auto;
}
.summary-card .summary-line-row { border-bottom: 1px solid var(--a75-border, #e7e5e4); padding-bottom: .55rem; margin-bottom: .55rem; }
.summary-card .summary-line-row:last-child { border-bottom: 0; margin-bottom: 0; }
.secure-badge svg { margin-right: .25rem; }
.checkout-continue-btn {
    display: block;
    width: 100%;
    margin-top: 1rem;
}
.checkout-attest-card h3 {
    font-size: 1rem;
    margin: 0 0 .25rem;
}
/* Audit P1 responsive: collapse checkout grid at 1024px to match the
   prototype's lg breakpoint (was 880px). */
@media (max-width: 1023.98px) {
    .checkout-grid { grid-template-columns: 1fr; }
}
/* Prototype splits city/state/zip across 3 columns. */
.checkout-shipping-card .grid-3 {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 559.98px) {
    .checkout-shipping-card .grid-3 { grid-template-columns: 1fr; }
}

/* ---------- /track ---------- */
/* Audit P0: PageHero band already covered by global .page-hero. Form
   collapses into a single horizontal flex row; advanced (email) lookup
   tucked into a <details>. */
.track-page { max-width: 720px; }
.track-lookup-form {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 2rem;
}
.track-lookup-form .track-lookup-input {
    flex: 1 1 320px;
    min-width: 0;
}
.track-lookup-form .btn { flex: 0 0 auto; }
.track-lookup-advanced {
    flex-basis: 100%;
    font-size: .82rem;
}
.track-lookup-advanced summary {
    cursor: pointer;
    color: var(--a75-muted, #71717a);
    list-style: none;
    padding: .15rem 0;
}
.track-lookup-advanced summary::-webkit-details-marker { display: none; }
.track-lookup-advanced summary::before {
    content: '+ ';
    color: var(--a75-primary, #d11f2a);
    font-weight: 700;
}
.track-lookup-advanced[open] summary::before { content: '− '; }
.track-lookup-advanced label { display: block; margin-top: .5rem; }
.track-lookup-advanced input { margin-top: .35rem; }

/* Audit P1: timeline rebuild — vertical ordered list with leading icon
   and per-step status colour. */
.track-result-card { padding: 1.5rem; }
.track-result-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .25rem;
}
.track-result-order {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--a75-ink, #111);
}
.track-result-status {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
}
.track-result-status.delivered { color: #138a36; }
.track-result-status.in-transit { color: var(--a75-primary, #d11f2a); }
.track-result-status.pending { color: var(--a75-muted, #71717a); }
.track-timeline {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 .5rem;
    display: grid;
    gap: 1rem;
}
.track-timeline-step {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: .75rem;
    align-items: flex-start;
}
.track-timeline-icon {
    color: var(--a75-muted, #71717a);
    margin-top: .15rem;
    display: inline-flex;
}
.track-timeline-step.done .track-timeline-icon { color: #138a36; }
.track-timeline-step.active .track-timeline-icon { color: var(--a75-primary, #d11f2a); }
.track-timeline-title {
    font-weight: 700;
    color: var(--a75-ink, #111);
    font-size: .95rem;
}
.track-timeline-step.pending .track-timeline-title { color: var(--a75-muted, #71717a); font-weight: 600; }
.track-timeline-date {
    font-size: .78rem;
    color: var(--a75-muted, #71717a);
    margin-top: .1rem;
}
.track-items { margin-top: 1rem; }

/* === End Phase 7B wave 3 — Agent C === */

/* === Phase 7C — QA polish (Claude post-7B) ===
   Closes deferred items from the Phase 7B QA gate report. Scoped to
   /product/view, /dashboard, and global hover/focus polish. No new tokens.
   Append-only; do not edit older rules. */

/* /product/view — V3 spec: rounded-2xl border border-border on image wrap,
   image fills 100% of inner area, h1 leading-tight not 1.5 */
.product-detail-image {
    /* Border + radius now match V3 prototype rounded-2xl + border-border.
       The base rule above (L1875) was patched in this commit; this block
       is the fallback / override safety net. */
    border: 1px solid var(--a75-border, #e7e5e4);
}
.product-detail-info h1,
main .product-detail-info h1 {
    font-size: 3rem;             /* 48px (V3 4xl-5xl responsive) */
    font-weight: 700;            /* V3 default text-ink (was 800) */
    line-height: 1.1;            /* V3 leading-tight (was lh:1.5 = 72px) */
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--a75-ink, #18181b);
    margin: .75rem 0 .75rem;
}
@media (min-width: 768px) {
    .product-detail-info h1,
    main .product-detail-info h1 { font-size: 3.5rem; }   /* V3 md:text-5xl */
}
@media (max-width: 640px) {
    .product-detail-info h1,
    main .product-detail-info h1 { font-size: 2.25rem; line-height: 1.05; }
}

/* Tag pills under product detail h1 — V3 uses rounded-full bg-muted */
.product-detail-info .ptag-pill {
    background: rgba(220, 38, 38, .08);
    color: var(--a75-primary, #dc2626);
    border-radius: 9999px;
    padding: .25rem .65rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
}

/* --- Global hover/focus polish (the deferred QA item) --- */
.chip:focus-visible,
.size-option-chip:focus-visible,
.flag-badge:focus-visible {
    outline: 2px solid var(--a75-primary, #dc2626);
    outline-offset: 2px;
}
.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .25);
}
.product-card a:hover,
.peptide-card a:hover { color: var(--a75-primary, #dc2626); }

/* Hover-state polish on quick-adjust + admin action buttons */
.btn-outline:hover {
    background: var(--a75-surface, #fafafa);
    color: var(--a75-ink, #18181b);
    border-color: var(--a75-ink, #18181b);
}

/* === End Phase 7C QA polish === */

/* === Phase 7D — Dashboard + admin polish (Claude final QA) ===
   Closes remaining customer + admin pixel deltas against V3 dashboard.tsx
   and admin templates. Scoped via existing dashboard-* / admin-* selectors. */

/* Dashboard hero typography — V3: h1 3xl md:4xl / font-bold (700) */
main .dashboard-hero-slab h1,
.dashboard-hero-slab h1 {
    font-size: clamp(1.875rem, 3vw, 2.25rem) !important;   /* 30→36 px */
    font-weight: 700 !important;
    line-height: 1.15;
    letter-spacing: -.02em;
}

/* Dashboard stat tiles — V3 spec: label 11px uppercase wide tracking muted,
   value 3xl (30px) font-bold (700) ink */
.dashboard-hero-slab + .container.section > .grid.grid-3 > .card.stack > .muted:first-child {
    font-size: .68rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--a75-muted, #737373);
}
.dashboard-hero-slab + .container.section > .grid.grid-3 > .card.stack > div:last-child {
    font-size: 1.875rem;        /* 30px (was 32) */
    font-weight: 700;           /* was 800 */
    line-height: 1.1;
    color: var(--a75-ink, #18181b);
}

/* Quick action buttons — V3: rounded-lg, 14px / 600, gap 8px, icon size 16
   WhatsApp variant = success green */
.dashboard-actions .btn {
    font-size: .875rem;
    font-weight: 600;
    padding: .625rem 1rem;
    border-radius: .5rem;
    gap: .5rem;
    min-height: auto;
}
.dashboard-actions .btn svg { width: 16px; height: 16px; }
.dashboard-actions .btn[href*="wa.me"],
.dashboard-actions .btn[href*="whatsapp"],
.dashboard-actions a[href*="wa.me"],
.dashboard-actions a[href*="whatsapp"] {
    background: rgba(34, 197, 94, .15);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, .35);
}
.dashboard-actions a[href*="wa.me"]:hover,
.dashboard-actions a[href*="whatsapp"]:hover {
    background: rgba(34, 197, 94, .25);
    color: #15803d;
}

/* "Need Help?" panel — V3: rounded-xl + border-success/30 + bg-success/10 */
.dashboard-hero-slab + .container.section > section.card.stack:last-child {
    background: rgba(34, 197, 94, .08);
    border: 1px solid rgba(34, 197, 94, .25);
    border-radius: .75rem;
}
.dashboard-hero-slab + .container.section > section.card.stack:last-child h3 {
    color: var(--a75-ink, #18181b);
    font-weight: 700;
}
.dashboard-hero-slab + .container.section > section.card.stack:last-child .btn-primary,
.dashboard-hero-slab + .container.section > section.card.stack:last-child .btn {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.dashboard-hero-slab + .container.section > section.card.stack:last-child .btn-primary:hover,
.dashboard-hero-slab + .container.section > section.card.stack:last-child .btn:hover {
    background: #15803d;
    border-color: #15803d;
}

/* Account info h3/h2 — V3: text-lg font-bold (700, NOT 800) */
.dashboard-hero-slab + .container.section > section.card h3,
.dashboard-hero-slab + .container.section > section.card h2 {
    font-weight: 700;
}

/* My Orders empty-state link — V3 underline-style */
.dashboard-hero-slab + .container.section > section.card.stack p.muted a:hover {
    color: var(--a75-primary, #dc2626);
    text-decoration: underline;
}

/* Admin chrome polish — h1 + section heading weight 700, not 800 */
.admin-shell .admin-main h1[style*="margin:0"],
.admin-shell .admin-main .admin-settings-page h1 {
    font-weight: 700 !important;
}

/* Admin stat tiles (used on admin/dashboard, admin/inventory, etc).
   Tile structure: .admin-stat-eyebrow (small) / .admin-stat-value (BIG number) /
   .admin-stat-delta (small caption). Target the VALUE class — `div:last-child`
   would hit the caption and blow it up to heading size. */
.admin-shell .admin-main .admin-stat-grid > .admin-stat-tile > .admin-stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--a75-ink, #18181b);
}
.admin-shell .admin-main .admin-stat-grid > .admin-stat-tile > .admin-stat-delta {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--a75-muted, #737373);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.admin-shell .admin-main .admin-stat-grid > .admin-stat-tile > .admin-stat-delta-good { color: #15803d; }
.admin-shell .admin-main .admin-stat-grid > .admin-stat-tile > .admin-stat-delta-bad  { color: var(--a75-primary, #dc2626); }
.admin-shell .admin-main .admin-stat-note {
    color: var(--a75-muted, #737373);
    font-size: .75rem;
    line-height: 1.4;
}
.admin-shell .admin-main .admin-stat-grid > .admin-stat-tile > .admin-stat-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--a75-muted, #737373);
}

/* === End Phase 7D dashboard + admin polish === */

/* === Phase 7E - form layout fixes (auth grid overflow + contact label parity) === */

/* CSS grid 1fr columns by default size to min-content of their children, which
   means inputs with intrinsic width can blow past the container. Forcing
   min-width: 0 on the grid children lets the 1fr allocation actually win. */
.auth-page-wrap .auth-card .form-row.two > *,
.form-row.two > *,
.auth-page-wrap .auth-card .form-row > *,
.form-row > * {
    min-width: 0;
}
.auth-page-wrap .auth-card .form-row.two > * > input,
.auth-page-wrap .auth-card .form-row.two > * > textarea,
.auth-page-wrap .auth-card .form-row.two > * > select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Contact form (and any non-auth form that uses bare <label>Name</label><input/>
   pattern) - give labels the same small muted treatment as auth pages so
   forms feel consistent across the site. Scoped to .contact-grid so it
   doesn't bleed onto admin tables / search rows. */
.contact-grid form label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    color: var(--a75-muted, #737373);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .35rem;
}
.contact-grid form input,
.contact-grid form select,
.contact-grid form textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: .9rem;
}
.contact-grid form .form-row.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.contact-grid form .form-row.two > * { min-width: 0; }
@media (max-width: 480px) {
    .contact-grid form .form-row.two { grid-template-columns: 1fr; }
}
.contact-grid form h3,
.contact-grid form > h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--a75-ink, #18181b);
    margin: 0 0 1rem;
}

/* === End Phase 7E form layout fixes === */

/* === Phase 7G - checkout form layout fix === */
/* Checkout cards use bare h2 + bare <label>Email</label><input> pattern.
   Without scoped CSS, h2 inherits the global page h2 size (48px) and labels
   stay `display: inline` next to their inputs. V3 spec: section heading
   ~1.25rem / 700, labels stacked above as small uppercase muted text. */

.checkout-contact-card > h2,
.checkout-shipping-card > h2,
.checkout-attest-card > h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--a75-ink, #18181b);
    margin: 0 0 .25rem;
    letter-spacing: -.01em;
}

/* Match any non-checkbox label inside the contact / shipping cards, regardless
   of whether it's wrapped in `.grid > div` or just a bare `<div>`. The
   shipping card mixes both. */
.checkout-contact-card label:not(.checkbox),
.checkout-shipping-card label:not(.checkbox) {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    color: var(--a75-muted, #737373);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .35rem;
}
/* "(optional)" annotation inside the label - revert to non-uppercase
   small caption so it reads naturally. */
.checkout-shipping-card label .muted {
    font-size: .72rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.checkout-contact-card input,
.checkout-contact-card select,
.checkout-shipping-card input,
.checkout-shipping-card select {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Same grid-overflow defense as auth/contact: prevent inputs from forcing
   `1fr 1fr` columns wider than their allocation. */
.checkout-contact-card .grid.grid-2 > *,
.checkout-shipping-card .grid.grid-2 > *,
.checkout-shipping-card .grid.grid-3 > * {
    min-width: 0;
}

/* The shipping "Apt / suite" label sits OUTSIDE a grid cell as a sibling
   of an input — same treatment. */
.checkout-shipping-card > label[for] {
    margin-top: .35rem;
}

/* === End Phase 7G checkout form layout fix === */

/* === Phase 7H - close 22 selector-scope bugs found by Phase-7 sweep === */
/* Workflow wf_f31b715d-503 (29 agents) walked every public/customer/admin
   surface looking for the same selector-scope failure modes as 7E/7F/7G.
   Findings batched here as a single CSS append. No PHP markup touched.
   P0 = visibly broken on first look. P1 = noticeable inconsistency. */

/* P0 — label.stack outside .auth-page-wrap renders inline (caption sits
   next to input instead of stacked above). Original rule at line 3326 was
   scoped to .auth-card. Same markup pattern is used on /physician-signup,
   /account/addresses, /account/wholesale-application and any other surface
   that adopts the label.stack > span + control idiom. Promote to global. */
label.stack {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* P0 — bare <h2> inside .card inherits the global `main h2` 48px rule and
   renders card subheadings at page-hero size. Hit /admin/top-sellers
   ("Pinned order", "Add product…"), /admin/seo ("Page inventory",
   "Create override", "Sitemap & robots preview"), and /cart empty-state.
   Phase 7G covered checkout cards by name; this generalizes the cap. */
section.card > h2,
div.card > h2,
section.card > section > h2,
div.card > section > h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--a75-ink, #18181b);
    letter-spacing: -.01em;
    margin: 0 0 .25rem;
}

/* P1 — bare <h1> inside <article class="card stack"> on /terms and
   /disclaimer falls to UA default (~32px) while every other public page
   uses the 72px .page-hero treatment. Give legal articles a sane heading. */
main > .container.section > article.card > h1 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 .5rem;
    color: var(--a75-ink, #18181b);
}

/* Public legal pages mirror the Lovable/live red hero + open article layout. */
.legal-hero {
    padding: 4.25rem 0;
    background: linear-gradient(120deg, #260506 0%, #7f0508 48%, #dc2626 100%);
    color: #fff;
}
.legal-hero h1 {
    margin: 0;
    max-width: 960px;
    font-size: clamp(3rem, 5vw, 4.75rem);
    line-height: .98;
    letter-spacing: -.03em;
    font-weight: 800;
}
.legal-hero p {
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, .86);
    font-size: 1rem;
}
.legal-content {
    padding-top: 4.5rem;
    padding-bottom: 7rem;
}
.legal-copy {
    max-width: 760px;
    margin: 0 auto;
}
.legal-copy h2 {
    margin: 0 0 1.45rem;
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    line-height: 1.15;
    color: #09090b;
}
.legal-copy p {
    margin: 0 0 1.85rem;
    font-size: 1.02rem;
    line-height: 1.7;
    color: #18181b;
}
.legal-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding: 1.45rem 1.65rem;
    border: 2px solid #f5a400;
    border-radius: 12px;
    background: #fffbeb;
    color: #92400e;
}
.legal-alert span {
    font-size: 1.35rem;
    line-height: 1;
    color: #f97316;
}
.legal-alert h2 {
    margin: 0 0 .55rem;
    font-size: 1rem;
    color: #7c2d12;
}
.legal-alert p {
    margin: 0;
    color: #9a3412;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .legal-hero { padding: 3rem 0; }
    .legal-content { padding-top: 3rem; padding-bottom: 4rem; }
    .legal-alert { grid-template-columns: 1fr; padding: 1.25rem; }
}

/* P0 — /admin/inventory `.admin-inventory-quick-adjust` had zero CSS so
   the four <form>-wrapped step buttons stacked vertically in every row,
   making each row ~4x taller than the table column allowed. */
.admin-inventory-quick-adjust {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
}
.admin-inventory-quick-adjust form {
    margin: 0;
    display: inline-block;
}
.admin-inventory-quick-adjust button {
    min-width: 2.25rem;
    padding: .25rem .5rem;
    font-size: .8rem;
    font-weight: 600;
}
.admin-inventory-step { display: inline-block; }

/* Keep size-specific balances and adjustment controls inside every viewport. */
.admin-inventory-panel { min-width: 0; }
.admin-inventory-heading { align-items: flex-start; }
.admin-inventory-heading h1, .admin-inventory-dialog h2 { margin: 0; }
.admin-inventory-dialog h2 { font-size: 1.5rem; line-height: 1.25; }
.admin-inventory-heading p { margin: .35rem 0; }
.admin-inventory-size { display: block; margin-top: .25rem; font-weight: 400; }
.admin-inventory-table-wrap { max-width: 100%; overflow-x: auto; }
.admin-inventory-table-wrap table { min-width: 780px; }
.admin-inventory-table-wrap th[scope="row"] { text-align: left; text-transform: none; }
.admin-inventory-panel .search-input { flex: 1; min-width: 120px; max-width: 340px; }
.admin-inventory-panel .admin-dashboard-row-main { min-width: 0; overflow-wrap: anywhere; }
.admin-inventory-panel .admin-dashboard-row-main { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.admin-inventory-panel .admin-dashboard-row-main strong { word-break: normal; }
.admin-inventory-dialog { width: min(540px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; border: 1px solid var(--border, #ddd); border-radius: 12px; padding: 1.5rem; }
.admin-inventory-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.admin-inventory-dialog .stack { min-width: 0; gap: .6rem; }
.admin-inventory-dialog select, .admin-inventory-dialog input { max-width: 100%; min-width: 0; width: 100%; }
.admin-inventory-dialog-actions { justify-content: flex-end; }
.admin-inventory-dialog [data-inventory-feedback] { color: #a11212; margin: 0; }
.admin-inventory-panel [data-inventory-row] button { min-height: 36px; }
@media (max-width: 900px) {
    .admin-inventory-panel .admin-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
    .admin-inventory-panel .admin-stat-tile { padding: .75rem; }
}
@media (max-width: 640px) {
    .admin-inventory-dialog { padding: 1rem; }
    .admin-inventory-heading { gap: .75rem; }
    .admin-inventory-panel [data-inventory-row] button { min-height: 44px; }
    .admin-inventory-panel .admin-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
    .admin-inventory-panel .admin-stat-tile { padding: .75rem; }
    .admin-inventory-panel .admin-stat-eyebrow { font-size: .65rem; flex-wrap: wrap; }
    .admin-inventory-panel .admin-stat-value { font-size: 1.75rem; }
}
@media (max-width: 900px) {
    .admin-inventory-table-wrap table { min-width: 0; }
    .admin-inventory-table-wrap thead { display: none; }
    .admin-inventory-table-wrap tbody, .admin-inventory-table-wrap tr { display: block; }
    .admin-inventory-table-wrap tr { padding: .5rem 0; border-bottom: 1px solid var(--border, #ddd); }
    .admin-inventory-table-wrap th[scope="row"] { display: block; padding: .75rem .25rem; border: 0; }
    .admin-inventory-table-wrap td { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem .25rem; border: 0; }
    .admin-inventory-table-wrap td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted, #666); font-size: .8rem; }
    .admin-inventory-table-wrap code { overflow-wrap: anywhere; text-align: right; }
}

/* P1 — `.stat-tile-warning` / `.stat-tile-danger` modifier classes had no
   accent. Tiles rendered identical despite semantic intent. */
.admin-stat-tile.stat-tile-warning {
    border-color: rgba(234, 179, 8, .35);
    background: rgba(254, 252, 232, .6);
}
.admin-stat-tile.stat-tile-warning > .admin-stat-value { color: #b45309; }
.admin-stat-tile.stat-tile-danger {
    border-color: rgba(220, 38, 38, .35);
    background: rgba(254, 242, 242, .6);
}
.admin-stat-tile.stat-tile-danger > .admin-stat-value { color: #b91c1c; }

/* P0 — /admin/analytics revenue trend chart classes had no CSS. Bars
   collapsed to 0 width, vertical stack instead of side-by-side. */
.admin-analytics-trend {
    display: flex;
    align-items: flex-end;
    gap: .4rem;
    height: 160px;
    padding: 1rem 0 .5rem;
    border-bottom: 1px solid var(--a75-border, #e7e5e4);
    margin-bottom: 1rem;
}
.admin-analytics-trend-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: .35rem;
    min-width: 0;
    height: 100%;
}
.admin-analytics-trend-bar {
    width: 100%;
    background: var(--a75-primary, #dc2626);
    border-radius: 4px 4px 0 0;
    min-height: 12px;
    flex: 0 0 auto;
}
.admin-analytics-trend-label {
    font-size: .68rem;
    font-weight: 600;
    text-align: center;
    color: var(--a75-muted, #737373);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* P0 — /admin/analytics channel-mix bars had no CSS. Track collapsed to
   0 height so the colored fill was invisible. */
.admin-analytics-channels {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.admin-analytics-channel-row {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.admin-analytics-channel-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .85rem;
    font-weight: 500;
    color: var(--a75-ink, #18181b);
}
.admin-analytics-channel-track {
    height: 8px;
    background: var(--a75-border, #e7e5e4);
    border-radius: 999px;
    overflow: hidden;
}
.admin-analytics-channel-fill {
    height: 100%;
    border-radius: 999px;
}

/* P1 — /admin/customers filter row, tier pills, banner, action buttons,
   tag pills all had zero scoped CSS. */
.admin-list-filter-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: .65rem;
    margin-bottom: 1rem;
}
.admin-list-filter-row > * { min-width: 0; }
.admin-list-search {
    position: relative;
    display: flex;
    align-items: center;
}
.admin-list-search > input {
    width: 100%;
    padding-left: 2.25rem;
    box-sizing: border-box;
}
.admin-list-search-icon {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--a75-muted, #737373);
    pointer-events: none;
}
.admin-list-select > select { width: 100%; box-sizing: border-box; }
@media (max-width: 880px) {
    .admin-list-filter-row { grid-template-columns: 1fr 1fr; }
}

.admin-users-table td { vertical-align: middle; }
.admin-user-identity {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 220px;
}
.admin-user-identity > div {
    display: grid;
    gap: .12rem;
    min-width: 0;
}
.admin-user-identity strong,
.admin-user-identity span {
    overflow-wrap: anywhere;
}
.admin-user-avatar {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(17, 17, 17, .06);
    color: var(--a75-muted, #737373);
    flex: 0 0 auto;
}
.admin-role-pill {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    border: 1px solid var(--a75-border, #e7e5e4);
    background: var(--a75-surface, #fafaf9);
    color: var(--a75-ink, #18181b);
    white-space: nowrap;
}
.admin-role-pill-super_admin {
    border-color: rgba(220, 38, 38, .25);
    background: rgba(254, 242, 242, .9);
    color: #b91c1c;
}
.admin-role-pill-admin {
    border-color: rgba(37, 99, 235, .25);
    background: rgba(239, 246, 255, .9);
    color: #1d4ed8;
}
.admin-role-pill-staff {
    border-color: rgba(16, 185, 129, .25);
    background: rgba(236, 253, 245, .9);
    color: #047857;
}
.admin-row-actions {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.admin-row-actions form {
    margin: 0;
    display: inline-flex;
}
.admin-row-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: .4rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--a75-muted, #737373);
    cursor: pointer;
    text-decoration: none;
}
.admin-row-action-btn:hover {
    background: var(--a75-surface, #f5f5f4);
    color: var(--a75-ink, #18181b);
}
.admin-row-action-btn:focus-visible {
    outline: 2px solid rgba(220, 38, 38, .28);
    outline-offset: 2px;
}
.admin-row-action-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.admin-customers-filter-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: .65rem;
    margin-bottom: 1rem;
}
.admin-customers-filter-row > * { min-width: 0; }
@media (max-width: 880px) {
    .admin-customers-filter-row { grid-template-columns: 1fr 1fr; }
}
.admin-customers-search {
    position: relative;
    display: flex;
    align-items: center;
}
.admin-customers-search > input {
    width: 100%;
    padding-left: 2.25rem;
    box-sizing: border-box;
}
.admin-customers-search-icon {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--a75-muted, #737373);
    pointer-events: none;
}
.admin-customers-select > select { width: 100%; box-sizing: border-box; }

.admin-customers-review-banner {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: .65rem;
    background: rgba(254, 252, 232, .85);
    border: 1px solid rgba(234, 179, 8, .35);
    margin-bottom: 1rem;
}
.admin-customers-review-banner-icon {
    display: inline-flex;
    color: #b45309;
    flex: 0 0 auto;
    padding-top: .15rem;
}
.admin-customers-review-banner-body { flex: 1; font-size: .9rem; }
.admin-customers-review-banner-link {
    color: var(--a75-primary, #dc2626);
    font-weight: 600;
    text-decoration: none;
}
.admin-customers-review-banner-link:hover { text-decoration: underline; }

.admin-tier-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid var(--a75-border, #e7e5e4);
    background: var(--a75-surface, #fafaf9);
    color: var(--a75-ink, #18181b);
    white-space: nowrap;
}
.admin-tier-pill-physician {
    border-color: rgba(99, 102, 241, .35);
    background: rgba(238, 242, 255, .85);
    color: #4338ca;
}
.admin-tier-pill-wholesale {
    border-color: rgba(16, 185, 129, .35);
    background: rgba(236, 253, 245, .85);
    color: #047857;
}
.admin-tier-pill-wholesale-pending {
    border-color: rgba(234, 179, 8, .35);
    background: rgba(254, 252, 232, .85);
    color: #92400e;
}
.admin-tier-pill-retail {
    border-color: var(--a75-border, #e7e5e4);
    background: #f5f5f4;
    color: #44403c;
}

.admin-customer-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .12rem .45rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 500;
    background: var(--a75-surface, #fafaf9);
    border: 1px solid var(--a75-border, #e7e5e4);
    color: var(--a75-muted, #737373);
    white-space: nowrap;
    margin-right: .2rem;
}

.admin-customer-actions {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.admin-customer-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: .4rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--a75-muted, #737373);
    cursor: pointer;
    text-decoration: none;
}
.admin-customer-action-btn:hover { background: var(--a75-surface, #f5f5f4); color: var(--a75-ink, #18181b); }
.admin-customer-action-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* P1 — /admin/discounts action buttons, code cell. */
.admin-discount-code-cell {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.admin-discount-tag-icon { display: inline-flex; color: var(--a75-muted, #737373); }
.admin-discount-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    max-width: 24rem;
    gap: .25rem;
}
.admin-discounts-table .discount-link-url { font-size: .75rem; max-width: 16rem; margin-top: .35rem; }
.admin-discount-actions form { margin: 0; display: inline-block; }
.admin-discount-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: .4rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--a75-muted, #737373);
    cursor: pointer;
    text-decoration: none;
}
.admin-discount-action-btn:hover { background: var(--a75-surface, #f5f5f4); color: var(--a75-ink, #18181b); }
.admin-discount-action-danger:hover { color: var(--a75-primary, #dc2626); background: rgba(254, 242, 242, .6); }

/* P1 — /admin/blog status pill, actions. */
.admin-blog-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.admin-blog-actions {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.admin-blog-actions form { margin: 0; display: inline-block; }
.admin-blog-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: .4rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--a75-muted, #737373);
    cursor: pointer;
    text-decoration: none;
}
.admin-blog-action-btn:hover { background: var(--a75-surface, #f5f5f4); color: var(--a75-ink, #18181b); }
.admin-blog-action-danger:hover { color: var(--a75-primary, #dc2626); background: rgba(254, 242, 242, .6); }

/* P1 — /admin/orders tracking form: input + button on one row. */
.admin-order-tracking {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    flex-wrap: wrap;
}
.admin-order-tracking-label {
    flex: 1;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.admin-order-tracking-label > input { width: 100%; box-sizing: border-box; }

/* P1 — /check-email and /verify-email use .goal-icon outside .goal-card,
   so all the .goal-card .goal-icon rules miss. Give bare .goal-icon a
   reasonable badge default so the envelope/check renders as a centered
   40x40 pill. */
.goal-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(209, 31, 42, .1);
    color: var(--a75-primary, #dc2626);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* Codex verify follow-up: the Phase 7H generic h2 cap missed SEO headings
   nested inside row wrappers and form.card headings. Keep admin cards compact
   without changing page-level hero h2s. */
.card > .row.flex-between > h2,
.admin-two-column .card h2,
.seo-sitemap-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--a75-ink, #18181b);
    letter-spacing: -.01em;
    margin: 0 0 .25rem;
}

/* === End Phase 7H selector-sweep follow-up === */
/* === Wave 2 functional workflows === */
.payment-proof-card,
.admin-order-payment-card {
    margin-top: 1rem;
    border-color: rgba(220, 38, 38, .16);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(254,242,242,.55));
}

.payment-proof-card h3,
.admin-order-payment-card h3 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
    font-weight: 800;
}

.payment-proof-form,
.admin-order-verify-form {
    display: grid;
    gap: .85rem;
    margin-top: .85rem;
}

.payment-proof-form label,
.admin-order-verify-form label {
    display: grid;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--a75-muted);
}

.payment-proof-form input,
.payment-proof-form select,
.payment-proof-form textarea,
.admin-order-verify-form input {
    width: 100%;
    min-width: 0;
}

.payment-proof-inline {
    position: relative;
    display: inline-block;
    margin-left: .35rem;
    text-align: left;
}

.payment-proof-inline summary {
    list-style: none;
    cursor: pointer;
}

.payment-proof-inline summary::-webkit-details-marker {
    display: none;
}

.payment-proof-inline[open] .payment-proof-form {
    position: absolute;
    right: 0;
    z-index: 20;
    width: min(360px, 86vw);
    padding: 1rem;
    border: 1px solid var(--a75-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .16);
}

.admin-order-proof-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: start;
    padding: .9rem 0;
    border-top: 1px solid var(--a75-border);
}

.admin-order-proof-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    gap: .5rem;
    align-items: center;
}

.admin-order-verify-form {
    grid-template-columns: minmax(110px, .8fr) minmax(0, 1.4fr) minmax(0, 1.4fr) auto;
    align-items: end;
    padding-top: .9rem;
    border-top: 1px solid var(--a75-border);
    gap: .65rem;
}
.admin-order-verify-form label {
    font-size: .68rem;
}
.admin-order-verify-form input {
    font-size: .82rem;
    padding: .45rem .6rem;
    height: auto;
    line-height: 1.3;
}

/* -- Order item rows: thumbnail + body + stock badge -- */
.admin-order-item-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .55rem 0;
}
.admin-order-item-row + .admin-order-item-row {
    border-top: 1px solid var(--a75-border);
}
.admin-order-item-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--a75-border);
    background: var(--a75-card-soft);
    display: block;
}
.admin-order-item-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.admin-order-item-body strong {
    font-size: .95rem;
    line-height: 1.25;
}
.admin-order-item-body small {
    font-size: .8rem;
    line-height: 1.3;
}

/* -- Order proof attachment: thumbnail + filename + "open" overlay -- */
.admin-order-attachment {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: .4rem;
    padding: .4rem .55rem;
    border: 1px solid var(--a75-border);
    border-radius: 10px;
    background: var(--a75-card-soft);
    max-width: 380px;
}
.admin-order-attachment-thumb {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--a75-border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--a75-muted);
    text-decoration: none;
    transition: transform .15s ease;
}
.admin-order-attachment-thumb:hover {
    transform: scale(1.03);
}
.admin-order-attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.admin-order-attachment-thumb.is-doc {
    color: var(--a75-muted);
}
.admin-order-attachment-open {
    position: absolute;
    right: 4px;
    bottom: 4px;
    background: rgba(17, 17, 17, .72);
    color: #fff;
    border-radius: 999px;
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    transition: background .15s ease;
}
.admin-order-attachment-thumb:hover .admin-order-attachment-open {
    background: var(--a75-primary);
}
.admin-order-attachment-meta {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    overflow: hidden;
}
.admin-order-attachment-meta a {
    font-size: .85rem;
    font-weight: 600;
    color: var(--a75-ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-order-attachment-meta a:hover {
    color: var(--a75-primary);
    text-decoration: underline;
}

/* -- Inventory deduction stamp inside the tracking panel -- */
.admin-order-inventory-stamp {
    margin: .35rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    font-size: .8rem;
}
.admin-order-inventory-hint {
    grid-column: 1 / -1;
    margin: .35rem 0 0;
    font-size: .8rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.admin-order-inventory-hint code {
    background: var(--a75-card-soft);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .75rem;
}

.checkout-discount-line strong {
    color: #15803d;
}

@media (max-width: 760px) {
    .admin-order-verify-form,
    .admin-order-proof-actions {
        grid-template-columns: 1fr;
    }

    .payment-proof-inline {
        display: block;
        margin: .5rem 0 0;
    }

    .payment-proof-inline[open] .payment-proof-form {
        position: static;
        width: 100%;
        margin-top: .5rem;
    }
}

/* === End Wave 2 functional workflows === */

/* Public live-demo compare follow-up: keep stack detail overrides last so
   broad hero/heading parity rules do not inflate this compact bundle page. */
.stack-detail-hero h1 {
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}
.stack-detail-section-heading {
    font-size: 1.15rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

main > section.page-hero:first-of-type h1,
main > section.page-hero:first-of-type .shop-hero-title,
main > section.legal-hero:first-of-type h1,
main > section.stack-detail-hero:first-of-type h1 {
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.02em;
}

main > section.stack-detail-hero:first-of-type h1 {
    text-transform: uppercase;
}

@media (max-width: 640px) {
    main > section.page-hero:first-of-type h1,
    main > section.page-hero:first-of-type .shop-hero-title,
    main > section.legal-hero:first-of-type h1,
    main > section.stack-detail-hero:first-of-type h1 {
        font-size: 2.25rem;
    }
}

main .product-detail-info h1 {
    font-size: 3rem;
    line-height: 1.1;
}

@media (max-width: 640px) {
    main .product-detail-info h1 {
        font-size: 2.25rem;
        line-height: 1.05;
    }
}

/* Product tag rhythm: keep category/goal pills readable above product names. */
.product-card .ptag,
.peptide-card .ptag {
    margin-bottom: .15rem;
}

.product-card .goal-tag,
.peptide-card .goal-tag {
    margin: .1rem 0 .35rem;
}

.product-card .goal-tag-row,
.peptide-card .goal-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .05rem 0 .35rem;
}

.product-card .goal-tag-row .goal-tag,
.peptide-card .goal-tag-row .goal-tag {
    margin: 0;
}

.product-detail-info .ptag-pill {
    margin-bottom: .35rem;
}

.product-detail-info .goal-chip-row {
    gap: .6rem;
    margin: .1rem 0 .75rem;
}

.product-detail-info .goal-chip {
    background: rgba(220, 38, 38, .08);
    color: var(--a75-primary, #dc2626);
    padding: .32rem .7rem;
}

/* === Phase 7I - admin UI parity (PR #2 handoff) === */
/* P0 #2 - /admin/products live-demo cell: thumbnail + name + SKU stacked. */
.admin-product-cell {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}
.admin-product-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 40px;
    background: var(--a75-surface);
    border: 1px solid var(--a75-border);
}
.admin-product-meta { min-width: 0; }
.admin-product-meta strong { display: block; }
.admin-product-meta .muted { font-size: .75rem; }
.admin-products-table th,
.admin-products-table td { vertical-align: middle; }

/* Optional explicit wrapper utility for table containment. */
.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll > .table { min-width: 560px; }
.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--a75-border); border-radius: 999px; }

/* Markup-free containment: below desktop, any admin table scrolls horizontally
   inside its own card instead of widening the page (P0 #3/#5/#6). Covers
   products, customers, discounts, blog, inventory, and seo tables at once. */
@media (max-width: 980px) {
    .admin-main .card .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .admin-main .card .table thead,
    .admin-main .card .table tbody { width: max-content; min-width: 100%; }
    .admin-main { overflow-x: hidden; }
}

/* P0 #4 - /admin/top-sellers desktop overflow: grid children default to
   min-width:auto (min-content), so a long product name forces the pinned-order
   row past the card edge and pushes the sort input outside. Let the label
   column shrink and pin the number input width. */
.admin-sort-row > * { min-width: 0; }
.admin-sort-row .checkbox span { min-width: 0; overflow-wrap: anywhere; }
.admin-sort-row input[type="number"] {
    width: 100%;
    max-width: 110px;
    box-sizing: border-box;
}
/* === End Phase 7I admin UI parity === */

/* === Admin dashboard clickable card polish === */
.admin-dashboard-kpi-grid {
    align-items: stretch;
    /* Six KPI tiles: slightly smaller min track than the default .grid-4 so
       the paid and total order measures stay together on desktop, still
       wrapping responsively on narrow admin viewports. */
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}
.admin-dashboard-kpi-link {
    --kpi-accent: var(--a75-primary);
    --kpi-soft: rgba(220, 38, 38, .08);
    position: relative;
    min-height: 192px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    border-color: color-mix(in srgb, var(--kpi-accent) 20%, var(--a75-border));
    box-shadow: 0 14px 30px rgba(17, 17, 17, .08);
    transition: transform var(--a75-transition), box-shadow var(--a75-transition), border-color var(--a75-transition), background var(--a75-transition);
}
.admin-dashboard-kpi-link:hover {
    opacity: 1;
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--kpi-accent) 48%, var(--a75-border));
    box-shadow: 0 20px 44px rgba(17, 17, 17, .13);
}
.admin-dashboard-kpi-link:focus-visible {
    outline: 2px solid var(--kpi-accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--kpi-accent) 18%, transparent);
}
.admin-dashboard-kpi-link > *:not(.admin-dashboard-kpi-shade) {
    position: relative;
    z-index: 1;
}
.admin-dashboard-kpi-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--kpi-accent) 18%, transparent), transparent 38%),
        linear-gradient(180deg, #fff 0%, var(--kpi-soft) 100%);
}
.admin-dashboard-kpi-revenue { --kpi-accent: #dc2626; --kpi-soft: rgba(254, 242, 242, .88); }
.admin-dashboard-kpi-orders { --kpi-accent: #2563eb; --kpi-soft: rgba(239, 246, 255, .92); }
.admin-dashboard-kpi-orders-total { --kpi-accent: #7c3aed; --kpi-soft: rgba(245, 243, 255, .92); }
.admin-dashboard-kpi-customers { --kpi-accent: #16a34a; --kpi-soft: rgba(240, 253, 244, .92); }
.admin-dashboard-kpi-products { --kpi-accent: #b45309; --kpi-soft: rgba(255, 251, 235, .92); }
.admin-dashboard-emoji {
    margin-left: auto;
    font-size: 1.05rem;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(17, 17, 17, .12));
}
.admin-dashboard-spark {
    height: 46px;
    display: flex;
    align-items: end;
    gap: 5px;
    padding: 8px 0 3px;
}
.admin-dashboard-spark span {
    flex: 1 1 0;
    min-width: 6px;
    height: var(--bar-height, 16%);
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--kpi-accent) 78%, #fff), var(--kpi-accent));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--kpi-accent) 24%, transparent);
}
.admin-dashboard-evidence-link {
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid color-mix(in srgb, var(--kpi-accent) 18%, var(--a75-border));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: var(--kpi-accent);
    font-size: .78rem;
    font-weight: 800;
}
.admin-shell .admin-main .admin-stat-grid > .admin-stat-tile > .admin-stat-delta-info {
    color: var(--a75-info, #1a3a8a);
}
.admin-dashboard-rows {
    display: grid;
    gap: .55rem;
}
.admin-dashboard-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .82rem .9rem;
    border: 1px solid transparent;
    border-radius: var(--a75-radius-md);
    background: linear-gradient(180deg, #fff 0%, var(--a75-bg-soft) 100%);
}
.admin-dashboard-row-link {
    color: inherit;
    text-decoration: none;
    transition: transform var(--a75-transition), box-shadow var(--a75-transition), border-color var(--a75-transition), background var(--a75-transition);
}
.admin-dashboard-row-link:hover {
    opacity: 1;
    transform: translateY(-1px);
    border-color: rgba(220, 38, 38, .22);
    background: #fff;
    box-shadow: 0 12px 26px rgba(17, 17, 17, .08);
}
.admin-dashboard-row-link:focus-visible {
    outline: 2px solid var(--a75-primary);
    outline-offset: 2px;
}
.admin-dashboard-row-main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}
.admin-dashboard-row-main > span {
    min-width: 0;
}
.admin-dashboard-row-main strong {
    display: block;
    overflow-wrap: anywhere;
}
.admin-dashboard-row-meta {
    display: grid;
    gap: .12rem;
    justify-items: end;
    text-align: right;
}
.admin-dashboard-row-action {
    color: var(--a75-primary);
    font-size: .75rem;
    font-weight: 800;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--a75-transition), transform var(--a75-transition);
}
.admin-dashboard-row-link:hover .admin-dashboard-row-action,
.admin-dashboard-row-link:focus-visible .admin-dashboard-row-action {
    opacity: 1;
    transform: translateX(0);
}
.admin-dashboard-tag-icon {
    display: inline-flex;
    color: var(--a75-warning, #b45309);
    padding-top: .12rem;
}
.admin-dashboard-discount-given {
    color: var(--a75-success, #138a36);
}
@media (max-width: 760px) {
    .admin-dashboard-kpi-link {
        min-height: 176px;
    }
    .admin-dashboard-row {
        grid-template-columns: 1fr;
    }
    .admin-dashboard-row-meta {
        justify-items: start;
        text-align: left;
    }
    .admin-dashboard-row-action {
        opacity: 1;
        transform: none;
    }
}
/* === End admin dashboard clickable card polish === */

/* ==================================================
   PRODUCT IMPORT WIZARD
================================================== */
/* Why: the import flow runs across 4 short screens; the step indicator,
   dropzone label, and chip strip below are scoped to those screens. */

.import-steps {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    counter-reset: import-step;
}
.import-steps li {
    counter-increment: import-step;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--a75-border);
    border-radius: 999px;
    background: var(--a75-card);
    color: var(--a75-muted);
    font-size: 13px;
    line-height: 1.2;
}
.import-steps li::before {
    content: counter(import-step);
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--a75-border);
    color: var(--a75-ink);
    font-weight: 700;
    font-size: 12px;
}
.import-steps li[aria-current="step"] {
    border-color: var(--a75-primary);
    color: var(--a75-ink);
    background: var(--a75-primary-soft);
}
.import-steps li[aria-current="step"]::before {
    background: var(--a75-primary);
    color: #fff;
}
.import-steps li[data-done="1"] {
    color: var(--a75-ink);
}
.import-steps li[data-done="1"]::before {
    background: var(--a75-success);
    color: #fff;
}

.import-dropzone {
    display: block;
    border: 2px dashed var(--a75-border);
    border-radius: var(--a75-radius);
    background: var(--a75-bg-soft);
    padding: 28px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--a75-transition), background var(--a75-transition);
}
.import-dropzone:hover { border-color: var(--a75-primary); background: var(--a75-primary-soft); }
.import-dropzone input[type="file"] {
    display: block;
    margin: 10px auto 0;
}
.import-dropzone strong { display: block; margin-bottom: 4px; }
.import-dropzone .muted { font-size: 13px; }

.import-field-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(180px, 1.2fr) minmax(180px, 1.5fr);
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--a75-border);
}
.import-field-row:last-child { border-bottom: none; }
.import-field-row > .label strong { display: block; }
.import-field-row > .label .muted { font-size: 12px; }
.import-field-row .fill-default {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--a75-muted);
    margin-top: 4px;
}
@media (max-width: 720px) {
    .import-field-row { grid-template-columns: 1fr; }
}

.import-chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
.import-image-picker {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--a75-border);
    border-radius: var(--a75-radius-sm);
    padding: 8px;
    background: var(--a75-card-soft);
}
.import-image-picker label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.import-kpi {
    flex: 1 1 140px;
    background: var(--a75-card);
    border: 1px solid var(--a75-border);
    border-radius: var(--a75-radius);
    padding: 12px 14px;
}
.import-kpi strong { display: block; font-size: 22px; line-height: 1.1; }
.import-kpi .muted { font-size: 12px; }
.import-kpi.success { border-left: 4px solid var(--a75-success); }
.import-kpi.danger { border-left: 4px solid var(--a75-danger); }
.import-kpi.warning { border-left: 4px solid var(--a75-warning); }
.import-kpi.info { border-left: 4px solid var(--a75-info); }

/* ============ Checkout polish ============ */

/* -- Checkout stepper - slim numbered -- */
.checkout-stepper {
    display: flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 16px 0;
    align-items: center;
}
.checkout-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    flex-shrink: 0;
}
/* Connector line: every step except the first gets a line before it.
   Keep the step's own 10px gap so the number circle and its label stay
   spaced; the connector handles its own spacing via margins. */
.checkout-step + .checkout-step::before {
    content: "";
    display: block;
    width: 32px;
    flex-shrink: 0;
    height: 2px;
    background: var(--a75-border);
    margin-right: 4px;
}
.checkout-step.done + .checkout-step::before {
    background: var(--a75-success);
}
.checkout-step-num {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    background: var(--a75-bg-soft);
    color: var(--a75-muted);
    border: 1px solid var(--a75-border);
}
.checkout-step.active .checkout-step-num {
    background: var(--a75-primary);
    color: #fff;
    border-color: var(--a75-primary);
}
.checkout-step.done .checkout-step-num {
    background: var(--a75-success);
    color: #fff;
    border-color: var(--a75-success);
    font-size: 0;
}
.checkout-step.done .checkout-step-num::before {
    content: "\2713";
    font-size: 14px;
}
.checkout-step-label {
    font-size: 14px;
    color: var(--a75-muted);
    font-weight: 400;
}
.checkout-step.active .checkout-step-label {
    color: var(--a75-ink);
    font-weight: 600;
}
@media (max-width: 480px) {
    .checkout-step-label { display: none; }
    .checkout-step { padding: 8px 4px; }
    .checkout-step + .checkout-step::before { width: 20px; margin-right: 4px; }
}

/* -- Attestation notice -- */
.checkout-attest-note {
    font-size: 13px;
    color: var(--a75-muted);
    line-height: 1.5;
    max-width: 640px;
    margin: 8px 0 4px;
}
.checkout-attest-note a {
    color: var(--a75-ink);
    text-decoration: underline;
}
.checkout-attest-note strong {
    color: var(--a75-ink);
    font-weight: 600;
}

/* -- Summary line rows: thumb + body + actions -- */
/* .summary-card .line { display: flex } above outranks a single-class
   selector here, so we have to qualify with .summary-card to override. */
.summary-card .summary-line-row {
    display: grid;
    /* thumb | body (tight to thumb) | 1fr spacer for centering qty | actions */
    grid-template-columns: 48px auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    justify-content: start;
}
.summary-card .summary-line-thumb { align-self: start; }
.summary-card .summary-line-body {
    align-self: start;
    min-width: 0;
    max-width: 180px;
    overflow: hidden;
}
.summary-card .summary-line-body strong {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Qty stepper centered in the 1fr spacer column */
.summary-card .summary-line-row > .summary-qty-stepper {
    justify-self: center;
    margin-top: 0;
}
.summary-line-row:last-child {
    border-bottom: none;
}
.summary-line-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--a75-border);
    display: block;
}
.summary-line-body strong {
    display: block;
    font-size: 14px;
}
.summary-line-body .muted {
    font-size: 12px;
}
.summary-line-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.summary-line-price {
    font-weight: 600;
}
.summary-line-remove-form {
    margin: 0;
}
.summary-line-remove {
    background: transparent;
    border: none;
    color: var(--a75-muted);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.summary-line-remove:hover {
    background: var(--a75-bg-soft);
    color: var(--a75-danger);
}

/* -- Summary card: Continue Shopping link -- */
.summary-continue-link {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    padding: 10px 14px;
    font-size: 14px;
}

/* -- Input field hints: icon inside input + on-blur validation states -- */
.field {
    display: block;
}
.input-with-icon {
    position: relative;
    display: block;
}
.input-with-icon .input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--a75-muted);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    transition: color .15s ease;
    z-index: 1;
}
.input-with-icon input,
.input-with-icon select {
    padding-left: 38px !important;
    width: 100%;
}
.input-with-icon select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a7572' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px !important;
}
.field.is-valid .input-with-icon .input-icon {
    color: var(--a75-success);
}
.field.is-valid .input-with-icon input,
.field.is-valid .input-with-icon select {
    border-color: var(--a75-success);
}
.field.has-error .input-with-icon .input-icon {
    color: var(--a75-danger);
}
.field.has-error .input-with-icon input,
.field.has-error .input-with-icon select {
    border-color: var(--a75-danger);
    background-color: #fff8f8;
}
.field-error {
    display: none;
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--a75-danger);
    line-height: 1.3;
}
.field.has-error .field-error {
    display: block;
}
.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--a75-ink);
}
/* ============ / Checkout polish ============ */

/* ============ Card CTA: cart icon + Buy Now ============ */
.card-cta-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-top: .5rem;
}
.card-cta-cart-form,
.card-cta-buy-form {
    margin: 0;
}
.card-cta-buy-form {
    flex: 1;
    display: flex;
}
.card-cta-buy {
    flex: 1;
    width: 100%;
    padding-left: .75rem;
    padding-right: .75rem;
}
.card-cta-cart.btn-cta-icon {
    min-height: 40px;
    padding: .45rem .65rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    background: transparent;
    border: 1px solid var(--a75-border);
    border-radius: var(--a75-radius-sm, 8px);
    color: var(--a75-ink);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.card-cta-cart.btn-cta-icon:hover {
    background: var(--a75-bg-soft, #f5f5f5);
    border-color: var(--a75-primary);
    color: var(--a75-primary);
}
.card-cta-cart.btn-cta-icon svg {
    display: block;
    pointer-events: none;
}
.card-cta-cart.btn-cta-icon span { font-size: .72rem; font-weight: 750; line-height: 1.1; }
.card-cta-cart.btn-cta-icon.is-added {
    background: var(--a75-success, #138a36);
    border-color: var(--a75-success, #138a36);
    color: #fff;
}

/* Cart qty stepper visual lives in the canonical .cart-qty-stepper block
   earlier in this file (grouped 2px border pill). No override here to avoid
   a conflicting duplicate selector. */

/* Checkout summary: item count + unit price + total weight */
.summary-item-count {
    font-size: .8rem;
    font-weight: 400;
    color: var(--a75-muted);
    margin-left: .3rem;
}
.summary-unit-price {
    font-size: .75rem;
    color: var(--a75-muted);
    margin-top: 2px;
}
.summary-total-row {
    border-top: 2px solid var(--a75-border) !important;
    margin-top: .5rem;
    padding-top: .5rem;
    font-size: 1.05rem;
    font-weight: 800;
}
.summary-promo-toggle {
    margin: .85rem 0 .65rem;
    padding: .75rem .85rem;
    border: 1px solid rgba(220, 38, 38, .18);
    border-radius: 10px;
    background: var(--a75-primary-soft);
}
.summary-promo-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .65rem;
}
.summary-promo-head strong {
    font-size: .92rem;
    line-height: 1.2;
}
.summary-promo-head span,
.summary-promo-copy {
    color: var(--a75-muted);
    font-size: .78rem;
    line-height: 1.35;
}
.summary-promo-copy {
    margin: .25rem 0 0;
}
.summary-promo-feedback {
    margin: .5rem 0 0;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
}
.summary-promo-feedback.is-success { color: #15803d; }
.summary-promo-feedback.is-error { color: #b91c1c; }
.summary-promo-card .promo-row {
    margin: .65rem 0 0;
}

/* Inline qty stepper inside the checkout summary line.
   The buttons reference forms by id (HTML5 `form` attr) placed outside the
   main checkout form — see comment in checkout/index.php. The visual pill
   styling lives directly on the .summary-qty-stepper container. */
.summary-qty-stepper {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--a75-border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--a75-card, #fff);
}
.summary-qty-stepper button {
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: .95rem;
    line-height: 1;
    color: var(--a75-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s ease;
}
.summary-qty-stepper button:hover:not(:disabled) { background: var(--a75-bg-soft); }
.summary-qty-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.summary-qty-value {
    min-width: 26px;
    text-align: center;
    font-size: .82rem;
    font-weight: 600;
    user-select: none;
}
/* ============ / Card CTA ============ */

/* ============ Admin taxonomy: goals and product tags ============ */
.admin-taxonomy-guide h2,
.admin-tag-goals h2 {
    margin: 0 0 .25rem;
    font-size: 1.15rem;
}
.admin-tag-actions {
    justify-content: flex-end;
}
.admin-taxonomy-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}
.admin-taxonomy-summary > div,
.admin-tag-goal-item,
.admin-tag-guidance {
    border: 1px solid var(--a75-border);
    border-radius: 8px;
    background: var(--a75-surface);
}
.admin-taxonomy-summary > div {
    padding: .85rem;
}
.admin-taxonomy-summary strong {
    display: block;
    font-size: 1.55rem;
    line-height: 1;
}
.admin-taxonomy-summary span {
    color: var(--a75-muted);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}
.admin-tag-goal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .85rem;
}
.admin-tag-goal-item {
    display: grid;
    gap: .75rem;
    padding: .9rem;
}
.admin-tag-goal-item.is-inactive {
    opacity: .72;
}
.admin-tag-goal-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
}
.admin-tag-goal-head strong,
.admin-tag-goal-head code {
    display: block;
}
.admin-tag-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--a75-border);
    color: var(--a75-primary);
    font-weight: 800;
}
.admin-tag-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin: 0;
}
.admin-tag-meta div {
    min-width: 0;
}
.admin-tag-meta dt {
    color: var(--a75-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}
.admin-tag-meta dd {
    margin: .15rem 0 0;
    font-weight: 700;
}
.admin-tag-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 1rem;
    align-items: start;
}
.admin-tag-guidance {
    padding: 1rem;
}
.admin-tag-guidance p,
.admin-tag-guidance ul {
    color: var(--a75-muted);
    font-size: .9rem;
}
.admin-tag-guidance ul {
    margin: .65rem 0;
    padding-left: 1.1rem;
}
.admin-tag-icon-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.admin-tag-icon-list span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .45rem;
    border: 1px solid var(--a75-border);
    border-radius: 999px;
    background: #fff;
    font-size: .78rem;
    font-weight: 700;
}
.admin-tag-active-toggle {
    align-self: end;
    min-height: 42px;
}
@media (max-width: 760px) {
    .admin-taxonomy-summary,
    .admin-tag-form-grid {
        grid-template-columns: 1fr;
    }
    .admin-tag-actions {
        width: 100%;
    }
    .admin-tag-actions .btn {
        flex: 1;
    }
    .admin-tag-goal-head {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .admin-tag-goal-head .badge {
        grid-column: 1 / -1;
        justify-self: start;
    }
}
/* ============ / Admin taxonomy ============ */

/* ============ Zelle checkout and account capture ============ */
.checkout-account-choice,
.checkout-save-account-card {
    border-color: rgba(30, 92, 76, .22);
    background:
        linear-gradient(180deg, rgba(244, 250, 247, .96), rgba(255, 255, 255, .98)),
        var(--a75-surface);
}
.checkout-account-choice h2,
.checkout-save-account-card h2 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.25;
}
.checkout-account-choice-actions,
.checkout-save-account-form {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
}
.checkout-save-account-form {
    align-items: end;
}
.manual-payment-panel,
.checkout-zelle-qr {
    border: 1px solid var(--a75-border);
    border-radius: 8px;
    background: #fff;
}
.is-hidden {
    display: none !important;
}
.manual-payment-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    margin: .9rem 0;
}
.manual-payment-copy {
    min-width: 0;
}
.manual-payment-copy p {
    margin: .45rem 0 0;
}
.manual-payment-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .55rem .85rem;
    margin: .85rem 0 0;
}
.manual-payment-details div {
    border: 1px solid var(--a75-border);
    border-radius: 8px;
    padding: .6rem .7rem;
    background: var(--a75-surface);
}
.manual-payment-details dt {
    margin: 0 0 .2rem;
    color: var(--a75-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.manual-payment-details dd {
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.manual-payment-amount {
    margin-top: .45rem;
    color: var(--a75-primary);
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 800;
}
.manual-payment-qr,
.checkout-zelle-qr {
    margin: 0;
    padding: .75rem;
    text-align: center;
}
.manual-payment-qr img,
.checkout-zelle-qr img {
    display: block;
    width: min(180px, 44vw);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 6px;
}
.manual-payment-qr figcaption,
.checkout-zelle-qr figcaption {
    margin-top: .5rem;
    color: var(--a75-muted);
    font-size: .82rem;
}
.checkout-zelle-qr {
    display: inline-block;
    margin: .85rem 0 1rem;
}
.checkout-zelle-qr.is-hidden {
    display: none;
}
.payment-proof-inline .manual-payment-panel {
    margin: .75rem 0;
}
.payment-proof-inline .manual-payment-amount {
    font-size: 1.35rem;
}
.payment-proof-inline .manual-payment-panel {
    grid-template-columns: 1fr;
}
@media (max-width: 760px) {
    .checkout-account-choice-actions .btn,
    .checkout-save-account-form .btn {
        width: 100%;
    }
    .manual-payment-panel {
        grid-template-columns: 1fr;
    }
    .manual-payment-qr img,
    .checkout-zelle-qr img {
        width: min(220px, 70vw);
    }
    .summary-promo-head {
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
    }
    .promo-row {
        grid-template-columns: 1fr;
    }
    .promo-row .btn {
        width: 100%;
    }
}

.settings-section-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 0;
}
.settings-section-pills a {
    text-decoration: none;
}
.settings-overview-panel {
    padding: 0;
    overflow: hidden;
}
.settings-overview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--a75-border);
}
.settings-overview-row:last-child {
    border-bottom: 0;
}
.settings-overview-row p {
    margin: .2rem 0 0;
}
.payment-settings-page > .admin-subnav,
.admin-settings-page > .admin-subnav {
    border-bottom: 0;
    margin-bottom: 1rem;
    padding-bottom: 0;
}
.payment-settings-page > .admin-subnav a,
.admin-settings-page > .admin-subnav a {
    border-radius: 999px;
    border-color: var(--a75-border);
    background: #fff;
}
.payment-settings-panel {
    padding-top: 1rem;
}
.payment-settings-panel-head,
.payment-qr-admin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
}
.payment-settings-panel-head h4 {
    margin: .45rem 0 .2rem;
    font-size: 1.05rem;
}
.payment-enable-toggle {
    justify-self: end;
    white-space: nowrap;
}
.payment-requirements {
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 8px;
    background: #f8fafc;
    padding: .85rem 1rem;
    margin: 1rem 0;
}
.payment-requirements ul {
    display: grid;
    gap: .25rem .9rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin: .5rem 0 0;
    padding-left: 1.1rem;
    color: var(--a75-muted);
}
.payment-copy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    margin-top: 1rem;
}
.payment-copy-grid textarea,
.payment-settings-page textarea {
    resize: vertical;
}
.payment-qr-admin {
    border: 1px solid var(--a75-border);
    border-radius: 8px;
    padding: .9rem;
    background: #fff;
    margin-top: 1rem;
}
.payment-qr-preview {
    margin: 0;
    text-align: center;
}
.payment-qr-preview img {
    display: block;
    width: 148px;
    max-width: 38vw;
    height: auto;
    border: 1px solid var(--a75-border);
    border-radius: 8px;
    margin: 0 auto;
}
.payment-qr-preview figcaption {
    max-width: 190px;
    margin-top: .45rem;
    color: var(--a75-muted);
    font-size: .76rem;
    overflow-wrap: anywhere;
}
.promotion-compliance-note {
    border-color: rgba(220, 38, 38, .18);
    background: #fff8f8;
}
.promotion-active-preview {
    display: grid;
    grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}
.promotion-active-preview figure,
.promotion-image-preview {
    margin: 0;
}
.promotion-active-preview img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--a75-border);
    border-radius: 8px;
}
.promotion-table-title {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
}
.promotion-table-title img {
    width: 72px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 1px solid var(--a75-border);
    border-radius: 6px;
    background: #fff;
}
.promotion-table-title p {
    margin: .15rem 0 0;
    overflow-wrap: anywhere;
}
.promotion-image-admin {
    align-items: center;
}
.promotion-image-preview img {
    width: min(320px, 38vw);
    aspect-ratio: 3 / 2;
    object-fit: contain;
}
.promotion-edit-form .form-row.three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}
@media (max-width: 760px) {
    .settings-overview-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .payment-settings-panel-head,
    .payment-qr-admin,
    .payment-copy-grid {
        grid-template-columns: 1fr;
    }
    .promotion-active-preview,
    .promotion-edit-form .form-row.three {
        grid-template-columns: 1fr;
    }
    .promotion-image-preview img {
        width: min(100%, 420px);
    }
    .payment-enable-toggle {
        justify-self: start;
        white-space: normal;
    }
}
/* ============ / Zelle checkout and account capture ============ */

/* ==================================================
   ADMIN WAVE 2026-06-10 — shared foundation CSS
   User dropdown, admin form sections, wizard steps, table thumbs,
   overflow guards, switches, compact mobile admin chips.
   ================================================== */

/* ---- Top-right user dropdown (header.php [data-user-menu]) ---- */
.user-menu { position: relative; }
button.a75-profile-chip {
    cursor: pointer;
    font: inherit;
    border: 1px solid var(--a75-border);
    background: var(--a75-card, #fff);
}
.user-menu-caret { font-size: .7rem; opacity: .65; margin-left: .15rem; }
.user-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    min-width: 230px;
    background: var(--a75-card, #fff);
    border: 1px solid var(--a75-border);
    border-radius: .6rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
    padding: .35rem;
    z-index: 240;
}
.user-menu-panel a {
    display: block;
    padding: .55rem .75rem;
    border-radius: .45rem;
    color: var(--a75-ink);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}
.user-menu-panel a:hover,
.user-menu-panel a:focus-visible {
    background: var(--a75-surface);
    text-decoration: none;
}
.user-menu-sep {
    height: 1px;
    background: var(--a75-border);
    margin: .35rem .25rem;
}
.user-menu-logout { color: var(--a75-primary); }

/* ---- Non-active admin subnav tabs keep the quiet outline look ---- */
.admin-subnav a {
    border-color: var(--a75-border);
    background: var(--a75-card, #fff);
}
.admin-subnav a.active {
    background: var(--a75-primary);
    color: var(--a75-primary-contrast);
    border-color: var(--a75-primary);
}

/* ---- Sectioned admin forms (.form-section blocks) ---- */
.form-section {
    background: var(--a75-card, #fff);
    border: 1px solid var(--a75-border);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.form-section > h2,
.form-section > h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .85rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--a75-border);
}
.form-section .form-row { margin-bottom: .85rem; }
.form-section-nav {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    align-self: start;
}
.form-section-nav a {
    padding: .45rem .7rem;
    border-radius: .45rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--a75-muted, #6b7280);
}
.form-section-nav a:hover { background: var(--a75-surface); text-decoration: none; color: var(--a75-ink); }
.form-save-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    padding: .85rem 1.25rem;
    background: var(--a75-card, #fff);
    border: 1px solid var(--a75-border);
    border-radius: 14px;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .06);
    z-index: 30;
}

/* ---- Multi-step indicator (import flow etc.) ---- */
.wizard-steps {
    display: flex;
    gap: .35rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.wizard-step {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--a75-border);
    background: var(--a75-card, #fff);
    font-size: .82rem;
    font-weight: 600;
    color: var(--a75-muted, #6b7280);
}
.wizard-step .wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--a75-surface);
    font-size: .72rem;
    font-weight: 700;
}
.wizard-step.is-active {
    border-color: var(--a75-primary);
    color: var(--a75-primary);
    background: var(--a75-primary-soft, #fff1f2);
}
.wizard-step.is-active .wizard-step-num {
    background: var(--a75-primary);
    color: var(--a75-primary-contrast);
}
.wizard-step.is-done { color: var(--a75-ink); }
.wizard-step.is-done .wizard-step-num { background: #e6f4ea; color: #138a36; }
.wizard-step-arrow { color: var(--a75-muted, #9ca3af); font-size: .8rem; }

/* ---- Product thumbnails inside admin tables ---- */
.admin-table-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--a75-border);
    background: var(--a75-surface);
    flex: none;
}
.admin-table-product-cell {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}
.admin-table-product-cell .admin-table-product-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Horizontal scroll guard for wide admin tables ---- */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.table-scroll > table { min-width: 640px; }

/* ---- Toggle switch ---- */
.switch {
    position: relative;
    display: inline-flex;
    width: 40px;
    height: 22px;
    flex: none;
}
.switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
.switch .switch-track {
    width: 100%;
    border-radius: 999px;
    background: var(--a75-border);
    transition: background .15s ease;
    pointer-events: none;
}
.switch .switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}
.switch input:checked + .switch-track { background: var(--a75-primary); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track {
    outline: 2px solid var(--a75-primary);
    outline-offset: 2px;
}

/* ---- Grid overflow guards (admin two-column / detail grids) ---- */
.admin-two-column > *,
.admin-order-detail-grid > *,
.admin-stack-grid > * { min-width: 0; }

/* ---- Compact admin pill nav on tablet/mobile (live baseline) ---- */
@media (max-width: 768px) {
    body:has(.admin-sidebar-mobile) {
        overflow-x: hidden;
    }
    .admin-shell {
        overflow-x: clip;
    }
    .admin-sidebar-mobile {
        display: flex;
        gap: .4rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        contain: inline-size;
        padding: .25rem .1rem .6rem;
        margin-bottom: .75rem;
        scrollbar-width: none;
    }
    .admin-sidebar-mobile::-webkit-scrollbar { display: none; }
    .user-menu-panel { min-width: 210px; }
}
/* ============ / ADMIN WAVE 2026-06-10 foundation ============ */

/* Saved discount sharing uses the existing card/form/button system. */
.discount-link-builder { max-width: 960px; margin: 1.25rem 0; }
.discount-link-builder details > summary { cursor: pointer; font-weight: 600; padding: .8rem 0; }
.discount-link-card h3, .discount-link-card p { margin: 0; }
.discount-link-card [data-link-card-status]:empty { display: none; }
.discount-link-url { display: block; overflow-wrap: anywhere; white-space: normal; font-size: 1rem; }
.discount-link-actions { flex-wrap: wrap; }
.discount-link-new { border: 0; padding: 0; margin: 0; min-width: 0; }
.discount-link-new[hidden] { display: none; }
.discount-link-error { color: var(--danger, #b42318); }
.discount-link-builder [data-link-feedback] { min-height: 1.5em; margin: .25rem 0; }
.discount-link-builder select, .discount-link-builder input { min-width: 0; max-width: 100%; }
.discount-link-builder [data-link-match] { margin-top: 1rem; }
.discount-link-management form + form { margin-top: 1rem; }
.discount-link-saved-list { overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .discount-link-actions > .btn { flex: 1 1 auto; }
    .discount-link-builder .form-row.two { grid-template-columns: 1fr; }
}

/* ==================================================
   COA REQUEST, VIEWER, LIBRARY, AND ADMIN SURFACES
   ================================================== */
.product-card button.coa-link,
.product-detail-info button.coa-link {
    appearance: none;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
}
.coa-modal[hidden] { display: none; }
.coa-modal {
    position: fixed;
    inset: 0;
    z-index: 1200; /* Above sticky storefront/admin chrome; below no other managed overlay. */
    display: grid;
    place-items: center;
    padding: 1rem;
}
.coa-modal-backdrop { position: absolute; inset: 0; background: rgba(12, 12, 14, .68); }
.coa-modal-dialog {
    position: relative;
    width: min(100%, 540px);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--a75-border);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
    padding: clamp(1.25rem, 3vw, 2rem);
}
.coa-modal-dialog h2 { margin: .35rem 0 .6rem; }
.coa-modal-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--a75-border);
    border-radius: 999px;
    background: #fff;
    font-size: 1.35rem;
    cursor: pointer;
}
.coa-modal-note { margin: 0; font-size: .82rem; }
body.coa-modal-open { overflow: hidden; }
.coa-info-page { max-width: 980px; }
.coa-info-page > .section-subhead { margin: 0 0 1rem; color: var(--a75-muted); font-size: 1.05rem; }
.coa-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .55rem; }
.coa-cta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.coa-cta-grid h2 { margin: 0; }
.coa-ruo { margin: 1.25rem 0 0; text-align: center; color: var(--a75-muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; }
.coa-viewer-card,
.coa-library-card,
.coa-denied { max-width: 980px; margin-inline: auto; }
.coa-meta-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: .5rem 0; }
.coa-meta-grid > div { padding: .9rem; background: var(--a75-surface); border: 1px solid var(--a75-border); border-radius: 12px; min-width: 0; }
.coa-meta-grid dt { color: var(--a75-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.coa-meta-grid dd { margin: .25rem 0 0; font-weight: 700; overflow-wrap: anywhere; }
.coa-library-table { overflow-x: auto; }
.coa-library-table table { min-width: 720px; }
.coa-library-product-start td { border-top: 2px solid var(--a75-border); }
.coa-notice-warning { border-color: #f4d9b3; background: #fff8e8 !important; }
.coa-admin-page > .admin-subnav { margin-top: .85rem; }
.coa-admin-page .admin-dashboard-kpi-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.coa-admin-page .a75-table-wrap { max-height: 660px; overflow: auto; }
.coa-admin-page .a75-table-wrap thead th { position: sticky; top: 0; z-index: 1; background: var(--a75-surface); }
.coa-admin-page .a75-table-wrap tbody tr:hover { background: var(--a75-surface); }
.coa-admin-page .a75-table-wrap tbody tr.coa-row-saved { background: #ecfdf3; box-shadow: inset 4px 0 0 var(--a75-success, #138a36); }
@media (max-width: 768px) {
    .coa-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coa-cta-grid,
    .coa-admin-page .admin-dashboard-kpi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .coa-modal { padding: .5rem; align-items: end; }
    .coa-modal-dialog { width: 100%; max-height: calc(100vh - 1rem); border-radius: 18px 18px 10px 10px; }
    .coa-meta-grid { grid-template-columns: 1fr; }
}

/* ===== Discount QR (CR-C) ===== */
.qr-card {
    overflow: hidden;
}

.qr-card-heading {
    gap: 1rem;
}

.qr-card-heading h2,
.qr-card-heading p {
    margin: 0;
}

.qr-card-heading p {
    margin-top: .35rem;
}

.qr-card-content {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
}

.qr-card-image {
    display: block;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1;
    padding: .6rem;
    border: 1px solid var(--a75-border);
    border-radius: var(--a75-radius-lg);
    background: #fff;
}

.qr-card-details,
.qr-card-link-label {
    min-width: 0;
}

.qr-card-link-label input {
    width: 100%;
}

.qr-card-actions {
    flex-wrap: wrap;
}

.qr-card-warning {
    margin: 0;
    padding: .75rem 1rem;
    border: 1px solid #f59e0b;
    border-radius: var(--a75-radius-md);
    color: #92400e;
    background: #fffbeb;
}

.qr-print-page {
    min-height: 100vh;
    margin: 0;
    padding: 2rem;
    display: grid;
    place-items: center;
    background: #f4f4f5;
    color: #18181b;
}

.qr-print-sheet {
    width: min(100%, 7.5in);
    min-height: 9.5in;
    box-sizing: border-box;
    padding: .65in;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #d4d4d8;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 18px 50px rgb(0 0 0 / 10%);
}

.qr-print-store {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.qr-print-code {
    margin: 0;
    font-size: clamp(2.5rem, 7vw, 4.75rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

.qr-print-offer {
    margin: .75rem 0 0;
    font-size: 1.6rem;
    font-weight: 700;
}

.qr-print-expiry,
.qr-print-url {
    margin: .65rem 0 0;
}

.qr-print-image {
    width: min(3.35in, 70vw);
    height: auto;
    margin: 1.25rem auto .6rem;
}

.qr-print-url {
    max-width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    overflow-wrap: anywhere;
}

.qr-print-compliance {
    margin: 1.35rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #d4d4d8;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.qr-print-button {
    margin-top: 1.5rem;
}

@media (max-width: 640px) {
    .qr-card-content {
        grid-template-columns: 1fr;
    }

    .qr-card-image {
        max-width: 220px;
        margin-inline: auto;
    }

    .qr-card-heading {
        align-items: flex-start;
    }

    .qr-print-page {
        padding: .75rem;
    }

    .qr-print-sheet {
        min-height: calc(100vh - 1.5rem);
        padding: 1.25rem;
    }
}

@media print {
    @page {
        size: auto;
        margin: .35in;
    }

    .qr-print-page {
        min-height: 0;
        padding: 0;
        display: block;
        background: #fff;
    }

    .qr-print-sheet {
        width: 100%;
        min-height: 0;
        max-height: 10in;
        padding: .35in;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        break-inside: avoid;
    }

    .qr-print-image {
        width: 3.1in;
    }

    .qr-print-button {
        display: none !important;
    }
}

/* ===== CR-E: quotes + messaging (additive) ===== */
.quote-admin-page > .admin-subnav,
.quotes-admin-page > .admin-subnav {
    margin-top: .85rem;
}

.quotes-admin-page .admin-dashboard-kpi-grid,
.quote-admin-page .kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.quote-admin-page .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.quotes-admin-page .a75-table-wrap,
.quote-admin-page .a75-table-wrap {
    max-height: 660px;
    overflow: auto;
}

.quotes-admin-page .a75-table-wrap table,
.quote-admin-page .a75-table-wrap table,
.quote-items-table table {
    min-width: 840px;
}

.quotes-admin-page .a75-table-wrap thead th,
.quote-admin-page .a75-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--a75-surface);
}

.quotes-admin-page .a75-table-wrap tbody tr:hover,
.quote-admin-page .a75-table-wrap tbody tr:hover {
    background: var(--a75-surface);
}

.quote-edit-line {
    border-left: 4px solid color-mix(in srgb, var(--a75-primary) 45%, var(--a75-border));
}

.quote-line-heading {
    align-items: center;
    gap: .75rem;
}

.quote-price-shortcut {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    padding: .85rem;
    border: 1px dashed color-mix(in srgb, var(--a75-primary) 28%, var(--a75-border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--a75-primary) 2%, var(--a75-surface));
}

.quote-price-shortcut-single {
    grid-template-columns: 1fr;
}

[data-quote-adjustment-field][hidden] {
    display: none !important;
}

.quote-line-accounting,
.quote-accounting-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.quote-line-accounting span,
.quote-accounting-grid > span {
    display: grid;
    gap: .2rem;
    min-width: 0;
    padding: .7rem .8rem;
    border: 1px solid var(--a75-border);
    border-radius: 12px;
    background: var(--a75-surface);
    color: var(--a75-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.quote-line-accounting strong,
.quote-accounting-grid strong {
    color: var(--a75-text);
    font-size: 1rem;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    text-transform: none;
}

.quote-accounting-grid strong {
    font-size: 1.25rem;
}

.quote-line-explanation {
    min-height: 1.25rem;
}

.quotes-admin-page .quote-accounting-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.quote-total-summary,
.quote-review-card,
.quote-checkout-lock,
[data-quote-one-time-link] {
    border-color: color-mix(in srgb, var(--a75-primary) 35%, var(--a75-border));
    background: color-mix(in srgb, var(--a75-primary) 4%, var(--a75-surface));
}

[data-quote-one-time-link] input {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

.quote-variance-line {
    display: inline-block;
    margin-top: .3rem;
    color: var(--a75-muted);
}

.quote-review-card,
.quote-denied {
    width: min(100%, 980px);
    margin-inline: auto;
}

.quote-review-heading {
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.quote-review-heading h2,
.quote-denied h2 {
    margin: .2rem 0 0;
}

.quote-status-context {
    display: grid;
    justify-items: end;
    gap: .3rem;
    text-align: right;
}

.quote-table-scroll-hint {
    display: none;
    margin: .55rem 0;
    color: var(--a75-muted);
    font-size: .82rem;
}

.quote-expiry-notice,
.quote-converted-summary {
    border-color: color-mix(in srgb, var(--a75-success, #138a36) 35%, var(--a75-border));
}

.quote-notice-warning {
    border-color: #f4c66d;
    background: #fff8e8 !important;
}

.quote-accept-form {
    display: flex;
    justify-content: flex-end;
}

.quote-ruo {
    margin: 1rem auto 0;
    max-width: 980px;
    color: var(--a75-muted);
    font-size: .85rem;
    text-align: center;
}

.quote-locked-qty {
    min-width: 72px;
    padding-inline: .65rem;
    gap: .35rem;
    justify-content: center;
    color: var(--a75-muted);
}

.messaging-check-grid,
.messaging-secret-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.messaging-check-grid p,
.messaging-secret-grid p {
    margin: .35rem 0 0;
    overflow-wrap: anywhere;
}

.messaging-status-card {
    border-color: color-mix(in srgb, var(--a75-primary) 30%, var(--a75-border));
}

.messaging-page-status {
    margin: .75rem 0 0;
}

.checkout-discount-line[hidden] {
    display: none !important;
}

@media (max-width: 768px) {
    .quotes-admin-page .admin-dashboard-kpi-grid,
    .quote-admin-page .kpi-grid {
        grid-template-columns: 1fr;
    }

    .messaging-check-grid,
    .messaging-secret-grid {
        grid-template-columns: 1fr;
    }

    .quote-price-shortcut,
    .quote-line-accounting,
    .quote-accounting-grid {
        grid-template-columns: 1fr;
    }

    .quote-table-scroll-hint {
        display: block;
    }

    .quote-status-context {
        justify-items: start;
        text-align: left;
    }

    .quote-review-card .quote-items-table {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .quote-review-card .quote-items-table table {
        min-width: 0;
        width: 100%;
    }

    .quote-review-card .quote-items-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .quote-review-card .quote-items-table tbody,
    .quote-review-card .quote-items-table tfoot,
    .quote-review-card .quote-items-table tr,
    .quote-review-card .quote-items-table td,
    .quote-review-card .quote-items-table th {
        display: block;
        width: 100%;
    }

    .quote-review-card .quote-items-table tbody tr {
        margin-bottom: .75rem;
        padding: .8rem;
        border: 1px solid var(--a75-border);
        border-radius: 14px;
        background: var(--a75-surface);
    }

    .quote-review-card .quote-items-table tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: .28rem 0;
        border: 0;
        text-align: right !important;
    }

    .quote-review-card .quote-items-table tbody td:first-child {
        display: block;
        padding-bottom: .55rem;
        text-align: left !important;
    }

    .quote-review-card .quote-items-table tbody td:not(:first-child)::before {
        content: attr(data-label);
        color: var(--a75-muted);
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-align: left;
        text-transform: uppercase;
    }

    .quote-review-card .quote-items-table tfoot tr {
        padding: .75rem .8rem;
        border-top: 2px solid var(--a75-border);
    }

    .quote-review-card .quote-items-table tfoot th:first-child {
        display: none;
    }

    .quote-review-card .quote-items-table tfoot th:last-child {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0;
        text-align: right !important;
    }

    .quote-review-card .quote-items-table tfoot th:last-child::before {
        content: attr(data-label);
        color: var(--a75-muted);
        text-align: left;
    }
}

/* ===== CR-G: catalog enhancement (additive) ===== */
.goal-accent-neutral { --goal-accent: #737373; --goal-ink: #3f3f46; }
.goal-accent-blue { --goal-accent: #2563eb; --goal-ink: #1e40af; }
.goal-accent-orange { --goal-accent: #ea580c; --goal-ink: #9a3412; }
.goal-accent-light-green { --goal-accent: #4ade80; --goal-ink: #166534; }
.goal-accent-green { --goal-accent: #16a34a; --goal-ink: #166534; }
.goal-accent-soft-blue { --goal-accent: #60a5fa; --goal-ink: #1e40af; }
.goal-accent-teal { --goal-accent: #0d9488; --goal-ink: #115e59; }
.goal-accent-dark-red { --goal-accent: #b91c1c; --goal-ink: #991b1b; }
.goal-accent-lavender { --goal-accent: #a78bfa; --goal-ink: #5b21b6; }
.goal-accent-purple { --goal-accent: #7c3aed; --goal-ink: #5b21b6; }
.goal-accent-burgundy { --goal-accent: #9f1239; --goal-ink: #881337; }
.goal-accent-amber { --goal-accent: #d97706; --goal-ink: #92400e; }
.goal-accent-bronze { --goal-accent: #a16207; --goal-ink: #713f12; }
.goal-accent-gold { --goal-accent: #ca8a04; --goal-ink: #854d0e; }
.goal-accent-yellow { --goal-accent: #eab308; --goal-ink: #713f12; }
.goal-accent-rose { --goal-accent: #e11d48; --goal-ink: #9f1239; }

.goal-chip {
    border-color: color-mix(in srgb, var(--goal-accent, #737373) 34%, var(--a75-border));
    background: color-mix(in srgb, var(--goal-accent, #737373) 9%, white);
    color: var(--goal-ink, var(--a75-ink));
}
.goal-chip svg { flex: 0 0 auto; }
.admin-tag-icon-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    margin-top: .75rem;
}
.admin-tag-icon-list > span {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    padding: .4rem .5rem;
    border: 1px solid var(--a75-border);
    border-radius: .5rem;
    background: var(--a75-surface);
    font-size: .75rem;
}
.admin-tag-icon-list b { display: inline-flex; color: var(--a75-ink); }

/* Shared product-card identity. Accents stay limited to edges, icons and a
   light image treatment so the catalog remains calm and research-neutral. */
.product-card[class*="goal-accent-"] {
    position: relative;
    border-top: 3px solid var(--goal-accent, #737373);
}
.product-card[class*="goal-accent-"] .img-wrap {
    position: relative;
    background: linear-gradient(145deg, color-mix(in srgb, var(--goal-accent, #737373) 8%, #fff), #f5f5f4 72%);
}
.product-card .product-goal-icon {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 2rem;
    height: 2rem;
    border: 1px solid color-mix(in srgb, var(--goal-accent, #737373) 32%, #fff);
    border-radius: .65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--goal-ink, #3f3f46);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 4px 12px rgba(24, 24, 27, .08);
}
.product-card .product-research-class,
.product-card .product-relationship-note {
    margin: 0;
    color: var(--goal-ink, #52525b);
    font-size: .75rem;
    font-weight: 650;
    line-height: 1.4;
}
.product-card .goal-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.product-card .goal-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.product-card .goal-tag svg {
    width: .8rem;
    height: .8rem;
}
.product-card .goal-tag.is-primary {
    color: var(--goal-ink, #3f3f46);
    background: color-mix(in srgb, var(--goal-accent, #737373) 12%, #fff);
}
.product-card .product-video-link {
    min-height: 44px;
    align-self: flex-start;
    border: 0;
    background: transparent;
    padding: .4rem 0;
    color: var(--goal-ink, var(--a75-primary));
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .2rem;
    cursor: pointer;
}
.product-video-link-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: .2rem;
    border: 1px solid color-mix(in srgb, var(--a75-primary) 38%, var(--a75-border));
    border-radius: .55rem;
    background: #fff;
    padding: .65rem .9rem;
    color: var(--a75-primary);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}
.product-video-link-detail:hover,
.product-video-link-detail:focus-visible {
    background: color-mix(in srgb, var(--a75-primary) 7%, #fff);
}
.product-video-modal[hidden] { display: none; }
.product-video-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}
.product-video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 18, 20, .74);
    backdrop-filter: blur(3px);
}
.product-video-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(52rem, 100%);
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 1rem;
    background: #fff;
    padding: clamp(1rem, 3vw, 1.75rem);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .34);
    outline: 0;
}
.product-video-modal-dialog h2 { margin: .25rem 5rem .15rem 0; }
.product-video-modal-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 44px;
    min-height: 44px;
    padding: .45rem .7rem;
    border: 1px solid var(--a75-border);
    border-radius: 999px;
    background: #fff;
    color: var(--a75-ink);
    font-size: .82rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
}
.product-video-frame {
    overflow: hidden;
    margin: 1rem 0;
    border-radius: .8rem;
    background: #0d0d0f;
    aspect-ratio: 16 / 9;
}
.product-video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-video-disclosure {
    padding: .75rem;
    border-left: 3px solid var(--a75-primary);
    background: color-mix(in srgb, var(--a75-primary) 5%, #fff);
    color: var(--a75-muted);
    font-size: .83rem;
    line-height: 1.55;
}
.product-video-transcript {
    margin: 1rem 0;
    padding-top: .9rem;
    border-top: 1px solid var(--a75-border);
}
.product-video-transcript summary { min-height: 44px; display: flex; align-items: center; color: var(--a75-ink); font-weight: 750; cursor: pointer; }
.product-video-transcript p { white-space: pre-line; }
.product-video-modal-open { overflow: hidden; }
.product-video-admin-panel { scroll-margin-top: 1rem; }
.product-video-admin-head,
.product-video-current,
.product-video-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.product-video-admin-head > div,
.product-video-current > * { min-width: 0; }
.product-video-usage {
    margin: .75rem 0 1rem;
    color: var(--a75-muted);
    font-size: .88rem;
}
.product-video-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--a75-border);
}
.product-video-form input[type="file"] { width: 100%; }
.product-video-current {
    align-items: center;
    padding: .85rem 1rem;
}
.product-video-attestation {
    max-width: 46rem;
    align-items: flex-start;
}
.product-video-actions {
    align-items: flex-end;
    margin-top: 1rem;
}
.product-video-actions form { margin: 0; }

@media (max-width: 767px) {
    .product-video-modal { padding: .75rem; }
    .product-video-modal-dialog {
        max-height: calc(100vh - 1.5rem);
        border-radius: .8rem;
    }
    .product-video-actions,
    .product-video-actions form,
    .product-video-actions .btn { width: 100%; }
}

/* ==================================================
   SHIPPED ORDERS REPORT
   ================================================== */
.shipped-report-page { min-width: 0; }
.shipped-report-page h2 { font-size: 1.35rem; line-height: 1.35; margin: 0 0 .3rem; }
.shipped-report-header,
.shipped-report-results-head,
.shipped-report-pagination {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}
.shipped-report-header h1 { margin: 0; }
.shipped-report-header p { margin: .35rem 0 0; }
.shipped-report-count {
    padding: .5rem .8rem;
    border-radius: 999px;
    background: var(--a75-surface);
    font-weight: 700;
}
.shipped-report-help { margin: 1rem 0; padding: 1rem 1.25rem; }
.shipped-report-help summary { cursor: pointer; font-weight: 700; }
.shipped-report-help p { max-width: 80ch; margin: .8rem 0 0; line-height: 1.6; }
.shipped-report-filters { padding: 1.25rem; }
.shipped-report-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
}
.shipped-report-filter-grid label { display: grid; gap: .35rem; min-width: 0; font-weight: 600; }
.shipped-report-timezone { display: grid; align-content: center; gap: .2rem; min-width: 0; overflow-wrap: anywhere; }
.shipped-report-timezone small { display: block; }
.shipped-report-filter-grid input,
.shipped-report-filter-grid select { width: 100%; min-width: 0; }
.shipped-report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.shipped-report-filters .shipped-report-actions { margin-top: 1rem; }
.shipped-report-message { margin-top: 1rem; padding: 1.2rem; }
.shipped-report-error { border-color: var(--a75-accent); color: var(--a75-ink); }
.shipped-report-undated {
    margin: 1rem 0;
    padding: .85rem 1rem;
    border-left: 4px solid var(--a75-accent);
    border-radius: .45rem;
    background: var(--a75-surface);
}
.shipped-report-results-head { margin: 1.5rem 0 .75rem; align-items: center; }
.shipped-report-results-head h2,
.shipped-report-totals h2 { margin: 0; }
.shipped-report-results-head p { margin: .2rem 0 0; }
.shipped-report-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.shipped-report-table-wrap:focus-visible { outline: 3px solid var(--a75-accent); outline-offset: 3px; }
.admin-main .shipped-report-table-wrap .shipped-report-table { display: table; width: max-content; min-width: 100%; }
.shipped-report-table th { white-space: nowrap; }
.shipped-report-table td { max-width: 22rem; vertical-align: top; }
.shipped-report-table .shipped-report-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.shipped-report-products { white-space: pre-line; }
.shipped-report-totals { margin-top: 1.5rem; }
.shipped-report-totals h2 small { display: block; margin: .25rem 0 .8rem; color: var(--a75-muted); font-size: .85rem; font-weight: 400; }
.shipped-report-total-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.shipped-report-total-grid article { padding: 1rem; }
.shipped-report-total-grid h3 { margin: 0 0 .8rem; }
.shipped-report-total-grid dl { margin: 0; }
.shipped-report-total-grid dl div { display: flex; justify-content: space-between; gap: .8rem; padding: .3rem 0; border-bottom: 1px solid var(--a75-border); }
.shipped-report-total-grid dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.shipped-report-pagination { justify-content: flex-end; align-items: center; margin-top: 1.2rem; }
@media (max-width: 1000px) { .shipped-report-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .shipped-report-filter-grid { grid-template-columns: 1fr; }
    .shipped-report-actions .btn { flex: 1 1 auto; justify-content: center; }
}
.site-banner-strips {
    position: relative;
    z-index: 1010;
    width: 100%;
}
.site-banner-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: .45rem 1rem;
    text-align: center;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1.35;
}
.site-banner-strip-info {
    background: #18181b;
    color: #fff;
}
.site-banner-strip-promo {
    background: var(--a75-primary);
    color: #fff;
}
.site-banner-strip a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .2rem;
}
.site-banner-admin-head { align-items: flex-start; }
.site-banner-admin-head h2,
.site-banner-form h3 { margin: .15rem 0 .25rem; }
.site-banner-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.site-banner-form {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--a75-border);
    border-radius: .8rem;
    background: color-mix(in srgb, var(--a75-surface) 92%, #f4f4f5);
}
.site-banner-form > label:not(.checkbox) {
    display: grid;
    gap: .4rem;
}
.site-banner-form input:not([type="checkbox"]) { width: 100%; }
.site-banner-form .btn { align-self: flex-start; }
@media (max-width: 767px) {
    .site-banner-admin-grid { grid-template-columns: 1fr; }
    .site-banner-strip { min-height: 44px; padding-inline: .75rem; }
}
.faq-hero .section-eyebrow { margin-bottom: .65rem; }
.faq-layout {
    display: grid;
    grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.25rem, 4vw, 3rem);
}
.faq-layout-empty { grid-template-columns: minmax(0, 1fr); }
.faq-layout-empty .faq-content { width: min(100%, 52rem); margin-inline: auto; }
.faq-jump {
    position: sticky;
    top: 6rem;
    display: grid;
    gap: .35rem;
    padding: 1rem;
}
.faq-jump strong { margin-bottom: .35rem; }
.faq-jump a {
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: .5rem;
    padding: .5rem .65rem;
    color: var(--a75-muted);
    font-weight: 700;
}
.faq-jump a:hover,
.faq-jump a:focus-visible { background: var(--a75-primary-soft); color: var(--a75-primary-dark); }
.faq-content { min-width: 0; }
.faq-group {
    scroll-margin-top: 6rem;
    padding-bottom: 2rem;
}
.faq-group + .faq-group { padding-top: 1.25rem; border-top: 1px solid var(--a75-border); }
.faq-group h2 { margin: .25rem 0 1rem; }
.faq-accordion { display: grid; gap: .75rem; }
.faq-accordion details {
    overflow: clip;
    border: 1px solid var(--a75-border);
    border-radius: .75rem;
    background: #fff;
}
.faq-accordion summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: .9rem 3.25rem .9rem 1rem;
    color: var(--a75-ink);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary::after {
    content: '+';
    position: absolute;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--a75-primary-soft);
    color: var(--a75-primary-dark);
    font-size: 1.2rem;
}
.faq-accordion details[open] summary::after { content: '−'; }
.faq-accordion summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--a75-primary) 35%, transparent); outline-offset: -3px; }
.faq-answer { padding: 0 1rem 1rem; color: var(--a75-muted); line-height: 1.65; }
.faq-answer p { margin: .75rem 0 0; }
.faq-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: clamp(1rem, 3vw, 1.5rem);
}
.faq-contact h2 { margin: .2rem 0 .35rem; }
.faq-research-line { margin: 1.25rem 0 0; color: var(--a75-muted); font-size: .82rem; }
.faq-admin-editor-head { align-items: flex-start; }
.faq-admin-editor h2,
.faq-admin-list h2 { margin: .2rem 0 .3rem; }
.faq-admin-editor form {
    display: flex;
    flex-direction: column;
}
.faq-admin-editor form > label:not(.checkbox) {
    display: grid;
    gap: .4rem;
}
.faq-admin-editor form input:not([type="checkbox"]),
.faq-admin-editor form select,
.faq-admin-editor form textarea { width: 100%; }
.faq-admin-editor form > .btn { align-self: flex-start; }
.faq-admin-group + .faq-admin-group { margin-top: 1.5rem; }
.faq-admin-group h3 { margin-bottom: .65rem; }
.faq-admin-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.faq-admin-actions form { margin: 0; }
@media (max-width: 767px) {
    .faq-layout { grid-template-columns: 1fr; }
    .faq-jump {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .faq-jump strong { grid-column: 1 / -1; }
    .faq-contact { align-items: flex-start; flex-direction: column; }
    .faq-contact .btn { width: 100%; }
}

/* CR-G G10 / CR-F F2 absorption: retain two catalog cards per row on
   phones, then compact card internals without removing any information or
   action. All interactive card controls keep a 44px touch target. */
@media (max-width: 559.98px) {
    .shop-main .shop-grid,
    .grid.grid-4.rail-fixed-cols,
    .related-section .related-grid,
    .grid.grid-4.top-sellers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
    }
    .product-card .img-wrap,
    .peptide-card .img-wrap { padding: .65rem; }
    .product-card .body,
    .peptide-card .body {
        gap: .38rem;
        padding: .65rem .65rem .8rem;
    }
    .product-card .card-name,
    .peptide-card .card-name,
    .product-card h3,
    .peptide-card h3 {
        overflow-wrap: anywhere;
        font-size: .9rem;
        line-height: 1.25;
    }
    .product-card .card-desc,
    .peptide-card .card-desc,
    .product-card .product-research-class,
    .product-card .product-relationship-note {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: .7rem;
        line-height: 1.35;
    }
    .product-card .goal-tag-row { gap: .2rem; }
    .product-card .goal-tag,
    .peptide-card .goal-tag {
        max-width: 100%;
        padding: .12rem .35rem;
        font-size: .6rem;
    }
    .product-card .goal-tag span { overflow-wrap: anywhere; }
    .product-card .size-option-chips { gap: .25rem; }
    .product-card .size-option-chip {
        min-height: 44px;
        padding: .2rem .42rem;
        font-size: .63rem;
    }
    .product-card .coa-link,
    .product-card .product-video-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        font-size: .68rem;
        line-height: 1.25;
    }
    .product-card .price-row,
    .peptide-card .price-row {
        flex-wrap: wrap;
        gap: .25rem;
    }
    .product-card .price,
    .peptide-card .price { font-size: 1.2rem; }
    .product-card .price-row .muted,
    .peptide-card .price-row .muted { font-size: .68rem; }
    .product-card .card-cta-row { gap: .35rem; }
    .product-card .card-cta-cart.btn-cta-icon {
        width: 100%;
        min-height: 44px;
    }
    .product-card .card-cta-row { flex-direction: column; }
    .product-card .card-cta-cart-form { width: 100%; }
    .product-card .card-cta-buy {
        min-height: 44px;
        padding-inline: .4rem;
        font-size: .75rem;
    }
}

/* ===== Affiliate A7: referral materials, QR and flyer ===== */
.affiliate-material-builder {
    border-top: 4px solid var(--a75-primary, #d11f2a);
}

.affiliate-material-builder h2,
.affiliate-material-link-card h2,
.affiliate-material-qr-card h2,
.affiliate-brand-downloads h2 {
    margin: .2rem 0 .35rem;
}

.affiliate-material-form {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 1rem;
}

.affiliate-material-output-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr);
    gap: 1rem;
}

.affiliate-material-link-card code {
    display: block;
    padding: 1rem;
    overflow-wrap: anywhere;
    border: 1px solid var(--a75-border, #e5e7eb);
    border-radius: .7rem;
    background: var(--a75-surface-soft, #fafafa);
}

.affiliate-material-qr-card {
    justify-items: center;
    text-align: center;
}

.affiliate-material-qr-card img {
    width: min(240px, 100%);
    height: auto;
    aspect-ratio: 1;
    padding: .5rem;
    border: 1px solid var(--a75-border, #e5e7eb);
    border-radius: .75rem;
    background: #fff;
}

.affiliate-material-actions,
.affiliate-brand-downloads {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.affiliate-copy-card p {
    margin: 0;
}

.affiliate-flyer-page {
    min-height: 100vh;
    margin: 0;
    padding: 2rem;
    background: #f5f3f1;
    color: #171717;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.affiliate-flyer {
    display: grid;
    gap: 1.7rem;
    width: min(820px, 100%);
    min-height: min(1020px, calc(100vh - 4rem));
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 4rem);
    border: 1px solid #e6d8d4;
    border-top: 9px solid #c92b2b;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 18px 50px rgba(31, 20, 18, .12);
}

.affiliate-flyer header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid #eadfdb;
    color: #6f625f;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.affiliate-flyer header img {
    width: min(210px, 52%);
    height: auto;
}

.affiliate-flyer-copy {
    align-self: center;
}

.affiliate-flyer-copy h1 {
    max-width: 13ch;
    margin: .3rem 0 1rem;
    color: #1c1917;
    font-size: clamp(2.25rem, 6vw, 4.6rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.affiliate-flyer-copy > p:last-child {
    max-width: 56ch;
    color: #6b625f;
    font-size: 1.05rem;
    line-height: 1.65;
}

.affiliate-flyer-qr {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: center;
    gap: 1.6rem;
    padding: 1.35rem;
    border-radius: 1rem;
    background: #fff3f1;
}

.affiliate-flyer-qr > img {
    width: 210px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    padding: .45rem;
    border-radius: .65rem;
    background: #fff;
}

.affiliate-flyer-qr h2 {
    margin: 0 0 .7rem;
    font-size: 1.6rem;
}

.affiliate-flyer-qr code {
    display: block;
    overflow-wrap: anywhere;
    color: #7f1d1d;
}

.affiliate-flyer footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    align-self: end;
    padding-top: 1.2rem;
    border-top: 1px solid #eadfdb;
    color: #292524;
    font-size: .78rem;
    letter-spacing: .06em;
    text-align: center;
}

.affiliate-flyer-print {
    justify-self: center;
}

@media (max-width: 767px) {
    .affiliate-material-form,
    .affiliate-material-output-grid {
        grid-template-columns: 1fr;
    }

    .affiliate-material-form .btn,
    .affiliate-material-actions .btn,
    .affiliate-material-actions .btn-outline,
    .affiliate-brand-downloads .btn {
        width: 100%;
        justify-content: center;
    }

    .affiliate-flyer-page {
        padding: .75rem;
    }

    .affiliate-flyer {
        min-height: calc(100vh - 1.5rem);
        gap: 1.25rem;
        padding: 1.25rem;
        border-radius: .7rem;
    }

    .affiliate-flyer header,
    .affiliate-flyer footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .affiliate-flyer-qr {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

@media print {
    @page {
        size: letter portrait;
        margin: .35in;
    }

    .affiliate-flyer-page {
        min-height: 0;
        padding: 0;
        background: #fff;
    }

    .affiliate-flyer {
        width: 100%;
        min-height: 9.9in;
        max-height: 9.9in;
        padding: .4in;
        border-radius: 0;
        box-shadow: none;
        break-inside: avoid;
    }

    .affiliate-flyer-copy h1 {
        font-size: 42pt;
    }

    .affiliate-flyer-print {
        display: none !important;
    }
}

.shop-browse .container { text-align: left; }
.shop-browse .shop-hero-title { margin-bottom: .45rem; }
.browse-search { max-width: 58rem; }
.browse-search > label,
.browse-filter-form legend {
    display: block;
    margin-bottom: .4rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.browse-search > label { color: #fff; }
.browse-filter-form legend { color: var(--a75-ink); }
.browse-search-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    padding: .45rem;
    border: 1px solid var(--a75-border);
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 8px 24px rgba(24, 24, 27, .07);
}
.browse-search-control > span { display: inline-flex; color: var(--a75-muted); }
.browse-search-control input {
    min-width: 0;
    min-height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
}
.browse-cards {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .65rem;
}
.browse-card {
    position: relative;
    min-height: 7.75rem;
    padding: .9rem;
    border: 2px solid color-mix(in srgb, var(--goal-accent, #737373) 24%, #e7e5e4);
    border-radius: .85rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .65rem;
    color: var(--a75-ink);
    background: #fff;
    text-decoration: none;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.browse-card:hover,
.browse-card:focus-visible {
    border-color: var(--goal-accent, var(--a75-primary));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--goal-accent, #737373) 14%, transparent);
    transform: translateY(-2px);
}
.browse-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--goal-accent, #737373) 28%, transparent); outline-offset: 2px; }
.browse-card.is-selected {
    border-color: var(--goal-accent, var(--a75-primary));
    background: color-mix(in srgb, var(--goal-accent, #737373) 8%, #fff);
}
.browse-card-icon {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .7rem;
    color: var(--goal-ink, #3f3f46);
    background: color-mix(in srgb, var(--goal-accent, #737373) 12%, #fff);
}
.browse-card-copy { display: flex; flex-direction: column; gap: .18rem; line-height: 1.25; }
.browse-card-copy small { color: var(--a75-muted); font-size: .72rem; }
.browse-card-check {
    position: absolute;
    top: .65rem;
    right: .65rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--goal-ink, #3f3f46);
    font-size: .75rem;
    font-weight: 900;
}
.browse-card.is-selected .browse-card-check { display: inline-flex; }
.browse-more {
    border: 1px solid var(--a75-border);
    border-radius: .85rem;
    background: #fff;
}
.browse-more > summary {
    min-height: 48px;
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--a75-ink);
    font-weight: 750;
    cursor: pointer;
}
.browse-more > summary span {
    padding: .18rem .55rem;
    border-radius: 999px;
    color: var(--a75-muted);
    background: var(--a75-surface);
    font-size: .72rem;
}
.browse-filter-form { padding: 0 1rem 1rem; }
.browse-filter-form fieldset { margin: 0 0 1rem; padding: 0; border: 0; }
.browse-goal-pills,
.browse-checks,
.browse-filter-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.browse-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: .85rem;
}
.browse-filter-grid label { display: grid; gap: .35rem; color: var(--a75-ink); font-size: .78rem; font-weight: 700; }
.browse-filter-grid select,
.browse-filter-grid input { width: 100%; min-height: 44px; }
.browse-checks { margin-bottom: .85rem; }
.browse-checks label { min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; color: var(--a75-ink); }
.browse-results-count { margin: 0; color: #fff; font-size: .84rem; font-weight: 700; }

@media (max-width: 1100px) {
    .browse-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .browse-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559.98px) {
    .browse-search-control { grid-template-columns: auto minmax(0, 1fr); }
    .browse-search-control .btn { grid-column: 1 / -1; width: 100%; }
    .browse-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .browse-card { min-height: 7rem; padding: .75rem; }
    .browse-filter-grid { grid-template-columns: 1fr; }
    .browse-filter-actions .btn { flex: 1 1 calc(50% - .55rem); }
}

.product-detail-image[class*="goal-accent-"] {
    position: relative;
    border-top: 4px solid var(--goal-accent, #737373);
    background: radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--goal-accent, #737373) 10%, transparent), transparent 42%), #f5f5f4;
}
.product-detail-goal-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    width: 3rem;
    height: 3rem;
    border-radius: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--goal-ink, #3f3f46);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 20px rgba(24, 24, 27, .1);
}
.product-detail-class,
.product-detail-alias { margin: 0; }
.product-detail-class {
    color: var(--goal-ink, var(--a75-muted));
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.product-research-panel,
.product-specs {
    padding: 1rem;
    border: 1px solid var(--a75-border);
    border-radius: .75rem;
    background: var(--a75-surface);
}
.product-research-panel h2 {
    margin: 0 0 .45rem;
    font-size: 1rem;
}
.product-research-panel p { margin: 0; line-height: 1.6; }
.product-specs { display: grid; gap: .65rem; }
.product-specs > div {
    display: grid;
    grid-template-columns: minmax(7rem, .45fr) 1fr;
    gap: .75rem;
    align-items: baseline;
}
.product-specs strong { color: var(--a75-ink); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.product-specs span { color: var(--a75-muted); }
/* ===== Affiliate module =====
   Public application and staff review surfaces reuse the production card,
   form, table, pill, and button primitives; these rules only define their
   responsive composition and Affiliate-specific hierarchy. */
.affiliate-apply-page,
.affiliate-terms-page,
.affiliate-admin-page {
    --affiliate-soft: #fff5f4;
    --affiliate-border: #efcfcc;
}

.affiliate-launch-card,
.affiliate-success-card {
    max-width: 760px;
    margin: 1.5rem auto 0;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.affiliate-launch-card h2,
.affiliate-success-card h2,
.affiliate-form-section h2,
.affiliate-list-heading h2,
.affiliate-review-heading h2,
.affiliate-dark-launch-note h2 {
    margin: .2rem 0 .45rem;
}

.affiliate-success-icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    background: #e9f7ec;
    color: #197b35;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.affiliate-next-steps {
    display: grid;
    gap: .75rem;
    padding-left: 1.25rem;
    margin: 1.25rem 0;
}

.affiliate-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.affiliate-steps article {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem;
}

.affiliate-steps article > span {
    display: grid;
    place-items: center;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--a75-primary);
    color: #fff;
    font-weight: 800;
}

.affiliate-steps strong,
.affiliate-steps small {
    display: block;
}

.affiliate-steps small {
    color: var(--a75-muted);
    margin-top: .15rem;
}

.affiliate-application-form {
    max-width: 920px;
    margin: 0 auto;
    gap: 1.25rem;
}

.affiliate-form-section {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--a75-border);
}

.affiliate-form-section legend {
    padding: 0 .4rem;
    font-size: 1.2rem;
    font-weight: 800;
}

.affiliate-form-section > * + * {
    margin-top: 1rem;
}

.affiliate-form-section textarea {
    resize: vertical;
}

.affiliate-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.affiliate-account-note,
.affiliate-terms-evidence,
.affiliate-approved-link {
    padding: .9rem 1rem;
    border: 1px solid var(--affiliate-border);
    border-radius: var(--a75-radius-sm, 10px);
    background: var(--affiliate-soft);
}

.affiliate-privacy-note,
.affiliate-signin-note {
    font-size: .86rem;
}

.affiliate-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.affiliate-terms-copy {
    max-width: 900px;
    margin: 1.5rem auto 0;
    padding: clamp(1.5rem, 4vw, 3rem);
    line-height: 1.72;
}

.affiliate-terms-copy h2 {
    font-size: 1.12rem;
    margin: 2rem 0 .5rem;
}

.affiliate-terms-copy li + li {
    margin-top: .55rem;
}

.affiliate-terms-meta,
.affiliate-terms-compliance {
    padding: 1rem;
    border-radius: var(--a75-radius-sm, 10px);
    background: var(--affiliate-soft);
}

.affiliate-admin-search {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: end;
    gap: .75rem;
    padding: 1rem;
}

.affiliate-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.affiliate-kpi-link {
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-lg);
}

.affiliate-kpi-link:focus-visible {
    outline: 3px solid rgba(197, 48, 43, .28);
    outline-offset: 3px;
}

.affiliate-kpi-link .card {
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease;
}

.affiliate-kpi-link:hover .card {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.affiliate-kpi-link.is-warning .card {
    border-color: #f4d9b3;
    background: var(--a75-warning-soft);
}

.affiliate-kpi-link.is-warning .value {
    color: var(--a75-warning);
}

.affiliate-payout-selection {
    margin: 0;
    padding: .75rem 1rem;
    border-radius: var(--radius-md);
    background: var(--surface-soft);
    font-weight: 700;
}

.affiliate-dark-launch-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
}

.affiliate-list-heading,
.affiliate-review-heading {
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.affiliate-status-legend {
    color: var(--a75-muted);
    font-size: .85rem;
}

.affiliate-status-with-date {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
}

.affiliate-status-with-date small {
    color: var(--a75-muted);
    white-space: nowrap;
}

.affiliate-review-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 1.25rem;
}

.affiliate-review-grid > section,
.affiliate-review-actions > form,
.affiliate-review-note {
    padding: 1.15rem;
    border: 1px solid var(--a75-border);
    border-radius: var(--a75-radius-sm, 10px);
    background: #fff;
}

.affiliate-review-grid h3,
.affiliate-review-note p {
    margin: 0 0 .75rem;
}

.affiliate-detail-list {
    margin: 0;
}

.affiliate-detail-list > div {
    display: grid;
    grid-template-columns: minmax(110px, .35fr) minmax(0, .65fr);
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--a75-border);
}

.affiliate-detail-list > div:last-child {
    border-bottom: 0;
}

.affiliate-detail-list dt {
    color: var(--a75-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.affiliate-detail-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.affiliate-terms-evidence {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
}

.affiliate-review-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.affiliate-review-actions > form:first-child:not(.card) {
    grid-column: 1 / -1;
}

.affiliate-decision-buttons {
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .affiliate-steps,
    .affiliate-kpi-grid,
    .affiliate-review-grid,
    .affiliate-review-actions {
        grid-template-columns: 1fr;
    }

    .affiliate-admin-search {
        grid-template-columns: 1fr;
    }

    .affiliate-admin-search .btn,
    .affiliate-submit-row .btn,
    .affiliate-success-actions .btn,
    .affiliate-decision-buttons .btn {
        width: 100%;
    }

    .affiliate-submit-row,
    .affiliate-dark-launch-note,
    .affiliate-success-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .affiliate-detail-list > div {
        grid-template-columns: 1fr;
        gap: .2rem;
    }
}

@media (max-width: 430px) {
    .affiliate-launch-card,
    .affiliate-success-card,
    .affiliate-form-section,
    .affiliate-terms-copy {
        padding: 1.1rem;
    }

    .affiliate-steps {
        gap: .65rem;
    }

    .affiliate-steps article {
        padding: .85rem;
    }
}
/* ===== Affiliate A5: customer account dashboard ===== */
.affiliate-account-page .a75-page-hero {
    margin-bottom: 1.25rem;
}

.affiliate-account-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--a75-border, #e5e7eb);
}

.affiliate-account-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: .65rem 1rem;
    border: 1px solid var(--a75-border, #e5e7eb);
    border-radius: .7rem;
    background: #fff;
    color: var(--a75-text, #171717);
    font-weight: 700;
    text-decoration: none;
}

.affiliate-account-nav a:hover,
.affiliate-account-nav a:focus-visible {
    border-color: var(--a75-primary, #d11f2a);
    color: var(--a75-primary-dark, #991b1b);
}

.affiliate-account-nav a.is-active {
    border-color: var(--a75-primary, #d11f2a);
    background: var(--a75-primary, #d11f2a);
    color: #fff;
}

.affiliate-link-hero {
    display: grid;
    gap: 1.25rem;
    border-top: 4px solid var(--a75-primary, #d11f2a);
}

.affiliate-link-heading,
.affiliate-payout-eligibility,
.affiliate-list-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.affiliate-link-heading h2,
.affiliate-payout-eligibility h2,
.affiliate-list-heading h2 {
    margin: .2rem 0 .3rem;
}

.affiliate-copy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.affiliate-copy-card {
    display: grid;
    align-content: start;
    gap: .65rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--a75-border, #e5e7eb);
    border-radius: .8rem;
    background: var(--a75-surface-soft, #fafafa);
}

.affiliate-copy-card > span {
    color: var(--a75-muted, #6b7280);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.affiliate-copy-card code {
    display: block;
    max-width: 100%;
    padding: .75rem;
    overflow-wrap: anywhere;
    border-radius: .55rem;
    background: #fff;
    color: var(--a75-text, #171717);
}

.affiliate-copy-card .btn {
    justify-self: start;
}

.affiliate-help-line {
    margin: 0;
    padding: .85rem 1rem;
    border-left: 3px solid var(--a75-info, #2563eb);
    border-radius: .35rem;
    background: #eff6ff;
    color: #1e3a5f;
}

.affiliate-report-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    align-items: end;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--a75-border, #e5e7eb);
    border-radius: .8rem;
    background: #fff;
}

.affiliate-report-filters label,
.affiliate-report-filters input,
.affiliate-report-filters select {
    min-width: 0;
    width: 100%;
}

.affiliate-report-filters label {
    gap: .35rem;
}

.affiliate-report-filters label[hidden] {
    display: none;
}

.affiliate-report-pagination,
.affiliate-report-pagination > .row {
    flex-wrap: wrap;
    gap: .7rem;
}

.affiliate-account-page [data-affiliate-qr-tools] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-align: left;
}

.affiliate-account-page [data-affiliate-qr-tools] img {
    flex: 0 0 180px;
    width: 180px;
}

.affiliate-account-page [data-affiliate-qr-tools] .row {
    flex-wrap: wrap;
    gap: .6rem;
}

@media (max-width: 560px) {
    /* Keep the performance figures close to the top on phones. Both menus
       retain every destination and scroll horizontally with keyboard focus. */
    .affiliate-account-page .account-sidebar {
        padding: .5rem;
        min-width: 0;
    }

    .affiliate-account-page .account-sidebar nav ul {
        display: flex;
        gap: .3rem;
        overflow-x: auto;
    }

    .affiliate-account-page .account-sidebar nav li {
        flex: 0 0 auto;
    }

    .affiliate-account-page .account-sidebar-divider {
        display: none;
    }

    .affiliate-account-page .account-sidebar-link {
        white-space: nowrap;
    }

    .affiliate-account-page .affiliate-account-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .affiliate-account-page .affiliate-account-nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .affiliate-account-page .affiliate-account-kpis.grid-4,
    .affiliate-account-page .affiliate-account-kpis.grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
    }

    .affiliate-account-page .affiliate-account-kpis .kpi {
        padding: .9rem;
        overflow-wrap: anywhere;
    }

    .affiliate-account-page .affiliate-account-kpis .kpi .value {
        font-size: clamp(1.1rem, 5vw, 1.45rem);
    }

    .affiliate-account-page [data-affiliate-qr-tools] {
        flex-direction: column;
        align-items: center;
    }

    .affiliate-account-page [data-affiliate-qr-tools] .row {
        justify-content: center;
    }
}

.affiliate-window-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.affiliate-account-kpis {
    gap: 1rem;
}

.affiliate-account-kpis .kpi .value {
    font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.affiliate-payout-eligibility {
    align-items: center;
}

.affiliate-payout-eligibility p {
    margin: 0;
    max-width: 70ch;
}

.affiliate-order-preview-list {
    display: grid;
}

.affiliate-order-preview-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 0;
    border-top: 1px solid var(--a75-border, #e5e7eb);
}

.affiliate-order-preview-list article:first-child {
    border-top: 0;
}

.affiliate-order-preview-list article > div {
    display: grid;
    gap: .25rem;
}

.affiliate-order-preview-list article > div:last-child {
    justify-items: end;
}

.affiliate-order-preview-list small,
.affiliate-table-note {
    display: block;
    color: var(--a75-muted, #6b7280);
}

.affiliate-order-filters {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.affiliate-order-filters form {
    align-items: flex-end;
    flex-wrap: wrap;
}

.affiliate-order-filters label {
    min-width: 210px;
}

.affiliate-orders-table {
    min-width: 980px;
}

.affiliate-orders-table td {
    vertical-align: top;
}

.affiliate-table-note {
    max-width: 180px;
    margin-top: .35rem;
    font-size: .78rem;
}

@media (max-width: 900px) {
    .affiliate-copy-grid,
    .affiliate-account-kpis.grid-4,
    .affiliate-account-kpis.grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .affiliate-account-nav {
        display: grid;
        grid-template-columns: 1fr;
    }

    .affiliate-account-nav a {
        justify-content: center;
    }

    .affiliate-copy-grid,
    .affiliate-account-kpis.grid-4,
    .affiliate-account-kpis.grid-3 {
        grid-template-columns: 1fr;
    }

    .affiliate-link-heading,
    .affiliate-payout-eligibility,
    .affiliate-list-heading,
    .affiliate-order-preview-list article {
        align-items: stretch;
        flex-direction: column;
    }

    .affiliate-payout-eligibility .btn,
    .affiliate-list-heading .btn,
    .affiliate-copy-card .btn {
        width: 100%;
        justify-content: center;
    }

    .affiliate-order-preview-list article > div:last-child {
        justify-items: start;
    }
}

/* ===== Affiliate A6: staff management and accounting ===== */
.affiliate-admin-page .affiliate-kpi-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.affiliate-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.affiliate-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 1px solid var(--a75-border, #e5e7eb);
    border-radius: .7rem;
    background: var(--a75-surface-soft, #fafafa);
}

.affiliate-toggle-row input {
    margin-top: .25rem;
}

.affiliate-toggle-row span,
.affiliate-readonly-account {
    display: grid;
    gap: .18rem;
}

.affiliate-toggle-row small,
.affiliate-readonly-account small {
    color: var(--a75-muted, #6b7280);
}

.affiliate-row-actions,
.affiliate-detail-actions,
.affiliate-report-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.affiliate-detail-hero,
.affiliate-ledger-alert {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-left: 4px solid var(--a75-primary, #d11f2a);
}

.affiliate-detail-hero h2,
.affiliate-ledger-alert h2,
.affiliate-ledger-alert p {
    margin: .2rem 0;
}

.affiliate-admin-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.affiliate-readonly-account,
.affiliate-private-note {
    padding: 1rem;
    border: 1px solid var(--affiliate-border, #efcfcc);
    border-radius: .7rem;
    background: var(--affiliate-soft, #fff5f4);
}

.affiliate-coupon-list {
    display: grid;
    gap: .55rem;
}

.affiliate-coupon-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem;
    border: 1px solid var(--a75-border, #e5e7eb);
    border-radius: .65rem;
}

.affiliate-coupon-list span {
    color: var(--a75-muted, #6b7280);
    font-size: .82rem;
}

.affiliate-timeline {
    display: grid;
    gap: 0;
    border-left: 2px solid var(--a75-border, #e5e7eb);
    margin-left: .45rem;
}

.affiliate-timeline article {
    position: relative;
    display: grid;
    gap: .3rem;
    padding: .15rem 0 1.15rem 1.25rem;
}

.affiliate-timeline article::before {
    content: '';
    position: absolute;
    left: -.43rem;
    top: .35rem;
    width: .72rem;
    height: .72rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--a75-primary, #d11f2a);
    box-shadow: 0 0 0 1px var(--a75-border, #e5e7eb);
}

.affiliate-timeline article > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.affiliate-timeline p {
    margin: 0;
}

.affiliate-ledger-alert {
    border-left-color: #d97706;
    background: #fffbeb;
}

.affiliate-commission-table {
    min-width: 1120px;
}

.affiliate-row-warning {
    background: #fffbeb;
}

.affiliate-row-danger {
    background: #fff1f2;
}

.affiliate-flag-list {
    display: grid;
    gap: .65rem;
}

.affiliate-flag-list article {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .75rem .85rem;
    border: 1px solid #f3d49a;
    border-radius: .7rem;
    background: #fffbeb;
}

.affiliate-flag-list article > div {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

.status-badge {
    display: inline-flex;
    margin-top: .35rem;
    padding: .28rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
}

.status-success { background: #e9f7ec; color: #166534; }
.status-warning { background: #fff3e0; color: #92400e; }
.status-danger { background: #fdecef; color: #991b1b; }

.affiliate-row-review {
    position: relative;
    display: inline-block;
    text-align: left;
}

.affiliate-row-review > summary {
    list-style: none;
    cursor: pointer;
}

.affiliate-row-review > summary::-webkit-details-marker {
    display: none;
}

.affiliate-row-popover {
    position: absolute;
    z-index: 20;
    right: 0;
    top: calc(100% + .4rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(230px, 1fr));
    gap: .75rem;
    width: min(580px, 80vw);
    padding: .9rem;
    border: 1px solid var(--a75-border, #e5e7eb);
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
}

.affiliate-row-popover form {
    min-width: 0;
}

.affiliate-payout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.affiliate-payout-total {
    font-size: 1.5rem;
}

.affiliate-commission-checklist {
    display: grid;
    max-height: 280px;
    overflow: auto;
    border: 1px solid var(--a75-border, #e5e7eb);
    border-radius: .7rem;
}

.affiliate-commission-checklist label {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .7rem;
    padding: .7rem;
    border-bottom: 1px solid var(--a75-border, #e5e7eb);
}

.affiliate-commission-checklist label:last-child {
    border-bottom: 0;
}

.affiliate-commission-checklist span {
    display: grid;
}

.affiliate-commission-checklist small {
    color: var(--a75-muted, #6b7280);
}

.affiliate-report-actions {
    justify-content: flex-start;
}

@media (max-width: 1100px) {
    .affiliate-admin-page .affiliate-kpi-grid,
    .affiliate-payout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .affiliate-admin-page .affiliate-kpi-grid,
    .affiliate-form-grid,
    .affiliate-admin-split,
    .affiliate-payout-grid,
    .affiliate-row-popover {
        grid-template-columns: 1fr;
    }

    .affiliate-detail-hero,
    .affiliate-ledger-alert,
    .affiliate-flag-list article,
    .affiliate-timeline article > div {
        align-items: stretch;
        flex-direction: column;
    }

    .affiliate-row-popover {
        position: fixed;
        inset: auto .75rem .75rem .75rem;
        width: auto;
        max-height: 78vh;
        overflow: auto;
    }

    .affiliate-detail-actions,
    .affiliate-row-actions,
    .affiliate-report-actions {
        justify-content: flex-start;
    }

    .affiliate-detail-actions .btn,
    .affiliate-report-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* NuLifeBio visual system. Shared tokens serve storefront and administration. */
:root {
    --a75-bg: #efe9dd;
    --a75-bg-soft: #f5f1e9;
    --a75-workspace: #efe9dd;
    --a75-card: #faf7f0;
    --a75-card-soft: #f5f1e9;
    --a75-ink: #2a2a2a;
    --a75-muted: #625e57;
    --a75-faint: #807b71;
    --a75-border: #d4ccbe;
    --a75-border-strong: #a9a092;
    --a75-primary: #2a2a2a;
    --a75-primary-dark: #171717;
    --a75-primary-soft: #e8dfcd;
    --a75-coral: #aa883e;
    --a75-gold: #aa883e;
    --a75-sidebar: #2a2a2a;
    --a75-sidebar-2: #34332f;
    --a75-sidebar-active: rgba(170,136,62,.22);
    --a75-surface: #f5f1e9;
    --a75-surface-2: #e9e1d4;
    --a75-secondary: #2a2a2a;
    --a75-accent: #aa883e;
    --a75-ring: 0 0 0 4px rgba(170,136,62,.25);
}
html[data-theme="dark"] {
    --a75-primary: #c5a65f;
    --a75-primary-dark: #d9be7b;
    --a75-sidebar-active: rgba(170,136,62,.22);
}
body { background: var(--a75-bg); }
h1, h2, h3, .section-heading, .page-hero h1, .product-detail-name { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.035em; }
.site-header, .site-footer { background: #2a2a2a; color: #efe9dd; }
.site-header a, .site-footer a, .site-footer h4, .site-footer .muted,
.site-footer ul a, .site-footer .footer-bottom a, .site-footer .footer-compliance-tag { color: #efe9dd; }
.site-header a:hover, .site-footer a:hover, .site-footer ul a:hover,
.site-footer .footer-bottom a:hover { color: #d4b977; }
.site-header { border-bottom: 1px solid rgba(170,136,62,.4); }
.site-header .primary-nav a, .site-header .cart-link, .site-header .brand { color: #efe9dd; }
.site-header .primary-nav a:hover, .site-header .primary-nav a[aria-current="page"],
.site-header .cart-link:hover { color: #d4b977; }
.site-footer { border-top: 1px solid #aa883e; }
.brand-logo, .footer-logo, .auth-brand-logo { max-width: 190px; height: auto; max-height: 76px; object-fit: contain; }
.section-eyebrow { color: #8c6c2d; letter-spacing: .17em; text-transform: uppercase; font-size: .73rem; font-weight: 700; }
.btn-primary, .btn.btn-primary { background: #2a2a2a; border-color: #2a2a2a; color: #efe9dd; }
.btn-primary:hover, .btn.btn-primary:hover { background: #474238; border-color: #aa883e; color: #fff; }
.btn-outline, .btn.btn-outline { border-color: #aa883e; color: #2a2a2a; }
.btn-outline:hover, .btn.btn-outline:hover { background: #e8dfcd; border-color: #8c6c2d; }
.page-hero, .catalog-hero, .checkout-hero, .legal-hero, .cta-band {
    background: #2a2a2a;
    color: #efe9dd;
}
.catalog-hero { background-image: none; }
.page-hero h1, .catalog-hero h1, .checkout-hero h1, .legal-hero h1 { color: #efe9dd; }
.product-card, .card, .goal-card { background: #faf7f0; border-color: #d4ccbe; }
.product-card .img-wrap, .product-detail-image { background: #e8dfcd; }
.nulife-hero {
    background: #efe9dd;
    background-image: none;
    color: #2a2a2a;
    padding: clamp(4rem, 8vw, 8rem) 0;
    border-bottom: 1px solid #c9b992;
}
.nulife-hero .container { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(2rem,5vw,6rem); }
.nulife-hero h1 { color: #2a2a2a; font-size: clamp(3.6rem,7vw,7.6rem); line-height: .98; margin: 1.2rem 0 1.5rem; }
.nulife-hero h1 em { color: #957331; font-weight: 400; }
.nulife-hero p { color: #514d46; opacity: 1; font-size: clamp(1.05rem,1.5vw,1.25rem); line-height: 1.65; max-width: 34rem; }
.nulife-hero .btn-primary { background: #2a2a2a; color: #efe9dd; border: 1px solid #2a2a2a; }
.nulife-hero .btn-outline { color: #2a2a2a; border: 1px solid #aa883e; }
.nulife-hero .btn-outline:hover { background: #e8dfcd; }
.nulife-hero-caption { display: block; margin-top: 3rem; color: #746b5a; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.nulife-hero-art { aspect-ratio: 4 / 4.6; background: #2a2a2a; color: #d2b66f; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; box-shadow: 20px 20px 0 #d6c9af; }
.nulife-art-index { position: absolute; top: 1.5rem; left: 1.5rem; font-size: .7rem; letter-spacing: .16em; }
.nulife-art-mark { display: block; max-width: 82%; max-height: 60%; width: auto; height: auto; object-fit: contain; }
.nulife-art-line { width: 44px; height: 1px; background: #aa883e; margin: 2rem auto 1rem; }
.nulife-art-caption { font-size: .62rem; letter-spacing: .2em; text-align: center; }
.nulife-intro { border-bottom: 1px solid #d4ccbe; }
.nulife-intro .container { display: grid; grid-template-columns: minmax(0,.5fr) minmax(0,1.5fr) minmax(0,1fr); gap: 2rem; align-items: start; }
.nulife-intro h2 { font-size: clamp(2rem,3.4vw,3.5rem); line-height: 1.12; margin: 0; }
.nulife-intro p { margin: 0; color: #625e57; }
.nulife-section-head { align-items: end; }
.nulife-empty-catalog { max-width: 760px; margin: 2.5rem 0; padding: clamp(2rem,4vw,4rem); border: 1px solid #bca977; background: #f5f1e9; }
.nulife-empty-number { color: #8c6c2d; font-size: .72rem; letter-spacing: .16em; }
.nulife-empty-catalog h3 { font-size: clamp(2rem,3vw,3rem); margin: 1.5rem 0 .7rem; }
.nulife-empty-catalog p { color: #625e57; max-width: 52ch; }
.nulife-empty-catalog a { display: inline-block; margin-top: 1rem; border-bottom: 1px solid #aa883e; padding-bottom: .2rem; }
.nulife-editorial-band { background: #2a2a2a; color: #efe9dd; padding: clamp(4rem,7vw,7rem) 0; }
.nulife-editorial-band .container { max-width: 920px; }
.nulife-editorial-band .section-eyebrow { color: #d0b371; }
.nulife-editorial-band h2 { font-size: clamp(2.8rem,5vw,5rem); line-height: 1.08; margin: 1.3rem 0; }
.nulife-editorial-band p { color: #d1c9ba; max-width: 60ch; line-height: 1.7; }
.nulife-editorial-band .btn-outline { color: #efe9dd; }
.nulife-preview-banner, .nulife-policy-draft {
    padding: .7rem 1rem;
    background: #d6bf8b;
    border-bottom: 1px solid #8c6c2d;
    color: #2a2a2a;
    text-align: center;
    font-size: .85rem;
    letter-spacing: .02em;
}
.nulife-policy-draft { background: #f4e7c9; }
footer.site-footer, body > footer.site-footer {
    background: #2a2a2a;
    border-top: 1px solid #aa883e;
    color: #efe9dd;
}
footer.site-footer a, footer.site-footer h4, footer.site-footer .muted,
footer.site-footer .footer-compliance-tag { color: #efe9dd; }
footer.site-footer a:hover { color: #d4b977; }
.research-disclaimer {
    background: #f4ead5;
    border-color: #bca977;
    color: #2a2a2a;
}
.nulife-checkout-unavailable { padding: .9rem 1rem; background: #f4e7c9; border: 1px solid #bca977; color: #2a2a2a; }
.checkout-continue-btn:disabled, .complete-order-btn:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 880px) {
    .nulife-hero .container, .nulife-intro .container { grid-template-columns: 1fr; }
    .nulife-hero-art { max-width: 580px; width: 100%; aspect-ratio: 1.2; box-shadow: 12px 12px 0 #d6c9af; }
}
@media (max-width: 560px) {
    .nulife-hero { padding: 3rem 0 4rem; }
    .nulife-hero h1 { font-size: clamp(3rem,13vw,4.2rem); }
    .nulife-hero .cta { align-items: stretch; flex-direction: column; }
    .nulife-hero-art { aspect-ratio: 1; }
    .nulife-section-head { align-items: flex-start; flex-direction: column; }
}
/* NuLifeBio dashboard brand accents; operational status/error tones remain semantic. */
body .admin-dashboard-kpi-link {
    --kpi-accent: #8b6d2e;
    --kpi-soft: #f5f0e6;
}
body .admin-dashboard-kpi-shade {
    background: linear-gradient(150deg, #fffdf7, #efe9dd);
}
body .admin-user-avatar { background: #2a2a2a; color: #efe9dd; }
/* NuLifeBio editorial home — 2026-10-31 reference. Scoped to homepage only. */
.nl-editorial-home{background:#f1ece2;color:#2c251f}
.nl-editorial-home .site-header{position:absolute;inset:0 0 auto;z-index:30;background:rgba(35,33,28,.5);border:0;box-shadow:none;color:#f3eee5}
.nl-editorial-home .site-header>.container{max-width:1440px;padding-inline:4%;min-height:72px;gap:22px}
.nl-editorial-home .site-header .brand-logo{width:190px;height:50px;object-fit:contain}
.nl-editorial-home .site-header nav{gap:24px}
.nl-editorial-home .site-header nav a{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#f4eee4}
.nl-editorial-home .site-header nav a[aria-current]{color:#d6c399;border-color:#d6c399}
.nl-editorial-home .site-header .search{max-width:160px}
.nl-editorial-home .site-header input{background:rgba(255,255,255,.08);color:#fff;border-color:#8e8472}
.nl-editorial-home .site-header input::placeholder{color:#e9e0d3}
.nl-editorial-home .header-actions a{color:#fff}
.nl-editorial-home #a75MainContent{padding:0;margin:0}
.nl-home{width:100%;margin:0 auto;background:#f1ece2}
.nl-home h1,.nl-home h2,.nl-home h3,.nl-home p{margin:0}
.nl-home h1,.nl-home h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.045em;color:#2d251f}
.nl-home a{color:inherit;text-decoration:none}
.nl-home a:focus-visible{outline:3px solid #aa883e;outline-offset:4px}
.nl-home .nl-eyebrow{font:600 11px/1.4 Inter,Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8d7652;margin-bottom:14px}
.nl-button{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:44px;padding:13px 23px;border:1px solid #a18a63;border-radius:7px;font:600 10px/1.2 Inter,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s}
.nl-button:hover{background:#e4d9c4;color:#211f1a}
.nl-home .nl-button-gold{background:#9a8152;border-color:#c8b58d;color:#fff}
.nl-home .nl-button-gold:hover{background:#80673f}
.nl-hero{position:relative;min-height:530px;height:42vw;max-height:650px;background:#292923;overflow:hidden}
.nl-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.nl-hero-copy{position:relative;padding:108px 0 34px 8.4%;max-width:590px;color:#f5f0e8}
.nl-hero .nl-eyebrow{color:#d4bf94}
.nl-hero h1{font-size:clamp(56px,6.2vw,98px);line-height:.91;color:#fff;letter-spacing:-.055em;margin-bottom:20px}
.nl-hero h1 em{color:#d7c49b;font-weight:400}
.nl-hero-description{font-size:15px;line-height:1.4;max-width:360px;margin-bottom:22px!important;color:#eee9df}
.nl-hero .nl-button{margin-bottom:25px}
.nl-hero-notes{display:flex;gap:25px;font:600 9px/1.35 Inter,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.nl-hero-notes>span,.nl-quality-notes>span{display:flex;align-items:center;gap:9px}
.nl-hero-notes svg{flex:none;color:#cbb88f}
.nl-hero-script{position:absolute;right:7%;top:40%;color:#d8c395;font:italic 27px/1.1 Georgia,serif;transform:rotate(-9deg);text-align:center}
.nl-categories{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;padding:16px 18px 12px;background:#eee9df}
.nl-category{position:relative;height:16.5vw;max-height:250px;min-height:180px;overflow:hidden;background:#4e493e}
.nl-category img,.nl-story-card>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.nl-category:hover img,.nl-story-card:hover>img{transform:scale(1.04)}
.nl-category-hero img{object-position:73% center}
.nl-category>div{position:absolute;inset:auto 0 0;background:rgba(25,24,20,.52);padding:15px 8px 13px;display:flex;align-items:center;flex-direction:column;gap:10px;color:#fff;text-align:center}
.nl-category>div>span:first-child{max-width:170px;font:500 13px/1.3 Inter,Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.nl-small-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid #d9c9aa;border-radius:30px;background:#a18a60;padding:7px 17px;font:600 9px/1 Inter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.nl-collection{display:grid;grid-template-columns:27% 1fr;gap:24px;padding:24px 4% 28px;min-height:430px}
.nl-collection-intro{align-self:center;padding-right:12px}
.nl-collection h2{font-size:clamp(36px,4.4vw,68px);line-height:.97;margin-bottom:18px}
.nl-collection-intro>p:not(.nl-eyebrow){font-size:16px;line-height:1.4;max-width:270px;margin-bottom:26px;color:#5e574e}
.nl-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;align-items:start}
.nl-product{border:1px solid #fffaf0;padding:6px;border-radius:3px;min-width:0;background:#f3eee5}
.nl-product-image{display:block;position:relative;aspect-ratio:.8;background:#e9e4d9;overflow:hidden}
.nl-product-image img{height:100%;width:100%;object-fit:contain;mix-blend-mode:multiply}
.nl-product-badge{position:absolute;z-index:1;top:8px;left:7px;border-radius:14px;padding:5px 9px;background:#9b835a;color:#fff;font:600 9px/1 Inter,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.nl-product h3{font:400 17px/1.2 Georgia,serif;margin:8px 0 4px}
.nl-product-meta{display:flex;justify-content:space-between;gap:4px;font:11px/1.4 Inter,Arial,sans-serif;color:#71634e}
.nl-product-meta span{color:#40382c;font-weight:600}
.nl-product-link{display:flex;justify-content:center;border:1px solid #ac9774;border-radius:4px;padding:9px 4px;margin-top:10px;font:600 9px/1 Inter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.nl-product-link:hover{background:#e2d6bf}
.nl-quality{display:grid;grid-template-columns:46% 54%;min-height:382px;background:#e9e1d2}
.nl-quality-photo{min-height:100%;overflow:hidden}
.nl-quality-photo img{width:100%;height:100%;max-height:440px;object-fit:cover;display:block;object-position:50% 60%}
.nl-quality-copy{padding:42px 7% 35px;align-self:center}
.nl-quality h2{font-size:clamp(36px,4vw,62px);line-height:.98;margin-bottom:16px}
.nl-quality-copy>p:not(.nl-eyebrow){font-size:14px;line-height:1.45;max-width:480px;color:#625b50}
.nl-quality-notes{display:flex;flex-wrap:wrap;gap:22px;margin:26px 0;font:600 9px/1.35 Inter,Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.nl-story{display:grid;grid-template-columns:29% repeat(3,minmax(0,1fr));gap:6px;padding:14px 18px 18px 4%}
.nl-story-intro{align-self:center;padding:14px 25px 14px 0}
.nl-story h2{font-size:clamp(28px,3vw,46px);line-height:1.03;margin-bottom:15px}
.nl-story-intro>p:not(.nl-eyebrow){font-size:12px;line-height:1.5;max-width:290px;margin-bottom:18px;color:#5f574c}
.nl-story-card{position:relative;min-height:330px;overflow:hidden}
.nl-story-card>div{position:absolute;inset:auto 0 0;padding:25px 20px 22px;background:rgba(29,27,22,.65);color:#fff}
.nl-story-card h3{font:500 14px/1.3 Inter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
.nl-story-card p{font-size:12px;line-height:1.4;max-width:210px}
.nl-research-note{font-size:11px;line-height:1.5;text-align:center;padding:13px 24px 23px;color:#6a6051}
@media(min-width:1700px){.nl-hero-copy{padding-top:145px}.nl-story-card{max-height:460px}}
@media(max-width:1100px){.nl-editorial-home .site-header>.container{gap:12px;min-height:64px}.nl-editorial-home .site-header nav{gap:12px}.nl-editorial-home .site-header .search{display:none}.nl-hero{min-height:490px;height:52vw}.nl-hero-copy{padding-top:105px;padding-left:6%}.nl-hero h1{font-size:7vw}.nl-hero-script{right:3%;font-size:22px}.nl-categories{gap:6px;padding:12px}.nl-category{min-height:165px}.nl-category>div>span:first-child{font-size:10px}.nl-collection{gap:16px;padding-inline:3%}.nl-collection h2{font-size:4.5vw}.nl-button{padding:12px 16px;font-size:9px}.nl-quality{min-height:300px}.nl-quality-copy{padding:28px 6%}.nl-quality-notes{gap:12px}.nl-story{padding-left:3%}.nl-story-card{min-height:280px}.nl-story-card>div{padding:18px 12px}}
@media(max-width:700px){.nl-editorial-home .site-header{position:relative;background:#2a2924}.nl-editorial-home .site-header>.container{padding:8px 18px;flex-wrap:wrap}.nl-editorial-home .site-header .brand-logo{width:145px;height:42px}.nl-editorial-home .site-header nav{order:3;width:100%;justify-content:center;gap:18px;display:flex;overflow-x:auto;padding:8px 0}.nl-editorial-home .site-header nav a{font-size:9px;white-space:nowrap}.nl-editorial-home .header-actions{margin-left:auto}.nl-hero{height:600px;min-height:0}.nl-hero-photo{object-position:62% center;opacity:.6}.nl-hero-copy{padding:52px 25px 25px;max-width:360px}.nl-hero h1{font-size:66px}.nl-hero-description{font-size:14px;max-width:270px}.nl-hero-script{display:none}.nl-hero-notes{gap:15px;font-size:8px}.nl-hero .nl-eyebrow{font-size:9px}.nl-categories{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px}.nl-category{height:185px;min-height:0}.nl-category>div{padding:10px 4px;gap:7px}.nl-category>div>span:first-child{font-size:9px;letter-spacing:.05em}.nl-small-button{font-size:8px;padding:6px 13px}.nl-collection{display:block;padding:30px 16px}.nl-collection-intro{margin-bottom:24px}.nl-collection h2{font-size:43px}.nl-collection-intro>p:not(.nl-eyebrow){font-size:14px;max-width:100%;margin-bottom:16px}.nl-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.nl-product h3{font-size:18px}.nl-quality{display:flex;flex-direction:column}.nl-quality-photo{height:280px;min-height:0}.nl-quality-photo img{height:100%;width:100%}.nl-quality-copy{padding:30px 22px}.nl-quality h2{font-size:42px}.nl-story{grid-template-columns:repeat(3,minmax(0,1fr));padding:24px 10px 10px;gap:5px}.nl-story-intro{grid-column:1/-1;padding:0 12px 20px}.nl-story h2{font-size:36px}.nl-story-card{min-height:245px}.nl-story-card>div{padding:14px 8px}.nl-story-card h3{font-size:10px}.nl-story-card p{font-size:10px}.nl-story-intro>p:not(.nl-eyebrow){font-size:14px;max-width:100%}}
@media(prefers-reduced-motion:reduce){.nl-home *{transition:none!important}}
.nl-editorial-home .site-header .brand{display:flex;align-items:center;gap:12px;min-width:190px}
.nl-editorial-home .nl-nav-mark{width:36px;height:46px;object-fit:contain}
.nl-editorial-home .nl-nav-wordmark{font:400 16px/1 Inter,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:#eee8da}
.nl-editorial-home .header-actions .btn{background:transparent;border:1px solid #998c73;color:#fff}
@media(max-width:700px){.nl-editorial-home .site-header .brand{min-width:0;gap:7px}.nl-editorial-home .nl-nav-mark{width:28px;height:38px}.nl-editorial-home .nl-nav-wordmark{font-size:13px;letter-spacing:.16em}.nl-editorial-home .header-actions{gap:7px}.nl-editorial-home .header-actions .btn{padding:7px;font-size:11px}}

@media(max-width:1100px){.nl-editorial-home .site-header .primary-nav{display:none}}