/* ==================================================
   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-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; }

.hero {
    min-height: 520px;
    display: grid;
    align-items: end;
    color: #fff;
    padding: 4.5rem 0 3.5rem;
    background:
        linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.48), rgba(0,0,0,.12)),
        url('/assets/img/lovable/hero-vials.jpg') center / cover no-repeat;
}
.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:
        linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.42)),
        url('/assets/img/lovable/hero-vials.jpg') center / cover no-repeat;
    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); }
.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 { border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.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(4, 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; }
@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; } }

/* ==================================================
 * 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-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-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);
}
.admin-order-row.is-active {
    background: #fff1f2;
    border-color: rgba(220,38,38,.24);
}
.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;
        -webkit-overflow-scrolling: touch;
        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-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: 512x512) --- */
.hero-image,
.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,
.size-option-chip:focus {
    background: var(--a75-primary, #dc2626);
    color: #fff;
    border-color: var(--a75-primary, #dc2626);
}
.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: 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-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: 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: 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; }
.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-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; }

/* 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-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;
    gap: .25rem;
}
.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;
    }
}

/* === 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;
}
.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-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 {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    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.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 summary {
    font-size: .82rem;
    color: var(--a75-primary);
    cursor: pointer;
    list-style: none;
    padding: .4rem 0;
    user-select: none;
}
.summary-promo-toggle summary::-webkit-details-marker { display: none; }
.summary-promo-toggle[open] summary { margin-bottom: .5rem; }

/* 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 ============ */