/* StoreTrek product styles.
   Four regions, in this order:

   1. Tokens        StoreTrek's teal identity, defined for both themes. Everything that is
                    not the brand accent comes from the shared app.css vocabulary
                    (--aviation-*, --success-*, --danger-*, --density-*) so StoreTrek pages
                    match the shared shells they render alongside.
   2. Product shell Sidebar affordances shown inside the CAMfly app shell.
   3. Landing       Marketing page only, scoped under .store-landing-shell. It renders in
                    LandingLayout's dark-locked .landing-shell, so it is built on that
                    page's shared .landing-* primitives and only re-points the --mk-*
                    accent tokens to StoreTrek teal. The scope prefix is what keeps the
                    marketing rules out of the authenticated workspace.
   4. Workspace     The authenticated /storetrek/* UI. Fully themed.

   Layout shells (metrics, filters, grid frames, empty and loading states) are NOT defined
   here. Pages use the shared MetricStrip, FilterBar, ResponsiveGridShell, EmptyState and
   LoadingState components. */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
    --store-teal: #0f766e;
    --store-teal-dark: #115e59;
    --store-teal-soft: #ccfbf1;
    --store-amber: #f59e0b;
    --store-ink: #163b3a;
    /* Foreground for anything sitting on a filled teal/success/danger surface. */
    --store-on-accent: #ffffff;
    /* Orange caution tone. app.css has amber (--warning-*) but no distinct orange pair,
       and StoreStatusBadge needs "pending" and "warning" to stay visually separate. */
    --store-caution-surface: #ffedd5;
    --store-caution-text: #9a3412;
}

[data-theme="dark"] {
    --store-teal: #2dd4bf;
    --store-teal-dark: #5eead4;
    --store-teal-soft: rgba(45, 212, 191, 0.16);
    --store-amber: #fbbf24;
    --store-ink: #eff6ff;
    --store-on-accent: #04211f;
    --store-caution-surface: rgba(251, 146, 60, 0.16);
    --store-caution-text: #fdba74;
}

html[data-product="storetrek"] {
    --primary-color: var(--store-teal);
}

/* --------------------------------------------------------- 2. Product shell */

.product-logo {
    width: 190px;
    height: 50px;
    object-fit: contain;
    object-position: left center;
}

.product-logo.mark {
    width: 36px;
    height: 36px;
    object-position: center;
}

.store-nav-glyph {
    color: var(--store-teal);
    font-size: 1.15rem;
    font-weight: 700;
}

/* Always rendered on the dark sidebar, in both themes, so it tracks the sidebar tokens
   rather than the surface tokens. */
.product-switch-link {
    min-height: 52px;
    margin-bottom: 0.65rem;
    padding: 0.5rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--sidebar-text) 18%, transparent);
    border-radius: 8px;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: background-color var(--aviation-motion-fast), border-color var(--aviation-motion-fast);
}

.product-switch-link:hover {
    border-color: color-mix(in srgb, var(--sidebar-text) 34%, transparent);
    background: var(--sidebar-hover);
}

.product-switch-link img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: contain;
}

.product-switch-link span {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.product-switch-link small {
    color: color-mix(in srgb, var(--sidebar-text) 68%, transparent);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.product-switch-link strong {
    color: var(--sidebar-text);
    font-size: 0.82rem;
}

.product-switch-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.product-switch-link.collapsed {
    min-height: 44px;
    padding: 0.3rem;
    justify-content: center;
}

.product-switch-link.collapsed img {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
}

/* ------------------------------------------- 3. Landing (scoped, dark-locked) */

/* Re-point the accent. landing.css owns the dark --mk-* palette; swapping these four
   tokens turns every shared .landing-* primitive (buttons, eyebrows, nav underlines,
   focus rings, form fields) StoreTrek teal without duplicating a single rule. The
   values match images/storetrek-logo-dark.svg.

   Two scopes because the two shells nest differently: .store-landing-shell wraps the
   landing page *inside* LandingLayout's .landing-shell, while .store-marketing-shell
   is applied directly to LoginLayout's .login-shell. */

.store-landing-shell,
.store-marketing-shell {
    --mk-accent: #14b8a6;
    --mk-accent-deep: #0f766e;
    --mk-cyan: #5eead4;
    --mk-gold: #fbbf24;
}

/* Escape the backdrop. LandingLayout paints a `position: fixed; z-index: 0` WebGL
   canvas behind @Body, and static content therefore paints *under* it. CAMfly's
   landing lifts itself with `.landing-main { position: relative; z-index: 1 }`; this
   shell needs the same, or the whole page disappears behind the gradient.

   The login shell needs no equivalent: .login-split is already positioned by
   landing.css. */
.store-landing-shell {
    position: relative;
    z-index: 1;
}

/* landing.css hardcodes the CAMfly blue into these two shadows, so they are the only
   accent-derived declarations the token swap above cannot reach. */
.store-landing-shell .landing-btn-primary,
.store-marketing-shell .landing-btn-primary {
    box-shadow: 0 10px 30px rgb(15 118 110 / 42%), inset 0 1px 0 rgb(255 255 255 / 18%);
}

.store-landing-shell .landing-btn-primary:hover,
.store-marketing-shell .landing-btn-primary:hover {
    box-shadow: 0 16px 40px rgb(20 184 166 / 34%), inset 0 1px 0 rgb(255 255 255 / 22%);
}

.store-landing-shell .landing-btn-ghost:hover,
.store-marketing-shell .landing-btn-ghost:hover {
    border-color: rgb(94 234 212 / 55%);
}

/* Brand ------------------------------------------------------------------- */

.store-landing-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 auto;
    gap: 0.1rem;
    text-decoration: none;
}

.store-landing-brand img {
    width: clamp(170px, 18vw, 214px);
    height: auto;
}

.store-landing-brand span {
    padding-left: 0.08rem;
    color: var(--mk-text-muted);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.store-landing-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--mk-text);
    font-family: var(--font-display, "Sora", "Segoe UI", sans-serif);
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
}

.store-landing-footer-brand img {
    width: 34px;
    height: 34px;
}

/* The sign-in aside uses a full logo lockup instead of CAMfly's mark-plus-wordmark,
   so it opts out of .landing-brand's two-part flex layout. */
.login-brand-product {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.login-brand-logo {
    width: clamp(170px, 16vw, 214px);
    height: auto;
}

/* Hero -------------------------------------------------------------------- */

.store-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(88vh, 820px);
    padding-block: clamp(3rem, 9vw, 6.5rem) clamp(4rem, 10vw, 7.5rem);
}

.store-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5.5rem);
}

.store-hero-copy {
    min-width: 0;
    transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
}

.store-hero-title {
    margin-bottom: 1.3rem;
    font-size: clamp(2.2rem, 4.6vw, 3.9rem);
    letter-spacing: -0.035em;
    line-height: 1.05;
    text-wrap: balance;
}

.store-hero-lede {
    max-width: 40rem;
    margin-bottom: 2.1rem;
    color: var(--mk-text-soft);
    font-size: clamp(1rem, 1.7vw, 1.14rem);
    line-height: 1.66;
}

.store-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.4rem;
}

.store-hero-actions .landing-btn {
    padding: 0.92rem 1.6rem;
    font-size: 1rem;
}

.store-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--mk-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.store-trust-row li::before {
    content: "✓";
    margin-right: 0.45rem;
    color: var(--mk-cyan);
    font-weight: 800;
}

/* Hero diagram ------------------------------------------------------------ */

.store-hero-visual {
    position: relative;
    min-width: 0;
}

.store-route-card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0.15rem 1rem;
    padding: 1.15rem 1.3rem;
    border: 1px solid var(--mk-border);
    border-left: 2px solid rgb(20 184 166 / 45%);
    border-radius: var(--mk-radius);
    background: var(--mk-surface-strong);
    box-shadow: 0 18px 44px rgb(2 8 15 / 45%);
    backdrop-filter: blur(10px);
}

.store-route-card b {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #04211f;
    background: linear-gradient(135deg, var(--mk-accent) 0%, var(--mk-accent-deep) 100%);
    font-size: 0.86rem;
    font-weight: 800;
}

.store-route-card span {
    color: var(--mk-text);
    font-weight: 700;
}

.store-route-card strong {
    color: var(--mk-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.store-route-line {
    width: 2px;
    height: 42px;
    margin-left: 3.05rem;
    background: linear-gradient(var(--mk-accent), var(--mk-gold));
}

/* Staggered right so the three cards read as a descending route. Declared as a set,
   including the zero-offset first step, so no step is an undefined class. */
.route-demand { transform: none; }
.route-stock { transform: translateX(clamp(0px, 2vw, 2rem)); }
.route-issue { transform: translateX(clamp(0px, 4vw, 4rem)); }

/* Capabilities ------------------------------------------------------------ */

.store-capabilities {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgb(20 184 166 / 14%), transparent 70%),
        var(--mk-bg);
}

.store-capability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1rem;
}

.store-capability-grid article {
    padding: 1.6rem 1.5rem;
    border: 1px solid var(--mk-border);
    border-left: 2px solid rgb(20 184 166 / 45%);
    border-radius: var(--mk-radius);
    background: var(--mk-surface-strong);
}

.store-capability-grid article b {
    display: block;
    margin-bottom: 0.9rem;
    color: var(--mk-cyan);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.store-capability-grid h3 {
    margin-bottom: 0.6rem;
    font-size: 1.08rem;
}

.store-capability-grid p {
    color: var(--mk-text-soft);
    font-size: 0.9rem;
    line-height: 1.66;
}

/* Integration band -------------------------------------------------------- */

.store-integration-band {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    border-top: 1px solid var(--mk-border);
    background: var(--mk-bg-raised);
}

.store-integration-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.store-integration-inner h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
}


/* ------------------------------------------------------------- 4. Workspace */

/* Page shell. Shared components carry their own bottom margin; the flex gap here is the
   single source of vertical rhythm, so those margins are zeroed at this level. */
.store-workspace {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.store-workspace > .metric-strip,
.store-workspace > .filter-bar-shell {
    margin-bottom: 0;
}

/* Matches .responsive-grid-shell (app.css) so panels and grid frames are indistinguishable. */
.store-panel {
    min-width: 0;
    border: 1px solid var(--aviation-border);
    border-radius: 8px;
    background: var(--aviation-surface);
    box-shadow: var(--aviation-shadow-soft);
    overflow: hidden;
}

/* Matches .responsive-grid-toolbar (app.css). */
.store-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    min-height: 2.55rem;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--aviation-border);
    background: var(--aviation-surface-raised);
}

.store-panel > .store-panel-body {
    padding: 0.65rem;
}

.store-toolbar-title,
.store-panel-header h2,
.store-panel-header h3 {
    margin: 0;
    color: var(--aviation-text);
    font-size: 0.95rem;
    font-weight: 800;
}

.store-panel-meta {
    color: var(--aviation-muted);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* EmptyState/LoadingState rendered INSIDE a ResponsiveGridShell (so the shell's toolbar
   stays visible while the section is empty). The shell already draws the frame, so the
   state drops its own border and fills the width instead of sitting inline. */
.store-nested-state {
    width: 100%;
    min-height: 9rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

section.store-nested-state.loading-state {
    display: flex;
    justify-content: center;
}

/* Card grid for the Reports capability tiles. The visually similar
   .store-capability-grid is landing-only and light-locked; this one themes. */
.store-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.65rem;
}

.store-card-grid article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.85rem;
    border: 1px solid var(--aviation-border);
    border-radius: 8px;
    background: var(--aviation-surface);
    box-shadow: var(--aviation-shadow-soft);
    transition: border-color var(--aviation-motion-fast), box-shadow var(--aviation-motion-medium), transform var(--aviation-motion-medium);
}

.store-card-grid article:hover {
    border-color: color-mix(in srgb, var(--store-teal) 32%, var(--aviation-border));
    box-shadow: var(--aviation-shadow-lift);
    transform: translateY(-1px);
}

.store-card-grid article b {
    color: var(--store-teal);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.store-card-grid article h3 {
    margin: 0;
    color: var(--aviation-text);
    font-size: 0.95rem;
    font-weight: 800;
}

.store-card-grid article p {
    margin: 0;
    flex: 1;
    color: var(--aviation-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Tables ------------------------------------------------------------------- */

.store-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--density-font-size-sm, 0.82rem);
}

.store-table th,
.store-table td {
    padding: var(--density-grid-cell-padding-y, 0.56rem) var(--density-grid-cell-padding-x, 0.62rem);
    text-align: left;
    border-top: 1px solid var(--aviation-border);
    color: var(--aviation-text);
}

.store-table thead tr:first-child th {
    border-top: 0;
}

.store-table th {
    color: var(--aviation-muted);
    font-size: var(--density-font-size-xs, 0.72rem);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--aviation-surface-raised);
}

.store-table td small {
    color: var(--aviation-muted);
}

.store-table tbody tr:hover td {
    background: color-mix(in srgb, var(--store-teal) 6%, transparent);
}

/* Status badges ------------------------------------------------------------ */

/* Each tone maps to a shared token pair that app.css already redefines under
   [data-theme="dark"], so no dark-theme overrides are needed here. */
.store-status {
    display: inline-flex;
    padding: 0.24rem 0.55rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 800;
}

.store-status.success {
    color: var(--success-text);
    background: var(--success-surface);
}

.store-status.pending {
    color: var(--warning-text);
    background: var(--warning-surface);
}

.store-status.warning {
    color: var(--store-caution-text);
    background: var(--store-caution-surface);
}

.store-status.danger {
    color: var(--danger-text);
    background: var(--danger-hover-surface);
}

.store-status.neutral {
    color: var(--secondary-text);
    background: var(--secondary-surface);
}

/* Buttons ------------------------------------------------------------------ */

/* NOTE: font-family/size/weight are set individually. The `font` shorthand cannot take
   `inherit` as a component value — `font: 700 .8rem inherit` is a parse error and drops
   the whole declaration, which is what previously left these buttons on the UA default
   (Arial 13.33px) while the rest of the app ran the app font stack. */
.store-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: var(--density-button-height, 34px);
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--aviation-border);
    border-radius: 8px;
    color: var(--text-primary);
    background: var(--input-bg);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--aviation-motion-fast), border-color var(--aviation-motion-fast);
}

.store-button:hover:not(:disabled) {
    border-color: var(--aviation-border-strong);
    background: var(--hover-color);
}

.store-button:focus-visible,
.store-link-button:focus-visible,
.store-icon-button:focus-visible {
    outline: none;
    box-shadow: var(--aviation-focus-ring);
}

.store-button.primary {
    color: var(--store-on-accent);
    border-color: var(--store-teal);
    background: var(--store-teal);
}

.store-button.primary:hover:not(:disabled) {
    border-color: var(--store-teal-dark);
    background: var(--store-teal-dark);
}

.store-button.success {
    color: var(--store-on-accent);
    border-color: var(--success-color);
    background: var(--success-color);
}

.store-button.danger {
    color: var(--store-on-accent);
    border-color: var(--danger-color);
    background: var(--danger-color);
}

.store-button.success:hover:not(:disabled),
.store-button.danger:hover:not(:disabled) {
    filter: brightness(1.08);
}

.store-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.store-link-button {
    padding: 0.2rem 0.3rem;
    border: 0;
    color: var(--store-teal);
    background: transparent;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.store-link-button:hover:not(:disabled) {
    text-decoration: underline;
}

.store-link-button.success { color: var(--success-text); }
.store-link-button.danger { color: var(--danger-text); }

.store-link-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sized to match the .e-btn.icon-only buttons the shared toolbars place in the same row. */
.store-icon-button {
    width: var(--density-icon-only-size, 34px);
    height: var(--density-icon-only-size, 34px);
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: var(--store-teal);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--aviation-motion-fast);
}

.store-icon-button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--store-teal) 12%, transparent);
}

.store-icon-button.danger { color: var(--danger-text); }

.store-icon-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Forms -------------------------------------------------------------------- */

.store-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--density-dialog-column-min, 260px), 1fr));
    gap: var(--density-form-gap, 0.75rem);
    padding: 0.65rem;
}

.store-form-wide {
    grid-column: 1 / -1;
}

.store-field,
.store-form-grid label,
.store-line-editor label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    color: var(--aviation-muted);
    font-size: var(--density-font-size-xs, 0.72rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Controls are declared once for every StoreTrek form container. Drawers are portaled
   outside .app-container, so density tokens are read with literal fallbacks. */
.store-field input,
.store-field select,
.store-field textarea,
.store-form-grid input,
.store-form-grid select,
.store-form-grid textarea,
.store-line-editor input,
.store-line-editor select,
.store-subpanel input,
.store-subpanel select,
.store-action-row > input,
.store-action-row > select,
.store-drawer-actions > input,
.store-drawer-actions > select,
.store-reason {
    width: 100%;
    min-height: var(--density-input-height, 34px);
    padding: var(--density-input-padding-y, 0.42rem) var(--density-input-padding-x, 0.68rem);
    border: 1px solid var(--aviation-border);
    border-radius: 8px;
    color: var(--text-primary);
    background: var(--input-bg);
    font-family: inherit;
    font-size: var(--density-font-size-sm, 0.82rem);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    transition: border-color var(--aviation-motion-fast), box-shadow var(--aviation-motion-fast);
}

.store-field input:focus-visible,
.store-field select:focus-visible,
.store-field textarea:focus-visible,
.store-form-grid input:focus-visible,
.store-form-grid select:focus-visible,
.store-form-grid textarea:focus-visible,
.store-line-editor input:focus-visible,
.store-line-editor select:focus-visible,
.store-subpanel input:focus-visible,
.store-subpanel select:focus-visible,
.store-action-row > input:focus-visible,
.store-action-row > select:focus-visible,
.store-drawer-actions > input:focus-visible,
.store-drawer-actions > select:focus-visible,
.store-reason:focus-visible {
    outline: none;
    border-color: var(--store-teal);
    box-shadow: var(--aviation-focus-ring);
}

/* Controls sitting inline among the buttons of an action row size to content, not the row. */
.store-action-row > input,
.store-action-row > select,
.store-drawer-actions > input,
.store-drawer-actions > select {
    width: auto;
    min-width: 12rem;
    flex: 0 1 auto;
}

.store-form-grid textarea {
    min-height: 82px;
    resize: vertical;
}

.store-form-grid textarea[readonly] {
    color: var(--aviation-muted);
    background: var(--aviation-surface-raised);
}

/* Tag-qualified so it beats `.store-form-grid label` on specificity: a checkbox caption is a
   value label, not a field label, so it stays sentence case in drawers and filter bars alike. */
label.store-check-label,
.store-check-label {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    align-self: end;
    min-height: var(--density-input-height, 34px);
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-primary);
    font-size: var(--density-font-size-sm, 0.82rem);
    font-weight: 400;
}

.store-check-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 16px;
    flex: 0 0 16px;
    padding: 0;
    accent-color: var(--store-teal);
}

/* Field plus button on one baseline, inside a panel body. */
.store-inline-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.store-inline-row .store-field,
.store-decision-remarks {
    flex: 1 1 18rem;
    min-width: 0;
}

.store-action-row,
.store-drawer-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.65rem;
    border-top: 1px solid var(--aviation-border);
}

.store-line-editor {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr repeat(5, minmax(100px, 0.7fr)) auto;
    align-items: end;
    gap: 0.55rem;
    padding: 0.65rem;
    border-top: 1px solid var(--aviation-border);
}

/* Beats the generic action-row control rule above, which is more specific than a bare class. */
.store-action-row > .store-reason,
.store-drawer-actions > .store-reason {
    flex: 1 1 16rem;
    min-width: 16rem;
}

/* Drawer sub-sections ------------------------------------------------------ */

.store-subpanel {
    margin-block: 0.75rem;
    padding: 0.65rem;
    border: 1px solid var(--aviation-border);
    border-radius: 8px;
    background: var(--aviation-surface-raised);
}

.store-subpanel > h3,
.store-editor .store-panel-header h3 {
    margin: 0 0 0.5rem;
    color: var(--aviation-text);
    font-size: 0.95rem;
    font-weight: 800;
}

.store-subpanel .store-form-grid,
.store-subpanel .store-action-row {
    padding-inline: 0;
}

.store-subpanel .store-table {
    margin-top: 0.6rem;
}

/* Mirrors .metric-strip so drawer summaries line up with page metrics. */
.store-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.8rem;
}

.store-metric-grid > div {
    min-width: 0;
    padding: 0.58rem 0.72rem;
    border: 1px solid var(--aviation-border);
    border-radius: 8px;
    background: var(--aviation-surface);
    box-shadow: var(--aviation-shadow-soft);
}

.store-metric-grid small {
    display: block;
    color: var(--aviation-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.store-metric-grid strong {
    display: block;
    margin-top: 0.18rem;
    color: var(--aviation-text);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
}

.store-split-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

.store-split-grid h3 {
    margin: 0 0 0.5rem;
    color: var(--aviation-text);
    font-size: 0.95rem;
    font-weight: 800;
}

.store-muted {
    color: var(--aviation-muted);
    font-size: var(--density-font-size-sm, 0.82rem);
}

.store-empty-line {
    padding: 0.9rem 0.65rem;
    text-align: center;
}

.store-editor {
    margin-top: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--store-teal) 35%, var(--aviation-border));
    border-radius: 8px;
    background: var(--aviation-surface);
    box-shadow: var(--aviation-shadow-soft);
    overflow: hidden;
}

/* --------------------------------------------------------------- Responsive */

/* landing.css already collapses the shared marketing chrome — nav links, nav actions
   and the footer row — at 860px, and this page reuses those primitives, so only the
   StoreTrek-specific hero split and diagram stagger need covering here.

   The capability and integration grids are auto-fit and need no breakpoint at all. */
@media (max-width: 1000px) {
    .store-hero-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .store-hero-visual {
        max-width: 42rem;
    }
}

/* Matches landing.css's own hero breakpoint so both landings reflow together. */
@media (max-width: 860px) {
    .store-hero {
        min-height: auto;
    }

    .route-stock,
    .route-issue {
        transform: none;
    }
}

@media (max-width: 560px) {
    .store-hero-actions .landing-btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 680px) {
    .store-table { min-width: 760px; }
    .store-form-grid { grid-template-columns: 1fr; }
    .store-line-editor { grid-template-columns: 1fr 1fr; }
}