/* ==========================================================================
   COLOR PALETTE: Telongo
   ========================================================================== */
:root {
    --brand-green: #93D92B;
    --brand-green-hover: #7eb823;
    --brand-green-light: #F3F9EA;
    /* Same hue as brand-green, darkened for use as TEXT on light backgrounds.
       brand-green-hover only hits ~2.4:1 contrast on white and fails WCAG AA
       (needs 4.5:1) when used as link/text color instead of a hover background. */
    --brand-green-text: #4d7215;

    --brand-charcoal: #4C4E50;
    --brand-charcoal-dark: #2B2D2E;

    --alert-yellow: #F2E005;
    --alert-yellow-light: #FFFDE6;

    --text-dark: #0D0D0D;
    --text-muted: #565859;
    --text-light: #FFFFFF;

    --bg-page: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-subtle: #F1F5F9;

    --border-light: #E2E8F0;
    --border-medium: #CBD5E1;

    --shadow-sm: 0 2px 4px rgba(13, 13, 13, 0.04);
    --shadow-md: 0 4px 12px rgba(13, 13, 13, 0.08);

    --focus-ring: rgba(147, 217, 43, 0.4);
}

/* ==========================================================================
   BASE
   ========================================================================== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-dark);
    background: var(--bg-page);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   SITE HEADER / NAVIGATION
   ========================================================================== */
.site-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 76px;
}

.navbar .brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-collapse {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 24px;
}

.main-nav {
    flex: 1;
}

.main-nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav a {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
    color: var(--brand-charcoal-dark);
    background: var(--brand-green-light);
}

.main-nav a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.nav-actions {
    flex-shrink: 0;
}

/* ==========================================================================
   PRODUCTS DROPDOWN
   ========================================================================== */
.has-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: -6px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus-visible {
    background: var(--brand-green-light);
    color: var(--brand-charcoal-dark);
}

.dropdown-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.has-dropdown.is-open .dropdown-toggle svg {
    transform: rotate(180deg);
}

/* Support's dropdown trigger — unlike Products/Account, "Support" has no page of its
   own to link to, so its whole label is the toggle button (text + chevron together)
   rather than a separate label link plus a small icon-only .dropdown-toggle. */
.dropdown-label-toggle {
    width: auto;
    height: auto;
    margin-left: 0;
    padding: 10px 14px;
    gap: 6px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
}

.main-nav .dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1px;
}

/* Every <li> in this menu is a flex item and is supposed to stretch to fill the
   column's cross-axis width via the flex container's default align-items:normal
   (~stretch). In practice that default stretch doesn't reliably kick in here, so
   short product names (e.g. "LX350-C2 Hotline Dialer") were rendering at their own
   natural (narrower) content width instead of the full column width — while longer
   names looked fine only because flex-shrink squeezed them down to fit, masking the
   same bug. Setting width:100% explicitly removes any reliance on stretch. */
.main-nav .dropdown-menu li,
.dropdown-column-list li {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.dropdown-heading {
    margin-top: 6px;
    padding: 8px 12px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-green-text);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 4px;
}

.dropdown-column:first-child .dropdown-heading {
    margin-top: 0;
}

/* Nested <ul> of products within one category — see .dropdown-column below, which
   groups a heading + this list so the Products mega-menu can lay categories out as
   side-by-side columns on desktop while still stacking them on mobile. */
.dropdown-column-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dropdown-menu li a,
.dropdown-menu .dropdown-logout-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: none;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible,
.dropdown-menu .dropdown-logout-btn:hover,
.dropdown-menu .dropdown-logout-btn:focus-visible {
    background: var(--brand-green-light);
    color: var(--brand-charcoal-dark);
}

.dropdown-item-soon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
    padding: 8px 12px;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-muted);
    cursor: default;
}

.dropdown-item-soon .soon-tag {
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

@media (min-width: 861px) {
    .main-nav .dropdown-menu.dropdown-menu-end {
        left: auto;
        right: 0;
    }

    .main-nav .dropdown-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        min-width: 280px;
        background: var(--bg-card);
        border: 1px solid var(--border-light);
        border-radius: 12px;
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
        z-index: 200;
    }

    .main-nav .has-dropdown:hover .dropdown-menu,
    .main-nav .has-dropdown:focus-within .dropdown-menu,
    .main-nav .has-dropdown.is-open .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* The Products mega-menu (dropdown-menu-columns) lays its categories out as
       side-by-side columns instead of one long stacked list — the catalog's grown
       enough that a single column got too tall. Every other dropdown (e.g. Account)
       keeps the plain single-column behavior above. CSS Grid (rather than a wrapping
       flex row) is what guarantees every column lines up on a shared grid, both left
       edges and row-to-row, regardless of how many products are in each category.
       Needs a definite width (not max-content/min-content) — auto-fit can't reliably
       compute how many fixed-width tracks fit against an intrinsic size, which is what
       caused the columns to misalign in the first place. */
    .main-nav .dropdown-menu.dropdown-menu-columns {
        display: grid;
        grid-template-columns: repeat(auto-fit, 190px);
        justify-content: flex-start;
        align-items: start;
        width: min(92vw, 860px);
        gap: 8px 32px;
        padding: 18px 22px;
    }

    .dropdown-menu-columns .dropdown-column {
        min-width: 0;
    }

    /* .dropdown-heading's margin-top (and the :first-child override that zeroes it)
       exist to space out stacked categories on mobile — irrelevant once columns sit
       side-by-side here, and left unset it was pushing every column but the first down
       by that same margin, so headings didn't line up across columns. */
    .dropdown-menu-columns .dropdown-heading {
        margin-top: 0;
    }
}

@media (max-width: 860px) {
    .has-dropdown {
        flex-wrap: wrap;
    }

    .main-nav .dropdown-menu {
        flex-basis: 100%;
        display: none;
        padding: 4px 0 8px 12px;
    }

    .main-nav .has-dropdown.is-open .dropdown-menu {
        display: flex;
    }
}

.btn-cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--brand-green);
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

.cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand-charcoal-dark);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.btn-cart:hover,
.btn-cart:focus-visible {
    background: var(--brand-green-hover);
}

.btn-cart:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ==========================================================================
   HAMBURGER TOGGLE (mobile)
   ========================================================================== */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--brand-charcoal-dark);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle:hover {
    background: var(--brand-green-light);
}

.nav-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.nav-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   RESPONSIVE NAVIGATION
   ========================================================================== */
@media (max-width: 860px) {
    .nav-toggle {
        display: flex;
    }

    .nav-collapse {
        display: none;
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border-light);
        box-shadow: var(--shadow-md);
        padding: 12px 24px 20px;
        /* The whole mobile menu panel (not just the Products dropdown inside it) needs
           its own bounded, scrollable region — nothing clips an absolutely positioned
           element that overflows past the viewport bottom, but on some mobile browsers
           the page itself doesn't reliably pick up the extra scroll height once a
           dropdown this tall opens inside it, so a long Products list could render past
           the bottom edge of the screen with no way to reach the rest of it. Capping the
           panel's height to whatever's left below the 76px header and scrolling inside
           that region instead guarantees every item is reachable regardless of how tall
           any one dropdown gets. */
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-collapse.is-open {
        display: flex;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .main-nav a {
        padding: 12px 14px;
    }

    .nav-actions {
        margin-top: 12px;
    }

    .btn-cart {
        display: block;
        text-align: center;
    }

    /* .btn-cart's "gap: 8px" (used for the space between "Shopping Cart" and the count
       badge) only works while it's a flex container — switching it to display:block
       above for the centered mobile layout silently drops that gap, so the badge ends
       up sitting right against the text with no space at all. */
    .cart-count {
        margin-left: 8px;
    }

    .site-header {
        position: sticky;
    }

    .navbar {
        position: relative;
    }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    background: linear-gradient(135deg, var(--brand-green-light) 0%, var(--bg-page) 60%);
    border-bottom: 1px solid var(--border-light);
    overflow: hidden;
}

.hero-inner {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 88px 24px 32px;
}

.hero-content {
    flex: 1 1 520px;
    max-width: 620px;
}

.hero-inner--centered {
    justify-content: center;
    text-align: center;
}

.hero-inner--centered .hero-content {
    max-width: 720px;
}

.hero-inner--centered .hero-actions,
.hero-inner--centered .hero-stats,
.hero-inner--centered .category-quicklinks {
    justify-content: center;
}

.hero-content .category-quicklinks {
    margin: 4px 0 44px;
}

.hero-inner--centered .hero-lead {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.eyebrow {
    display: inline-block;
    margin: 0 0 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--brand-green);
    color: var(--text-dark);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-content .eyebrow {
    margin-bottom: 28px;
}

.turnkey-home .eyebrow {
    margin-bottom: 28px;
}

.hero-content h1 {
    margin: 0 0 20px;
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    line-height: 1.15;
    color: var(--brand-charcoal-dark);
}

.hero-lead {
    margin: 0 0 32px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 52ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 44px;
}

.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
    background: var(--brand-charcoal-dark);
    color: var(--text-light);
    border: 1px solid var(--brand-charcoal-dark);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--brand-charcoal);
}

.btn-secondary {
    background: transparent;
    color: var(--brand-charcoal-dark);
    border: 1px solid var(--border-medium);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    border-color: var(--brand-charcoal-dark);
    background: var(--bg-card);
}

/* Destructive actions (delete account, etc.) — same shape as .btn-primary/.btn-secondary,
   red instead of brand colors so it reads as irreversible before the confirm() dialog
   even fires. Shares the error-alert palette (#B3261E on #FDECEA) used elsewhere in Admin. */
.btn-danger {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    background: #B3261E;
    color: var(--text-light);
    border: 1px solid #B3261E;
}

.btn-danger:hover,
.btn-danger:focus-visible {
    background: #8f1e18;
    border-color: #8f1e18;
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin: 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--border-light);
    list-style: none;
}

.hero-stats li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-stats strong {
    font-size: 1.15rem;
    color: var(--brand-charcoal-dark);
}

.hero-stats span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

@media (max-width: 860px) {
    .hero-inner {
        flex-direction: column;
        padding: 56px 24px 32px;
        text-align: center;
    }

    .hero-lead {
        max-width: none;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }
}

/* ==========================================================================
   HOME - TRUST BAND
   ========================================================================== */
.trust-band {
    background: var(--bg-subtle);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 40px 0;
}

.trust-band-inner {
    display: flex;
    align-items: center;
    gap: 40px;
}

.trust-band-stat {
    display: flex;
    flex: 0 0 160px;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.trust-band-stat strong {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-charcoal-dark);
}

.trust-band-stat span {
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.trust-band-body {
    flex: 1 1 auto;
}

.trust-band-body p {
    margin: 0 0 10px;
    max-width: 70ch;
    color: var(--text-muted);
    line-height: 1.6;
}

.trust-band-note {
    font-size: 0.85rem;
}

@media (max-width: 700px) {
    .trust-band-inner {
        flex-direction: column;
        text-align: center;
        /* The base 40px gap is sized for the stat and the body sitting side-by-side on
           desktop — stacked vertically on mobile that same gap reads as a big empty gap
           between "2010 / Serving Money Transmitters Since" and the paragraph below it. */
        gap: 16px;
    }

    /* .trust-band-stat's "flex: 0 0 160px" sets a fixed 160px WIDTH on desktop, where
       .trust-band-inner lays out as a row — but once .trust-band-inner switches to
       flex-direction: column above, that same 160px flex-basis applies to the main axis
       again, which is now vertical. The stat's text only needs ~70px, so the box was
       being forced to stay 160px tall regardless, leaving a large dead zone below
       "Serving Money Transmitters Since" before the paragraph started. Resetting the
       flex-basis to auto here lets it size to its actual content instead. */
    .trust-band-stat {
        flex: 0 0 auto;
    }

    .trust-band-body p {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================================
   HOME - SECTION HEADINGS
   ========================================================================== */
.section {
    padding: 72px 0;
}

.section-alt {
    background: var(--bg-subtle);
}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.about-story {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.about-story p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
}

.about-stats li {
    text-align: center;
}

.about-stats strong {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-charcoal-dark);
}

.about-stats span {
    display: block;
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

/* Reuses .app-grid's card look (padding, border, shadow, hover lift — see the
   TS350/TS351/LX350 "Typical Applications" lists and the "By the Numbers" stats above
   for the same pattern), but with fixed-width cards instead of .app-grid's default
   stretch-to-fill columns. With only 5 short, single-line items, letting a lone card on
   the last row stretch full-width looked unbalanced; auto-fit + justify-content:center
   keeps every card the same size and centers the whole grid instead, and naturally
   collapses to one column on narrow screens without needing its own media query.
   Compound selector (.app-grid.about-industries) so this reliably overrides .app-grid's
   own grid-template-columns regardless of which rule happens to appear later in this
   file — at equal specificity that'd otherwise be a source-order coin flip. */
.app-grid.about-industries {
    grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
    justify-content: center;
}

.about-industries li {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    color: var(--brand-charcoal-dark);
}

.section-heading {
    max-width: 640px;
    margin: 0 auto 40px;
    text-align: center;
}

.section-heading h1,
.section-heading h2 {
    margin: 0 0 12px;
    font-size: 1.9rem;
    color: var(--brand-charcoal-dark);
}

.section-heading p:not(.eyebrow) {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ==========================================================================
   PAGE HEADER (product / category landing pages)
   ========================================================================== */
.page-header {
    padding: 56px 0 64px;
    background: linear-gradient(135deg, var(--brand-green-light) 0%, var(--bg-page) 65%);
    border-bottom: 1px solid var(--border-light);
}

.page-header .breadcrumb {
    margin-bottom: 24px;
}

.page-header-heading {
    max-width: 720px;
}

.page-header-heading .eyebrow {
    margin-bottom: 28px;
}

.page-header-heading h1 {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

.category-quicklinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.category-quicklinks a {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    color: var(--brand-charcoal-dark);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.category-quicklinks a:hover,
.category-quicklinks a:focus-visible {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: var(--text-dark);
}

@media (max-width: 640px) {
    .page-header {
        padding: 40px 0 48px;
    }
}

.section-footer {
    margin-top: 36px;
    text-align: center;
}

.category-rows {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.category-row {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}

.category-row-media {
    display: flex;
    flex: 0 0 220px;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 24px;
    background: var(--bg-subtle);
    border-radius: 16px;
}

.category-row-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.category-row-body {
    flex: 1 1 auto;
}

.category-row-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.category-row-title {
    margin: 4px 0 12px;
    font-size: 1.4rem;
    color: var(--brand-charcoal-dark);
}

.category-row-desc {
    margin: 0 0 16px;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 56ch;
}

.category-row-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: var(--brand-charcoal-dark);
}

.category-row-list li {
    padding-left: 18px;
    position: relative;
}

.category-row-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--brand-green);
}

/* Previously these matched the surrounding body text exactly (color: inherit, no
   underline) with the underline only appearing on hover — on mobile, where there's no
   hover state, that left the real product links looking identical to plain text (and to
   the "coming soon" items right next to them), with no way to tell they were clickable.
   Giving them their own color and a visible underline by default makes that obvious on
   any device, not just on desktop hover. */
.category-row-list a {
    color: var(--brand-green-text);
    text-decoration: underline;
    text-decoration-color: var(--brand-green);
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.category-row-list a:hover,
.category-row-list a:focus-visible {
    color: var(--brand-green-hover);
    text-decoration-color: currentColor;
}

.category-row-list-soon {
    color: var(--text-muted);
    font-style: italic;
}

/* Coming-soon items still link to their (Coming Soon) product page now, but should
   keep reading as de-emphasized rather than looking like a fully live product link. */
.category-row-list-soon a {
    color: inherit;
    text-decoration-color: var(--text-muted);
}

.category-row-list-soon a:hover,
.category-row-list-soon a:focus-visible {
    color: var(--brand-charcoal-dark);
}

@media (max-width: 700px) {
    .category-row {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }

    .category-row-media {
        flex-basis: auto;
        width: 100%;
        max-width: 360px;
    }

    .category-row-list {
        align-items: center;
    }

    .category-row-list li {
        padding-left: 0;
    }

    .category-row-list li::before {
        display: none;
    }
}

.product-card-link {
    margin-top: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-green-text);
}

.product-category-heading {
    margin: 48px 0 20px;
    font-size: 1.3rem;
    color: var(--brand-charcoal-dark);
}

.product-category-heading:first-of-type {
    margin-top: 8px;
}

.product-rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-row {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-row:not(.product-row-soon):hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.product-row-soon {
    cursor: default;
}

.product-row-media {
    display: flex;
    flex: 0 0 160px;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 16px;
    background: var(--bg-subtle);
    border-radius: 12px;
    text-decoration: none;
}

.product-row-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-row-media-soon {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.product-row-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
}

.product-row-title {
    margin: 0;
    font-size: 1.1rem;
    color: var(--brand-charcoal-dark);
}

.product-row-title a {
    color: inherit;
    text-decoration: none;
}

.product-row-title a:hover,
.product-row-title a:focus-visible {
    text-decoration: underline;
}

.product-row-desc {
    margin: 2px 0 0;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 62ch;
}

.product-row-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

.product-row-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-charcoal-dark);
}

.product-row-link {
    margin-left: auto;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-green-text);
    text-decoration: none;
}

.product-row-link:hover,
.product-row-link:focus-visible {
    text-decoration: underline;
}

.product-row-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.product-row-cart .quantity-stepper {
    flex-shrink: 0;
}

.product-row-cart .btn-primary {
    flex-shrink: 0;
    white-space: nowrap;
}

.product-row-footer .product-row-cart {
    margin-bottom: 0;
}

.product-row-cart .quantity-stepper {
    height: 38px;
}

.product-row-cart .qty-btn {
    width: 32px;
    font-size: 1rem;
}

.product-row-cart .qty-input {
    width: 40px;
    font-size: 0.9rem;
}

.product-row-cart .btn-primary {
    padding: 9px 18px;
    font-size: 0.9rem;
    border-radius: 8px;
}

.product-row-badge {
    display: inline-block;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

@media (max-width: 640px) {
    .product-row {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .product-row-media {
        flex-basis: auto;
        width: 100%;
        max-width: 360px;
    }

    .product-row-footer {
        flex-direction: column;
        gap: 12px;
    }

    .product-row-link {
        margin-left: 0;
    }

    .product-row-cart {
        justify-content: center;
    }
}

/* ==========================================================================
   NAV ACTIVE STATE
   ========================================================================== */
.main-nav a.active {
    color: var(--brand-charcoal-dark);
    background: var(--brand-green-light);
}

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.product {
    padding: 48px 0 80px;
}

.breadcrumb {
    margin-bottom: 32px;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
    color: var(--border-medium);
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--brand-charcoal-dark);
    text-decoration: underline;
}

.breadcrumb li[aria-current="page"] {
    color: var(--brand-charcoal-dark);
    font-weight: 600;
}

.product-layout {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    margin-bottom: 64px;
}

.product-media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 360px;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
}

.product-media--narrow {
    flex-basis: 240px;
    max-width: 280px;
}

/* Same treatment as .product-row-media / .category-row-media: forces the container
   square regardless of the photo's real proportions, and shows the whole photo
   letterboxed via object-fit rather than cropping it (object-fit: contain, not
   cover) to stay consistent with those. Centered via the parent's flexbox
   align-items/justify-content rather than width/height:100% + object-position —
   the same photo stretched to fill its box and centered only via object-fit's
   default object-position renders bottom-anchored instead of centered on real
   iPhone Safari (WebKit), even though it centers fine on desktop Chrome. */
.product-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-info {
    flex: 1 1 420px;
}

.product-price {
    margin: 4px 0 20px;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--brand-charcoal-dark);
}

.product-lead {
    max-width: 52ch;
    margin: 0 0 28px;
    color: var(--text-muted);
    line-height: 1.6;
}

.product-actions {
    align-items: center;
    margin-bottom: 16px;
}

.quantity-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 48px;
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    overflow: hidden;
}

.qty-btn {
    width: 40px;
    border: none;
    background: var(--bg-subtle);
    color: var(--brand-charcoal-dark);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.qty-btn:hover,
.qty-btn:focus-visible {
    background: var(--brand-green-light);
}

.qty-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
}

.qty-input {
    width: 52px;
    border: none;
    border-left: 1px solid var(--border-medium);
    border-right: 1px solid var(--border-medium);
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    -moz-appearance: textfield;
}

.qty-input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (max-width: 480px) {
    .product-actions {
        align-items: stretch;
    }
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */
.site-footer {
    margin-top: 64px;
    background: var(--brand-charcoal-dark);
    color: rgba(255, 255, 255, 0.7);
}

.footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
    padding: 56px 24px 40px;
}

.footer-brand p {
    max-width: 34ch;
    margin: 16px 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
}

.footer-logo {
    display: block;
    filter: brightness(1.05);
}

.footer-col h3 {
    margin: 0 0 16px;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-green);
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-col a:hover,
.footer-col a:focus-visible {
    color: var(--brand-green);
}

.footer-col li {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom-inner {
    padding: 18px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-legal-links a {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-legal-links a:hover {
    color: #fff;
}

@media (max-width: 720px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .footer-inner {
        grid-template-columns: 1fr;
    }
}

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

/* Honeypot field wrapper for Contact/RequestQuote/Register (see HoneypotHelper) — unlike
   .visually-hidden above, this must also be invisible to screen readers, since a honeypot
   a blind visitor could actually hear and fill in would defeat the whole point (and
   confuse them). The markup pairs this with aria-hidden="true" and tabindex="-1" for that
   reason — .visually-hidden's clip-based technique is deliberately still announced by
   assistive tech, which is exactly wrong here. Positioned off-screen rather than
   display:none/visibility:hidden because some bots skip fields hidden that way. */
.form-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cart-section {
    padding: 48px 0 80px;
}

.cart-title {
    margin: 8px 0 32px;
    font-size: 2rem;
    color: var(--brand-charcoal-dark);
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    align-items: start;
    gap: 32px;
}

/* Same tie-break as .admin-document-list[hidden] below: this class's own
   "display: grid" is an author rule of equal specificity to the browser's
   default "[hidden] { display: none }", so without this the emptied cart's
   stale Subtotal/Total stayed visible even after JS set cartLayout.hidden. */
.cart-layout[hidden] {
    display: none;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    overflow: hidden;
}

.cart-table th {
    padding: 14px 16px;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-light);
}

.cart-table td {
    padding: 18px 16px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.cart-table tr:last-child td {
    border-bottom: none;
}

.cart-product {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 240px;
}

.cart-thumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 6px;
}

.cart-product-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cart-product-name {
    font-weight: 700;
    color: var(--brand-charcoal-dark);
    text-decoration: none;
    font-size: 0.95rem;
}

.cart-product-name:hover {
    color: var(--brand-green-text);
}

.cart-product-sku {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.cart-program {
    margin-top: 4px;
}

.cart-program-toggle {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-green-text);
    cursor: pointer;
}

.cart-program-toggle:hover,
.cart-program-toggle:focus-visible {
    text-decoration: underline;
}

.cart-program-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.cart-program-toggle.has-value {
    color: var(--brand-charcoal-dark);
}

.cart-program-panel {
    margin-top: 10px;
}

.cart-program-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 220px;
}

.cart-program-field span {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.cart-program-input {
    padding: 8px 10px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-dark);
    background: var(--bg-card);
}

.cart-program-input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
    border-color: var(--brand-green);
}

.cart-price,
.cart-subtotal {
    font-weight: 600;
    color: var(--brand-charcoal-dark);
    white-space: nowrap;
}

.cart-remove {
    text-align: right;
}

.remove-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.remove-btn:hover,
.remove-btn:focus-visible {
    background: var(--alert-yellow-light);
    border-color: var(--alert-yellow);
    color: var(--brand-charcoal-dark);
}

.continue-shopping {
    display: inline-block;
    margin-top: 20px;
    color: var(--brand-charcoal-dark);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
}

.continue-shopping:hover {
    color: var(--brand-green-text);
}

.cart-summary {
    min-width: 0;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 96px;
}

.cart-summary h2 {
    margin: 0 0 16px;
    font-size: 1.1rem;
    color: var(--brand-charcoal-dark);
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 0.92rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
}

.cart-summary-total {
    border-bottom: none;
    padding-top: 14px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-charcoal-dark);
}

.cart-checkout-btn {
    display: block;
    width: 100%;
    margin-top: 18px;
    text-align: center;
}

.cart-checkout-btn:disabled {
    cursor: default;
    opacity: 0.85;
}

.btn-spinner {
    display: none;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spinner-rotate 0.6s linear infinite;
}

.btn-primary.is-loading .btn-spinner {
    display: inline-block;
}

@keyframes btn-spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

.cart-empty {
    padding: 64px 24px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
}

.cart-empty-title {
    margin: 0 0 6px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--brand-charcoal-dark);
}

.cart-empty-body {
    margin: 0 0 24px;
    color: var(--text-muted);
}

/* Shown instead of navigating to /shoppingcart when a cart/quick link is clicked
   while the cart has nothing in it — see the "Shopping cart links" block in app.js. */
.cart-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(12px);
    background: var(--brand-charcoal-dark);
    color: var(--text-light);
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cart-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 900px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 640px) {
    .cart-table thead {
        display: none;
    }

    .cart-table,
    .cart-table tbody,
    .cart-table tr,
    .cart-table td {
        display: block;
        width: 100%;
    }

    .cart-table tr {
        padding: 16px;
    }

    .cart-table td {
        padding: 8px 0;
        border-bottom: none;
    }

    .cart-product {
        min-width: 0;
    }

    .cart-table td.cart-price,
    .cart-table td.cart-qty,
    .cart-table td.cart-subtotal {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-top: 10px;
        border-top: 1px dashed var(--border-light);
    }

    .cart-price::before,
    .cart-subtotal::before {
        content: attr(data-label);
        flex-shrink: 0;
        margin-right: auto;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .cart-remove {
        text-align: left;
        padding-top: 10px;
    }
}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    align-items: start;
    gap: 32px;
}

/* Grid items default to min-width: auto (their content's intrinsic minimum),
   not 0 — Chromium is forgiving about this in a lot of cases, but WebKit
   (Safari, and every iOS "browser" since Apple requires them to use WebKit
   under the hood) enforces it more strictly and will let this form push
   wider than its grid track, overflowing the page horizontally on phones. */
.checkout-form {
    min-width: 0;
}

.checkout-block {
    padding: 24px;
    margin-bottom: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
}

.checkout-block h2 {
    margin: 0 0 18px;
    font-size: 1.05rem;
    color: var(--brand-charcoal-dark);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-charcoal-dark);
}

.form-field-full {
    grid-column: 1 / -1;
}

/* Live character counter shown next to a field's label — see the data-char-count-for
   IIFE in app.js. Kept visually lighter than the bold label text it sits beside. */
.char-count {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-muted);
    float: right;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    background: var(--bg-card);
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--text-dark);
    resize: vertical;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
    border-color: var(--brand-green);
}

.form-field em {
    font-style: normal;
    font-weight: 400;
    color: var(--text-muted);
}

/* Container for a Clover Hosted iFrame field (card number/expiration/CVV/postal
   code). Clover mounts its own <iframe> inside this div at whatever height it
   defaults to (which reads as a tall, multi-line box unless pinned down) — so this
   fixes a single-line height and clips the iframe to it, matching the ordinary text
   inputs above it. */
.clover-field {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 4px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    background: var(--bg-card);
    overflow: hidden;
}

.clover-field iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

.checkout-payment-error {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #FDECEA;
    border: 1px solid #F3C2BE;
    color: #B3261E;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
}

.shipping-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shipping-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.shipping-option:hover {
    border-color: var(--border-medium);
}

.shipping-option:has(input:checked),
.shipping-option.is-selected {
    border-color: var(--brand-green);
    background: var(--brand-green-light);
}

.shipping-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-green);
    flex-shrink: 0;
}

.shipping-option-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.shipping-option-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--brand-charcoal-dark);
}

.shipping-option-eta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.shipping-option-price {
    font-weight: 700;
    color: var(--brand-charcoal-dark);
    font-size: 0.92rem;
    white-space: nowrap;
}

.checkout-disclaimer {
    margin: 16px 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Shown once live UPS rates have replaced the flat placeholders in the shipping
   options above (see the "Checkout live shipping rates" block in app.js). */
.checkout-shipping-note {
    margin: 12px 0 0;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-muted);
}

/* Shown when UPS actively rejects the entered address (bad ZIP, unresolvable address,
   etc.) — see setValidationError in the "Checkout live shipping rates" block in app.js.
   Same red palette as .checkout-payment-error. */
.checkout-shipping-error {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: #FDECEA;
    border: 1px solid #F3C2BE;
    color: #B3261E;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Applied to #shippingOptions while UPS has rejected the currently-entered address —
   each option is disabled and its price blanked out (see setValidationError in app.js)
   rather than left showing a flat-rate number for an address that likely can't ship. */
.shipping-options.is-unavailable .shipping-option {
    cursor: not-allowed;
    opacity: 0.55;
}

.shipping-options.is-unavailable .shipping-option:hover {
    border-color: var(--border-light);
}

/* ==========================================================================
   INVOICE (ORDER CONFIRMATION)
   ========================================================================== */
.invoice-section {
    padding: 48px 0 96px;
}

.invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 24px;
    margin-bottom: 32px;
    border-bottom: 2px solid var(--brand-charcoal-dark);
}

.invoice-header-brand img {
    width: 160px;
    aspect-ratio: 20 / 3;
    margin-bottom: 12px;
}

.invoice-header-brand p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.invoice-header-meta {
    text-align: right;
}

.invoice-header-meta h1 {
    margin: 0 0 8px;
}

.invoice-header-meta p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.invoice-parties {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.invoice-party h2 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.invoice-party p {
    margin: 0 0 4px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.invoice-totals {
    max-width: 320px;
    margin: 16px 0 0 auto;
}

.invoice-program-note {
    margin: 20px 0 0;
    font-weight: 600;
    color: var(--brand-green-text);
}

.invoice-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
}

.invoice-empty {
    max-width: 480px;
    margin: 0 auto;
    padding: 64px 24px;
    text-align: center;
}

@media (max-width: 640px) {
    .invoice-header {
        flex-direction: column;
    }

    .invoice-header-meta {
        text-align: left;
    }

    .invoice-parties {
        grid-template-columns: 1fr;
    }

    .invoice-totals {
        max-width: none;
        margin-left: 0;
    }
}

@media print {
    .site-header,
    .site-footer,
    .breadcrumb,
    .invoice-actions {
        display: none !important;
    }

    .invoice-section {
        padding: 0;
    }

    body {
        background: #fff;
    }
}

/* ==========================================================================
   AUTH (LOGIN)
   ========================================================================== */
.auth-section {
    padding: 64px 0 96px;
}

.auth-card {
    max-width: 420px;
    margin: 0 auto;
    padding: 36px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.auth-card h1 {
    margin: 0 0 8px;
    font-size: 1.6rem;
    text-align: center;
    color: var(--brand-charcoal-dark);
}

.auth-subtitle {
    margin: 0 0 28px;
    text-align: center;
    font-size: 0.92rem;
    color: var(--text-muted);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-form .form-field-full {
    grid-column: unset;
}

.auth-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    font-size: 0.85rem;
}

/* The "Don't have an account?" / "Already have an account?" footer sits directly in
   .auth-card, right after </form> (unlike the Remember-me/Forgot-password row, which
   reuses this same class but nested inside the form) — this child combinator only
   targets that outer one, giving it breathing room from the submit button above without
   changing the spacing of the inner row. */
.auth-card > .auth-form-footer {
    margin-top: 18px;
}

.auth-form-footer a {
    color: var(--brand-green-text);
    font-weight: 600;
    text-decoration: none;
}

.auth-form-footer a:hover {
    text-decoration: underline;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}

.checkbox-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--brand-charcoal-dark);
}

.checkout-block h3 {
    margin: 24px 0 14px;
    font-size: 0.92rem;
    color: var(--brand-charcoal-dark);
}

.checkout-block h3:first-of-type {
    margin-top: 0;
}

.auth-card .btn-primary {
    width: 100%;
    text-align: center;
}

.auth-error {
    margin: 4px 0 0;
    padding: 10px 14px;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: #B3261E;
    background: #FCEAE9;
    border: 1px solid #F1B3AE;
    border-radius: 6px;
}

.auth-error ul {
    margin: 0;
    padding-left: 18px;
}

/* Per-field validation messages (asp-validation-for) — lighter than the
   boxed .auth-error summary, sits directly under the input. */
.field-error {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #B3261E;
}

/* ASP.NET Core's validation tag helpers always render the summary/field
   elements; these classes mark them as currently valid/empty so they
   collapse instead of showing an empty box. */
.field-validation-valid,
.validation-summary-valid {
    display: none;
}

/* Request-a-Quote form (B2B bulk pricing) and the return-request form (RMA) both
   reuse .auth-card, but need more room than the 420px login/register width for their
   multi-column field grids and item-line rows. */
.quote-form,
.return-request-form {
    max-width: 720px;
}

.quote-form h2,
.return-request-form h2 {
    margin: 24px 0 12px;
    font-size: 1.1rem;
    color: var(--brand-charcoal-dark);
}

.quote-form h2:first-of-type,
.return-request-form h2:first-of-type {
    margin-top: 0;
}

.quote-form-note {
    margin: -4px 0 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.quote-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

/* Wraps the return-item-row list on Account/ReturnRequest so the group as a whole
   gets breathing room from the subtitle above it and the notes field below it,
   separately from each row's own internal padding. */
.return-items-list {
    margin: 8px 0 24px;
}

.quote-form button[type="submit"],
.return-request-form button[type="submit"] {
    margin-top: 28px;
}

.quote-items-header {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    padding: 0 2px;
}

.quote-item-row {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
}

.quote-item-row input,
.quote-item-row select {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    background: var(--bg-card);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-dark);
}

@media (max-width: 480px) {
    .auth-card.quote-form,
    .auth-card.return-request-form {
        padding: 24px 16px;
    }

    .quote-items-header,
    .quote-item-row {
        grid-template-columns: 1fr 88px;
        gap: 8px;
    }

    .quote-item-row input,
    .quote-item-row select {
        padding: 10px 8px;
        font-size: 0.85rem;
    }
}

.quote-confirmation,
.return-request-confirmation,
.contact-confirmation {
    text-align: center;
}

.quote-confirmation h2,
.return-request-confirmation h2,
.contact-confirmation h2 {
    margin: 0 0 12px;
}

.quote-confirmation p,
.return-request-confirmation p,
.contact-confirmation p {
    margin: 0 0 20px;
    color: var(--text-muted);
}

/* Return-request item picker on Account/ReturnRequest — one row per order line item,
   with a checkbox to include it, a quantity capped at what was purchased, and a reason
   dropdown. */
.return-item-row {
    display: grid;
    grid-template-columns: auto 1fr 90px 180px;
    align-items: start;
    gap: 10px 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-light);
}

.return-item-row:first-child {
    padding-top: 4px;
}

.return-item-row:last-child {
    border-bottom: none;
    padding-bottom: 4px;
}

.return-item-row input[type="checkbox"] {
    margin-top: 3px;
}

.return-item-row select,
.return-item-row input[type="number"] {
    padding: 8px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    background: var(--bg-card);
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text-dark);
}

.return-item-name {
    display: block;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-dark);
}

.return-item-name .admin-muted {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
}

/* ==========================================================================
   STATUS BADGES (ORDER HISTORY)
   ========================================================================== */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-badge.status-delivered {
    background: var(--brand-green-light);
    color: var(--brand-charcoal-dark);
}

.status-badge.status-shipped {
    background: var(--alert-yellow-light);
    color: var(--brand-charcoal-dark);
}

.status-badge.status-processing {
    background: var(--bg-subtle);
    color: var(--text-muted);
}

/* ==========================================================================
   ACCOUNT PAGES
   ========================================================================== */
.account-quick-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.account-quick-links a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--brand-charcoal-dark);
    text-decoration: none;
}

.account-quick-links a:hover,
.account-quick-links a:focus-visible {
    background: var(--brand-green-light);
}

.account-quick-links a.is-danger {
    color: #B3261E;
}

.account-quick-links form {
    display: contents;
}

.account-quick-links .account-quick-link-btn {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    color: #B3261E;
    cursor: pointer;
}

.account-quick-links .account-quick-link-btn:hover,
.account-quick-links .account-quick-link-btn:focus-visible {
    background: var(--brand-green-light);
}

.verify-email-banner {
    margin: 0 0 24px;
    padding: 16px 20px;
    border-radius: 10px;
    background: #FFF7E0;
    border: 1px solid #F0D28A;
    color: var(--brand-charcoal-dark);
}

.verify-email-banner p {
    margin: 0 0 12px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.verify-email-banner a {
    word-break: break-all;
    color: var(--brand-green-text);
}

.verify-email-banner form {
    margin: 0;
}

.verify-email-banner .btn-secondary {
    padding: 8px 18px;
    font-size: 0.85rem;
}

/* Checkout's "create an account and save 10%" offer (guests) and its "discount
   applied" confirmation (signed-in, eligible accounts) — same amber-card look as
   .verify-email-banner for the offer, a green variant for the success state. */
.checkout-promo-banner {
    margin: 0 0 24px;
    padding: 16px 20px;
    border-radius: 10px;
    background: #FFF7E0;
    border: 1px solid #F0D28A;
    color: var(--brand-charcoal-dark);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.checkout-promo-banner p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    flex: 1 1 260px;
}

.checkout-promo-banner .btn-secondary {
    padding: 8px 18px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.checkout-promo-banner-success {
    background: var(--brand-green-light);
    border-color: var(--brand-green);
}

.checkout-promo-banner-success p {
    color: var(--brand-green-text);
}

.checkout-verify-notice {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #FFF7E0;
    border: 1px solid #F0D28A;
    color: var(--brand-charcoal-dark);
}

.checkout-verify-notice p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.checkout-verify-notice p + p {
    margin-top: 8px;
}

.account-saved-note {
    display: none;
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--brand-green-light);
    color: var(--brand-charcoal-dark);
    font-size: 0.85rem;
    font-weight: 600;
}

.account-saved-note.is-visible {
    display: block;
}

.order-id {
    font-weight: 700;
    color: var(--brand-charcoal-dark);
}

.order-items-list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Admin > Shipping page — label creation status/actions per order row. */
.admin-label-cell {
    min-width: 200px;
}

.admin-packages-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-packages-list:not(:empty) {
    margin-bottom: 12px;
}

/* One UPS shipment's worth of boxes — a shared Master Tracking Number heading (when
   there's more than one box) plus one row per box. */
.admin-shipment-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-shipment-master {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.admin-tracking {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.admin-tracking-actions {
    display: flex;
    gap: 8px;
}

/* Compact number inputs for the inline-editable rows on Admin > Shipping Settings' UPS
   Ground discount tier table (see ShippingSettings.cshtml) — a plain .form-field input's
   full width would blow out the table's column widths. */
.admin-tier-input {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font: inherit;
}

/* A box whose label has been voided — muted and struck through, but still visible as a
   record rather than disappearing from the order. */
.admin-tracking-voided {
    opacity: 0.6;
}

.admin-tracking-voided .admin-tracking-number {
    text-decoration: line-through;
}

/* Small "(2 boxes)" note next to a customer-facing tracking link. */
.order-tracking-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 4px;
}

/* Admin > Shipping — per-box weight entry when creating one or more labels. */
.admin-add-package {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.admin-package-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.admin-package-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-package-weight {
    width: 100px;
    padding: 6px 8px;
    font-size: 0.85rem;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text-dark);
}

.admin-remove-row-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    line-height: 1;
    border: 1px solid var(--border-light);
    border-radius: 50%;
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
}

.admin-remove-row-btn:hover {
    color: #B3261E;
    border-color: #B3261E;
}

.admin-add-row-btn {
    font-size: 0.8rem;
    padding: 4px 10px;
}

.admin-tracking-number {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: 0.01em;
}

/* Tracking number link shown on My Orders / Order Detail once a UPS label exists. */
.order-tracking-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-green-text);
    text-decoration: none;
}

.order-tracking-link:hover {
    text-decoration: underline;
}

/* My Orders "View" link + "Reorder" button, stacked in the same actions cell. */
.order-row-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}

.order-row-actions .order-reorder-btn {
    padding: 8px 16px;
    font-size: 0.82rem;
}

@media (max-width: 700px) {
    .order-row-actions {
        justify-content: space-between;
        white-space: normal;
    }
}

.admin-label-error {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: #B3261E;
}

.checkout-summary-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 16px;
    padding: 0 0 16px;
    list-style: none;
    border-bottom: 1px solid var(--border-light);
}

.checkout-summary-items li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkout-summary-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.checkout-summary-item-info .cart-product-name {
    font-size: 0.88rem;
}

.checkout-summary-item-price {
    font-weight: 600;
    color: var(--brand-charcoal-dark);
    font-size: 0.9rem;
    white-space: nowrap;
}

.checkout-summary-item-program {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-green-text);
}

.checkout-discount {
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border-light);
}

.checkout-discount-row {
    display: flex;
    gap: 8px;
}

.checkout-discount-row input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    background: var(--bg-card);
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--text-dark);
    text-transform: uppercase;
}

.checkout-discount-row .btn-secondary {
    padding: 10px 16px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.checkout-discount-message {
    margin: 8px 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-green-text);
}

.checkout-discount-message.is-error {
    color: #B3261E;
}

.checkout-back-link {
    display: block;
    margin-top: 14px;
    text-align: center;
}

@media (max-width: 900px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 560px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field {
        grid-column: 1 / -1;
    }
}

.product-note {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.product-note a {
    color: var(--brand-charcoal-dark);
    font-weight: 600;
}

.section-links {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.section-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.section-links a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: var(--bg-subtle);
    color: var(--brand-charcoal-dark);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.section-links a:hover,
.section-links a:focus-visible {
    background: var(--brand-green-light);
    border-color: var(--brand-green);
}

.product-details {
    display: flex;
    flex-direction: column;
    gap: 48px;
    margin-bottom: 64px;
}

.product-detail-block {
    scroll-margin-top: 96px;
}

.product-detail-block h2 {
    margin: 0 0 16px;
    font-size: 1.4rem;
    color: var(--brand-charcoal-dark);
}

/* A single large section collapsed behind one toggle (e.g. "Programming" on the
   hotline-telephone pages) — not a repeatable-item accordion like .use-case, just
   one <details> around the whole block's content, closed by default so it doesn't
   dominate the page on load. The #id anchor stays on this same <details> element
   (it just replaces the old wrapping <div>), so the section-nav link at the top of
   the page still scrolls to the right spot even while it's collapsed. Given the same
   card treatment as .use-case/.faq-item (background + border + shadow) so it reads
   as an obviously clickable component instead of a plain heading with a stray "+". */
.detail-collapsible {
    padding: 6px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.detail-collapsible summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
}

.detail-collapsible summary::-webkit-details-marker {
    display: none;
}

.detail-collapsible summary h2 {
    margin: 0;
}

.detail-collapsible summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--brand-green-text);
    transition: transform 0.15s ease;
}

.detail-collapsible[open] summary::after {
    transform: rotate(45deg);
}

.detail-collapsible[open] {
    padding-bottom: 28px;
}

@media (max-width: 600px) {
    .detail-collapsible {
        padding: 4px 20px;
    }

    .detail-collapsible[open] {
        padding-bottom: 24px;
    }

    .detail-collapsible summary {
        padding: 14px 0;
    }
}

.product-detail-block p {
    max-width: 70ch;
    color: var(--text-muted);
    line-height: 1.65;
}

.info-card {
    max-width: none;
    padding: 24px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--brand-green);
}

.info-card p {
    margin: 0 0 14px;
    max-width: none;
}

.info-card p:last-child {
    margin-bottom: 0;
}

/* When an .app-grid or .use-case-list immediately follows an .info-card in the
   same .product-detail-block (e.g. PCG308's "How It Works" section), both are
   zero-margin blocks on their own, so without this they'd butt right up
   against the card with no visual gap. */
.info-card + .app-grid,
.info-card + .use-case-list {
    margin-top: 24px;
}

.info-card code,
.product-detail-block code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    font-size: 0.9em;
    color: var(--brand-charcoal-dark);
}

.product-detail-block h3 {
    margin: 32px 0 16px;
    font-size: 1.1rem;
    color: var(--brand-charcoal-dark);
}

.table-note {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.register-table td:first-child {
    font-weight: 700;
    color: var(--brand-charcoal-dark);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .register-table {
        max-width: none;
    }

    .register-table thead {
        display: none;
    }

    .register-table,
    .register-table tbody,
    .register-table tr,
    .register-table td {
        display: block;
        width: 100%;
    }

    .register-table tr {
        margin-bottom: 14px;
        padding: 14px 16px;
        border: 1px solid var(--border-light);
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
    }

    .register-table td {
        padding: 6px 0;
        border-bottom: none;
        white-space: normal;
    }

    .register-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
}

.code-examples {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.code-example h4 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    color: var(--brand-charcoal-dark);
}

.code-example pre {
    margin: 0;
    padding: 18px 20px;
    overflow-x: auto;
    background: var(--brand-charcoal-dark);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.code-example code {
    display: block;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--brand-green-light);
    background: none;
    border: none;
    padding: 0;
    white-space: pre;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-grid li {
    padding: 24px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.app-grid li:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.app-grid .step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--brand-green);
    color: var(--text-dark);
    font-weight: 700;
    font-size: 0.85rem;
}

.app-grid strong {
    display: block;
    margin-bottom: 8px;
    color: var(--brand-charcoal-dark);
}

.app-grid span {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.use-case-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.use-case {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.use-case-number {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-green);
    color: var(--text-dark);
    font-weight: 700;
    font-size: 0.95rem;
}

.use-case-body p {
    margin: 0 0 10px;
    max-width: none;
    color: var(--text-muted);
    line-height: 1.6;
}

.use-case-body p:last-child {
    margin-bottom: 0;
}

.use-case-body strong {
    color: var(--brand-charcoal-dark);
}

/* Product pages with more than one Typical Applications entry (e.g. Tc100, TS350,
   TS351, PCG308) use a <details>/<summary> accordion here, same pattern as
   .faq-item — every .use-case on a page shares a "name" attribute so the browser
   keeps only one open at a time natively, no JS required. */
details.use-case {
    padding: 6px 28px;
}

details.use-case summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
}

details.use-case summary::-webkit-details-marker {
    display: none;
}

details.use-case summary::after {
    content: "+";
    margin-left: auto;
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--brand-green-text);
    transition: transform 0.15s ease;
}

details.use-case[open] summary::after {
    transform: rotate(45deg);
}

details.use-case summary h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--brand-charcoal-dark);
}

details.use-case .use-case-body {
    padding: 0 0 24px;
}

/* A page with only a single Typical Applications entry (e.g. LX350) isn't wrapped
   in <details> — nothing to collapse, so it stays a plain always-visible card in
   the original side-by-side badge + body layout. */
div.use-case {
    display: flex;
    gap: 20px;
    padding: 24px 28px;
}

.use-case-body h3 {
    margin: 4px 0 12px;
    font-size: 1.05rem;
    color: var(--brand-charcoal-dark);
}

@media (max-width: 600px) {
    details.use-case {
        padding: 4px 20px;
    }

    details.use-case summary {
        gap: 12px;
        padding: 14px 0;
    }

    div.use-case {
        flex-direction: column;
        gap: 12px;
        padding: 20px;
    }

    .use-case-number {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
}

.spec-table {
    width: 100%;
    max-width: 640px;
    border-collapse: collapse;
}

.spec-table th,
.spec-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

.spec-table th {
    width: 220px;
    color: var(--text-muted);
    font-weight: 600;
}

.spec-table td {
    color: var(--brand-charcoal-dark);
    font-weight: 500;
}

.doc-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.doc-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    color: var(--brand-charcoal-dark);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.doc-list a:hover {
    background: var(--brand-green-light);
    border-color: var(--brand-green);
}

.product-cta {
    padding: 48px 32px;
    border-radius: 20px;
    background: var(--brand-green-light);
    border: 1px solid var(--border-light);
    text-align: center;
}

.product-cta h2 {
    margin: 0 0 12px;
    color: var(--brand-charcoal-dark);
}

.product-cta p {
    margin: 0 0 24px;
    color: var(--text-muted);
}

@media (max-width: 860px) {
    .product-layout {
        flex-direction: column;
    }

    .product-media {
        flex-basis: auto;
        max-width: none;
        width: 100%;
    }

    .spec-table th {
        width: 45%;
    }
}

/* ==========================================================================
   FAQ PAGE (accordion styling)
   ========================================================================== */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
}

.faq-item {
    padding: 6px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.faq-item summary {
    padding: 18px 0;
    font-weight: 700;
    color: var(--brand-charcoal-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--brand-green-text);
    transition: transform 0.15s ease;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item p {
    margin: 0 0 20px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Preserves the line breaks an admin typed into an article's Body textarea (see
   FaqArticleModel.Body) without needing to store/sanitize HTML — plain text in, the
   same paragraph breaks back out. */
.faq-article-body {
    white-space: pre-line;
}

/* The Resource Area under each FAQ article's body — a short "Related links" label
   followed by a compact pill list, visually distinct from the prose above it. */
.faq-resource-area {
    margin: 0 0 20px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.faq-resource-area-label {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.faq-resource-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.faq-resource-list li {
    display: contents;
}

.faq-resource-list a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--brand-green-light);
    color: var(--brand-green-text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.faq-resource-list a:hover,
.faq-resource-list a:focus-visible {
    background: var(--brand-green);
    color: #fff;
}

/* Tighter vertical rhythm than the site-wide .section default (72px top+bottom, i.e.
   144px between two stacked sections) — the FAQ page can stack several topic sections
   in a row, so that much dead space between one topic and the next reads as too loose. */
.faq-section {
    padding: 32px 0;
}

.faq-section .section-heading {
    margin-bottom: 16px;
}

/* Documents page (/support/documents) — same tighter vertical rhythm as .faq-section,
   since this page can also stack several topic sections in a row. */
.documents-section {
    padding: 32px 0;
}

.documents-section .section-heading {
    margin-bottom: 16px;
}

.documents-link-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.documents-link-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    color: var(--brand-charcoal-dark);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.documents-link-list a svg {
    flex-shrink: 0;
    color: var(--brand-green-text);
}

.documents-link-list a:hover,
.documents-link-list a:focus-visible {
    border-color: var(--brand-green);
    background: var(--brand-green-light);
}

.support-contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: start;
    max-width: 960px;
    margin: 0 auto;
}

.support-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.support-contact-info {
    padding: 32px;
    background: var(--bg-subtle);
    border-radius: 16px;
}

.support-contact-info h3 {
    margin: 0 0 20px;
    color: var(--brand-charcoal-dark);
}

.support-contact-info ul {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.support-contact-info li strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.support-contact-info li a,
.support-contact-info li span {
    color: var(--brand-charcoal-dark);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.5;
}

.support-contact-info li a:hover {
    color: var(--brand-green-text);
    text-decoration: underline;
}

@media (max-width: 760px) {
    .support-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ADMIN DASHBOARD (Pages/Admin/*) — its own chrome (sidebar + topbar) instead
   of the public site's header/footer, since _AdminLayout.cshtml replaces
   _Layout.cshtml for everything under /admin. Reuses the same color palette
   and several public-site classes (.cart-table, .status-badge, .form-field,
   .btn-primary/.btn-secondary) rather than re-styling equivalents from scratch.
   ========================================================================== */
.admin-shell {
    display: flex;
    min-height: 100vh;
    align-items: flex-start;
}

.admin-sidebar {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px 16px;
    background: var(--brand-charcoal-dark);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.admin-brand {
    display: block;
    margin-bottom: 24px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    text-decoration: none;
}

.admin-brand span {
    display: block;
    margin-top: 2px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-green);
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.admin-nav a {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

.admin-nav a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.admin-nav a.is-active {
    background: var(--brand-green);
    color: var(--brand-charcoal-dark);
}

.admin-back-link {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.admin-back-link:hover {
    color: #FFFFFF;
}

.admin-content {
    flex: 1;
    min-width: 0;
}

.admin-topbar {
    padding: 22px 32px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
}

.admin-topbar h1 {
    margin: 0;
    font-size: 1.4rem;
    color: var(--brand-charcoal-dark);
}

.admin-main {
    padding: 24px 32px 56px;
    max-width: 1200px;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.admin-stat-grid-compact {
    margin-bottom: 0;
}

.admin-stat-card {
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
}

/* Same look as .admin-stat-card, but for the Dashboard's "jump to the thing that
   needs attention" cards, which are actual links rather than static numbers. */
.admin-stat-card-link {
    display: block;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.admin-stat-card-link:hover {
    border-color: var(--brand-charcoal-dark);
    transform: translateY(-1px);
}

.admin-stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--brand-charcoal-dark);
}

.admin-stat-label {
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* AR aging buckets on the Unpaid Net 30 Invoices dashboard panel — five compact stat
   cards (Current/1-30/31-60/61-90/90+) sitting above the invoice table itself. */
.admin-aging-grid {
    margin-bottom: 18px;
}

.admin-aging-card-total {
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-charcoal-dark);
}

.admin-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.admin-panel {
    padding: 20px 24px;
    margin-bottom: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
}

/* Wraps an irreversible action (Delete Account, etc.) — a faint red border/background
   sets it visually apart from the normal .admin-panel blocks around it, same palette as
   .btn-danger/.admin-alert-error. */
.admin-panel-danger {
    border-color: #F3C2BE;
    background: #FDECEA;
}

.admin-panel h2 {
    margin: 0 0 14px;
    font-size: 1.05rem;
    color: var(--brand-charcoal-dark);
}

.admin-panel h3 {
    margin: 16px 0 8px;
    font-size: 0.9rem;
    color: var(--brand-charcoal-dark);
}

.admin-divider {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 18px 0;
}

.admin-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.admin-panel-note {
    margin: -8px 0 16px;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.admin-empty-note {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.admin-export-link {
    margin-left: auto;
}

.admin-search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.admin-search-bar input[type="search"] {
    flex: 1 1 280px;
    min-width: 200px;
    padding: 9px 14px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    font-size: 0.92rem;
}

.admin-filter-chip {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-medium);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
}

.admin-filter-chip:hover {
    border-color: var(--brand-green);
    color: var(--brand-charcoal-dark);
}

.admin-filter-chip.is-active {
    background: var(--brand-charcoal-dark);
    border-color: var(--brand-charcoal-dark);
    color: #FFFFFF;
}

.admin-muted {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.admin-inline-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--brand-green-text);
    text-decoration: none;
}

.admin-inline-link:hover {
    text-decoration: underline;
}

/* Same look as the <a> usage above, but reset for <button type="submit"> — used where
   the action needs to POST a form (e.g. toggling a discount code active/inactive)
   rather than navigate. */
button.admin-inline-link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.admin-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 12px;
}

.admin-inline-form .form-field {
    flex: 1;
    min-width: 200px;
}

/* Per-row expandable detail (Admin &gt; Quotes, Admin &gt; Returns) — a plain <details>
   disclosure so the list stays scannable while still surfacing line items, notes, and
   a status-update form without needing a separate detail page per request. */
.admin-detail-disclosure {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--bg-subtle, #F1F5F9);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    min-width: 320px;
}

.admin-detail-disclosure p {
    margin: 0 0 8px;
    font-size: 0.88rem;
    color: var(--text-dark);
}

.admin-detail-disclosure ul {
    margin: 0 0 12px;
    padding-left: 18px;
    font-size: 0.88rem;
    color: var(--text-dark);
}

details > summary.admin-inline-link {
    cursor: pointer;
    list-style: none;
}

details > summary.admin-inline-link::-webkit-details-marker {
    display: none;
}

.admin-checkbox-field {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--brand-charcoal-dark);
}

.admin-checkbox-field input[type="checkbox"] {
    width: auto;
}

.admin-form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.admin-alert {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
}

.admin-alert-success {
    background: var(--brand-green-light);
    border: 1px solid #C7DDA8;
    color: var(--brand-green-text);
}

.admin-alert-error {
    background: #FDECEA;
    border: 1px solid #F3C2BE;
    color: #B3261E;
}

.admin-order-totals {
    margin: 12px 0 16px;
}

.admin-notes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.admin-notes-list li {
    padding: 10px 12px;
    background: var(--bg-subtle);
    border-radius: 8px;
}

.admin-notes-list p {
    margin: 0 0 4px;
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* Additional OrderStatus badge colors — status-delivered, status-shipped, and
   status-processing already existed in this stylesheet (from the original static
   template) and are reused as-is by OrderStatusDisplay.BadgeClass in CartModel.cs. */
.status-badge.status-placed {
    background: var(--bg-subtle);
    color: var(--text-muted);
}

.status-badge.status-cancelled {
    background: #FDECEA;
    color: #B3261E;
}

.status-badge.status-refunded {
    background: #EDE9FE;
    color: #5B21B6;
}

/* Admin > Edit Product: photo preview + upload forms, document list — see
   Pages/Admin/ProductEdit.cshtml. */
.admin-product-photo-preview {
    display: block;
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    margin-bottom: 16px;
    object-fit: contain;
}

.admin-upload-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 8px;
}

.admin-document-list,
.admin-image-size-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

/* The [hidden] attribute is normally enough on its own, but this class's own
   "display: flex" above is an author rule of equal specificity to the browser's
   default "[hidden] { display: none }" — and author rules beat user-agent rules on a
   tie, so without this the list would stay visible even while hidden is set. */
.admin-document-list[hidden],
.admin-image-size-list[hidden] {
    display: none;
}

.admin-image-size-list li,
.admin-document-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-subtle);
    border-radius: 8px;
}

.admin-inline-danger {
    color: #B3261E;
}

/* Admin > Edit Product — inline failure message under the Photo/Documents panels when
   an AJAX remove (see app.js) fails; same look as .admin-label-error on Admin > Shipping. */
.admin-inline-error {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: #B3261E;
}

/* Admin > Edit Product — inline "Saved." confirmation next to the Save Changes button
   after an AJAX save; same color as .admin-alert-success. */
.admin-inline-success {
    font-size: 0.82rem;
    color: var(--brand-green-text);
}

/* Admin > FAQ narrow "Sort" column input on the sections list table. */
.admin-sort-input {
    width: 80px;
}

/* Admin > FAQ > Section detail — each article's editable panel plus its nested
   Resource Area (links list + the two add-a-resource forms below it). */
.admin-faq-article-panel > form:first-of-type {
    margin-bottom: 8px;
}

.admin-faq-resources {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

.admin-faq-resources h3 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.admin-faq-resource-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.admin-faq-resource-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 12px;
    background: var(--bg-subtle);
    border-radius: 8px;
}

.admin-faq-resource-list .admin-muted {
    font-size: 0.78rem;
    word-break: break-all;
}

.admin-faq-resource-list li form {
    margin: 0 0 0 auto;
}

.admin-faq-resource-forms {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
}

@media (max-width: 900px) {
    .admin-shell {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
    }

    .admin-nav {
        flex-direction: row;
    }

    .admin-back-link {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        white-space: nowrap;
    }

    .admin-main,
    .admin-topbar {
        padding-left: 20px;
        padding-right: 20px;
    }

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