/* =====================================================================
   e-5HOP — the application stylesheet
   ---------------------------------------------------------------------
   ONE file for the admin panel, the client portal and the public app
   pages. Before this, every page carried its own 200-550 line <style>
   block, which is why the fifteen admin sidebars had drifted into
   fifteen slightly different sidebars.

   THE ONE RULE IN HERE: no colour is written in this file.

   Every colour is var(--e5-…), and every one of those tokens is emitted
   by includes/layout/tokens.php from config/theme.php - the file the
   merchant edits in Layout & Theme. A hex code typed into this
   stylesheet would be a colour the merchant cannot change, which is the
   one thing this design system is not allowed to do. The guard fails on
   any literal here; the only exceptions are rgba(0,0,0,…) and
   rgba(255,255,255,…), used for shadows and for the translucent hover
   wash on dark chrome, where the value is an opacity effect rather than
   a choice of colour.

   The :root below therefore carries GEOMETRY ONLY. tokens.php is loaded
   after this file and supplies everything else.

   Structure, spacing, type scale and component shapes follow FAKTUUR's
   application design - re-implemented here against this codebase's own
   tokens, not copied from it.
   ===================================================================== */

:root {
    /* ---- geometry. No colour. -------------------------------------- */

    /* The sidebar's width, and the two numbers a nav item is built from.
       The brand block's left padding is derived from them with calc(), so
       the logo and the menu labels cannot drift onto different verticals:
       change either value and both move together. */
    --e5-nav-w:        260px;
    --e5-nav-gutter:   12px;
    --e5-nav-pad:      14px;

    /* ONE header height for two edges: the sidebar brand's divider and
       the content header's rule. Both boxes are border-box, so each 1px
       bottom border sits INSIDE this height and the two bottom edges land
       on the same y. Content-sizing them instead is how they end up tens
       of pixels apart. Do not replace either use with a literal. */
    --e5-header-h:     70px;

    --e5-pad-content:  30px;

    /* Two different rhythms, deliberately. --e5-gap is the merchant's
       section_spacing and separates cards and grids; --e5-gap-field is the
       gap INSIDE a form, which is a typographic decision rather than a layout
       one. Driving both from section_spacing made a shop that likes airy
       sections get 32px between a label and the next label. */
    --e5-gap:          20px;
    --e5-gap-field:    18px;

    /* Shape and type have theme-driven values; these are only the
       fallbacks that keep the file readable on its own. tokens.php
       overrides all of them. */
    --e5-r:            15px;
    --e5-r-sm:         calc(var(--e5-r) * 0.7);
    --e5-r-pill:       999px;
    --e5-fs-base:      16px;
    --e5-fw-heading:   700;
    --e5-fw-body:      400;
    --e5-fw-btn:       600;
    --e5-font:         system-ui, -apple-system, "Segoe UI", sans-serif;
    --e5-font-body:    system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Type scale, derived from the merchant's base size so the whole UI
       breathes with it rather than only the paragraphs. */
    --e5-fs-xs:        calc(var(--e5-fs-base) * 0.75);
    --e5-fs-sm:        calc(var(--e5-fs-base) * 0.85);
    --e5-fs-md:        var(--e5-fs-base);
    --e5-fs-lg:        calc(var(--e5-fs-base) * 1.1);
    --e5-fs-xl:        calc(var(--e5-fs-base) * 1.5);
    --e5-fs-2xl:       calc(var(--e5-fs-base) * 1.85);

    /* Neutral elevation. Opacity effects, not colour choices. */
    --e5-shadow:       0 1px 3px rgba(0, 0, 0, 0.08);
    --e5-shadow-card:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --e5-shadow-lift:  0 12px 32px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.05);
    /* Hover on cards and buttons: a soft shadow and a slightly darker border,
       never movement - nothing jumps under the pointer. */
    --e5-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.07);
    --e5-border-hover: rgba(0, 0, 0, 0.16);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* =====================================================================
   TYPE PAIRING
   ---------------------------------------------------------------------
   Two families, the way FAKTUUR uses them: the display family
   (--e5-font, Montserrat by default) for anything that is a label rather
   than prose - headings, the nav, buttons, badges, the big stat figures -
   and the text family (--e5-font-body, Inter by default) for everything
   the reader actually reads: body copy, table cells, form fields.

   Montserrat is geometric and wide. At the 12px base this shop runs it
   made table cells wrap that had no business wrapping, which is exactly
   why FAKTUUR pairs it with Inter rather than setting the whole panel in
   it. Both tokens come from $theme, so a merchant can still put the whole
   interface in one family by pointing them at the same value.
   ===================================================================== */

body {
    font-family: var(--e5-font-body);
    font-size: var(--e5-fs-base);
    font-weight: var(--e5-fw-body);
    line-height: 1.55;
    color: var(--e5-text);
    background: var(--e5-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--e5-primary); }

/* The display family, listed once. Every one of these is a label the eye
   lands on rather than a line it reads through. */
.e5-shell__brand,
.e5-shell__header h1,
.e5-shell__who strong,
.e5-card__header h2,
.e5-card__header h3,
.e5-nav__item,
.e5-btn,
.e5-badge,
.e5-stat__value,
.e5-stat__label,
.e5-person__name,
.e5-empty p {
    font-family: var(--e5-font);
}

/* =====================================================================
   SHELL
   ===================================================================== */

.e5-shell { display: flex; min-height: 100vh; }

/* ---- the fixed sidebar ---------------------------------------------- */
.e5-shell__nav {
    width: var(--e5-nav-w);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    /* The two-stop vertical gradient FAKTUUR's admin sidebar uses. Both stops
       are derived from the merchant's single chrome colour in tokens.php, so
       this is still one setting in Layout & Theme, not two. */
    background: var(--e5-chrome-grad);
    color: var(--e5-chrome-text);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 200;
    transition: transform .22s ease;
}

.e5-shell__brand {
    height: var(--e5-header-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Left edge shared with the nav labels below: gutter + item padding. */
    padding: 0 22px 0 calc(var(--e5-nav-gutter) + var(--e5-nav-pad));
    border-bottom: 1px solid var(--e5-chrome-border);
    font-size: var(--e5-fs-lg);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--e5-chrome-strong);
}
.e5-shell__brand i { color: var(--e5-primary-light); }
.e5-shell__brand img { max-height: 30px; max-width: 150px; width: auto; height: auto; object-fit: contain; display: block; }

.e5-shell__who {
    flex-shrink: 0;
    padding: 16px calc(var(--e5-nav-gutter) + var(--e5-nav-pad));
    border-bottom: 1px solid var(--e5-chrome-border);
}
.e5-shell__who strong { display: block; font-size: var(--e5-fs-sm); color: var(--e5-chrome-strong); font-weight: 600; }
.e5-shell__who span   { display: block; font-size: var(--e5-fs-xs); opacity: .7; }
.e5-shell__who .e5-dot { color: var(--e5-success); font-size: .55em; vertical-align: middle; }

.e5-shell__main {
    flex: 1;
    min-width: 0;
    margin-left: var(--e5-nav-w);
    display: flex;
    flex-direction: column;
}

.e5-shell__header {
    height: var(--e5-header-h);
    flex-shrink: 0;
    background: var(--e5-surface);
    border-bottom: 1px solid var(--e5-border);
    padding: 0 var(--e5-pad-content);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.e5-shell__header h1 {
    font-size: var(--e5-fs-xl);
    font-weight: var(--e5-fw-heading);
    color: var(--e5-ink);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.02em;
}
.e5-shell__header h1 i { color: var(--e5-primary); }
.e5-shell__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.e5-shell__content { padding: var(--e5-pad-content); flex: 1; }

/* No sidebar: the main column starts at the left edge. */
.e5-shell__main--full { margin-left: 0; }

/* =====================================================================
   PUBLIC CHROME
   The bar on the pages a visitor sees before and during a purchase.
   A light surface rather than the panel's dark rail: these pages belong
   to the shop, not to the back office.
   ===================================================================== */

.e5-pubbar {
    height: var(--e5-header-h);
    flex-shrink: 0;
    background: var(--e5-surface);
    border-bottom: 1px solid var(--e5-border);
    padding: 0 var(--e5-pad-content);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.e5-pubbar__brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--e5-ink); font-family: var(--e5-font); font-weight: 800; }
.e5-pubbar__brand img { max-height: 30px; width: auto; height: auto; display: block; }
.e5-pubbar__nav { display: flex; align-items: center; gap: 18px; }
.e5-pubbar__nav > a {
    font-family: var(--e5-font);
    font-size: var(--e5-fs-sm);
    font-weight: 600;
    color: var(--e5-body);
    text-decoration: none;
}
.e5-pubbar__nav > a:hover { color: var(--e5-primary); }
/* Only the filled button. Phase 3's pages carried no other kind, so this
   was written as a.e5-btn; the storefront's outlined Login button would
   have inherited white text on a white face. */
.e5-pubbar__nav > a.e5-btn--primary { color: var(--e5-on-primary); }

.e5-pubfoot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 26px var(--e5-pad-content) 34px;
    border-top: 1px solid var(--e5-border);
    font-size: var(--e5-fs-xs);
    color: var(--e5-muted);
}
.e5-pubfoot img { height: 24px; width: auto; opacity: .5; }

@media (max-width: 768px) {
    .e5-pubbar { padding: 0 16px; }
    .e5-pubbar__nav { gap: 12px; }
}

/* The quiet strip under an application screen. Not a marketing footer - a
   signed-in administrator does not need one - just the mark, so a screenshot
   or a printout says whose panel it is. */
.e5-appfoot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px var(--e5-pad-content) 26px;
    font-size: var(--e5-fs-xs);
    color: var(--e5-muted);
}
.e5-appfoot img { height: 16px; width: auto; opacity: .55; }

/* The burger only exists below the sidebar breakpoint. */
.e5-shell__burger {
    display: none;
    background: none;
    border: none;
    color: var(--e5-ink);
    font-size: var(--e5-fs-lg);
    cursor: pointer;
    padding: 8px;
}
.e5-shell__scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 150;
}
.e5-shell.is-nav-open .e5-shell__scrim { display: block; }

/* =====================================================================
   AUTH SCREEN
   A page shown BEFORE there is anything to navigate: the admin login now,
   the customer login, register and password-reset pages in phase 3. It
   lives inside .e5-shell like everything else, but there is no sidebar
   and no header bar, so footer.php's "auth" variant closes the shell
   without closing a main column that was never opened.
   ===================================================================== */

.e5-auth {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 40px 20px;
}
.e5-auth__card {
    width: 100%;
    max-width: 420px;
    background: var(--e5-surface);
    border: 1px solid var(--e5-border);
    border-radius: var(--e5-r);
    box-shadow: var(--e5-shadow-card);
    overflow: hidden;
}
.e5-auth__head {
    padding: 28px var(--e5-pad-card) 20px;
    text-align: center;
    border-bottom: 1px solid var(--e5-border);
}
.e5-auth__head img { max-height: 44px; width: auto; height: auto; margin: 0 auto 16px; display: block; }
.e5-auth__head h1 {
    font-family: var(--e5-font);
    font-size: var(--e5-fs-xl);
    font-weight: var(--e5-fw-heading);
    color: var(--e5-ink);
    letter-spacing: -.02em;
}
.e5-auth__head p { font-size: var(--e5-fs-sm); color: var(--e5-muted); margin-top: 5px; }
.e5-auth__body { padding: var(--e5-pad-card); }
.e5-auth__foot { padding: 0 var(--e5-pad-card) 24px; text-align: center; font-size: var(--e5-fs-sm); }
.e5-auth__foot a { text-decoration: none; }

/* A field with a leading glyph. The icon is decorative and non-interactive,
   so it never steals the click that should focus the input. */
.e5-input-icon { position: relative; }
.e5-input-icon > i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--e5-muted);
    font-size: .95em;
    pointer-events: none;
}
.e5-input-icon .e5-input { padding-left: 36px; }

/* =====================================================================
   NAV
   ===================================================================== */

.e5-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 0;
    list-style: none;
    /* Hide this one scroll track, not every scroll track: data tables and
       modals keep theirs, because hiding those costs real usability. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.e5-nav::-webkit-scrollbar { display: none; }

.e5-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px var(--e5-nav-gutter);
    padding: 11px var(--e5-nav-pad);
    border-radius: 10px;
    color: var(--e5-chrome-text);
    font-size: var(--e5-fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.e5-nav__item:hover { background: rgba(255, 255, 255, 0.07); color: var(--e5-chrome-strong); }
.e5-nav__item.is-active {
    background: var(--e5-grad);
    color: var(--e5-on-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.e5-nav__item i { width: 20px; text-align: center; font-size: 1em; flex-shrink: 0; }
.e5-nav__sep { margin: 12px var(--e5-nav-gutter); border-top: 1px solid var(--e5-chrome-border); }

/* =====================================================================
   CARD
   ===================================================================== */

.e5-card {
    background: var(--e5-surface);
    border: 1px solid var(--e5-border);
    border-radius: var(--e5-r);
    box-shadow: var(--e5-shadow-card);
    margin-bottom: var(--e5-gap);
    overflow: hidden;
}
.e5-card__header {
    padding: 20px var(--e5-pad-card);
    border-bottom: 1px solid var(--e5-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.e5-card__header h2,
.e5-card__header h3 {
    font-size: var(--e5-fs-lg);
    font-weight: var(--e5-fw-heading);
    color: var(--e5-ink);
    display: flex;
    align-items: center;
    gap: 10px;
}
.e5-card__header h2 i,
.e5-card__header h3 i { color: var(--e5-primary); }
.e5-card__body { padding: var(--e5-pad-card); }
.e5-card__body > :last-child { margin-bottom: 0; }
/* A body that holds only a table: the table draws its own edges. */
.e5-card__body--flush { padding: 0; }

.e5-hint {
    display: block;
    font-size: var(--e5-fs-xs);
    color: var(--e5-muted);
    line-height: 1.5;
}
.e5-mono { font-family: "Consolas", "Monaco", monospace; font-size: 0.92em; }

/* =====================================================================
   TABLE
   ===================================================================== */

.e5-table-wrap { overflow-x: auto; }
.e5-table { width: 100%; border-collapse: collapse; }
.e5-table th {
    padding: 13px 16px;
    text-align: left;
    font-size: var(--e5-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--e5-muted);
    border-bottom: 1px solid var(--e5-border);
    white-space: nowrap;
}
.e5-table td {
    padding: 15px 16px;
    font-size: var(--e5-fs-sm);
    color: var(--e5-body);
    border-bottom: 1px solid var(--e5-border);
    vertical-align: middle;
}
.e5-table tbody tr { transition: background .15s; }
.e5-table tbody tr:hover { background: var(--e5-bg-soft); }
.e5-table tbody tr:last-child td { border-bottom: none; }
.e5-table td strong { color: var(--e5-ink); font-weight: 600; }
.e5-table__actions { white-space: nowrap; }
.e5-table__actions form { display: inline; }

/* =====================================================================
   BUTTON
   ===================================================================== */

.e5-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--e5-r-sm);
    /* Explicit, not inherit: a <button> does not inherit the page font, and
       "inherit" here would also out-specify the display-family rule above and
       quietly set every button in the body face. */
    font-family: var(--e5-font);
    font-size: var(--e5-fs-sm);
    font-weight: var(--e5-fw-btn);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .15s, box-shadow .15s, background .15s;
    background: var(--e5-bg-soft);
    color: var(--e5-body);
    white-space: nowrap;
}
.e5-btn:hover { background: var(--e5-border); }
.e5-btn:disabled,
.e5-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.e5-btn i { font-size: 0.95em; }

.e5-btn--primary { background: var(--e5-grad);         color: var(--e5-on-primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); }
.e5-btn--success { background: var(--e5-grad-success); color: var(--e5-on-primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14); }
.e5-btn--warning { background: var(--e5-grad-warning); color: var(--e5-on-primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14); }
.e5-btn--danger  { background: var(--e5-grad-danger);  color: var(--e5-on-primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14); }
.e5-btn--primary:hover,
.e5-btn--success:hover,
.e5-btn--warning:hover,
.e5-btn--danger:hover { filter: brightness(1.06); color: var(--e5-on-primary); }

.e5-btn--ghost {
    background: transparent;
    border-color: var(--e5-border);
    color: var(--e5-body);
}
.e5-btn--ghost:hover { background: var(--e5-bg-soft); }

.e5-btn--sm    { padding: 6px 12px; font-size: var(--e5-fs-xs); }
.e5-btn--block { width: 100%; }

/* =====================================================================
   BADGE
   ===================================================================== */

.e5-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--e5-r-pill);
    font-size: var(--e5-fs-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--e5-bg-soft);
    color: var(--e5-muted);
}
.e5-badge i { font-size: .7em; }
.e5-badge--ok     { background: rgba(var(--e5-success-rgb), .14); color: var(--e5-success); }
.e5-badge--warn   { background: rgba(var(--e5-warning-rgb), .16); color: var(--e5-warning); }
.e5-badge--danger { background: rgba(var(--e5-danger-rgb),  .14); color: var(--e5-danger); }
.e5-badge--info   { background: rgba(var(--e5-info-rgb),    .14); color: var(--e5-info); }

/* =====================================================================
   FIELDS
   ===================================================================== */

.e5-field { margin-bottom: var(--e5-gap-field); }
.e5-field__label {
    display: block;
    margin-bottom: 7px;
    font-size: var(--e5-fs-sm);
    font-weight: 600;
    color: var(--e5-body);
}
.e5-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--e5-border);
    border-radius: var(--e5-r-sm);
    font-family: var(--e5-font-body);
    font-size: var(--e5-fs-sm);
    color: var(--e5-ink);
    background: var(--e5-surface);
    transition: border-color .15s, box-shadow .15s;
}
.e5-input:focus {
    outline: none;
    border-color: var(--e5-primary);
    box-shadow: 0 0 0 3px rgba(var(--e5-primary-rgb), .16);
}
.e5-input[readonly] { background: var(--e5-bg-soft); color: var(--e5-muted); cursor: default; }
textarea.e5-input { resize: vertical; min-height: 90px; }
select.e5-input   { appearance: none; padding-right: 38px;
                    background-image: linear-gradient(45deg, transparent 50%, var(--e5-muted) 50%),
                                      linear-gradient(135deg, var(--e5-muted) 50%, transparent 50%);
                    background-position: right 18px center, right 13px center;
                    background-size: 5px 5px, 5px 5px;
                    background-repeat: no-repeat; }
input[type="file"].e5-input { padding: 9px 12px; }

.e5-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e5-gap); }

.e5-check { display: flex; align-items: center; gap: 10px; margin-bottom: var(--e5-gap-field); }
.e5-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--e5-primary); cursor: pointer; }
.e5-check label { font-size: var(--e5-fs-sm); font-weight: 500; color: var(--e5-body); cursor: pointer; }

.e5-form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* An on/off switch for a setting that takes effect immediately. The checkbox
   itself stays in the DOM, focusable and keyboard-operable - the visual is a
   sibling, not a replacement. */
.e5-switch { position: relative; display: inline-block; width: 50px; height: 27px; flex-shrink: 0; }
.e5-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.e5-switch__slider {
    position: absolute;
    inset: 0;
    background: var(--e5-border);
    border-radius: var(--e5-r-pill);
    transition: background .18s;
}
.e5-switch__slider::before {
    content: "";
    position: absolute;
    width: 21px; height: 21px;
    left: 3px; top: 3px;
    background: var(--e5-surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform .18s;
}
.e5-switch input:checked + .e5-switch__slider { background: var(--e5-success); }
.e5-switch input:checked + .e5-switch__slider::before { transform: translateX(23px); }
.e5-switch input:focus-visible + .e5-switch__slider { box-shadow: 0 0 0 3px rgba(var(--e5-primary-rgb), .3); }

/* =====================================================================
   CHECKOUT
   The payment-method chooser and the order summary.

   .payment-method and .selected are JAVASCRIPT CONTRACTS, exactly like
   the password widget below: checkout.php's script selects every
   .payment-method, toggles .selected on them and checks the radio inside.
   That script is carried across VERBATIM because this is the money path,
   so the names it addresses stay as they are and only their values come
   from tokens.
   ===================================================================== */

.payment-method {
    display: block;
    border: 2px solid var(--e5-border);
    border-radius: var(--e5-r-sm);
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.payment-method:hover { border-color: var(--e5-primary-light); }
.payment-method.selected { border-color: var(--e5-primary); background: rgba(var(--e5-primary-rgb), .05); }
.payment-method input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.payment-method-content { display: flex; align-items: center; gap: 14px; }
.payment-icon {
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: var(--e5-fs-xl);
    background: var(--e5-bg-soft);
    color: var(--e5-primary);
}
.payment-info h4 { font-family: var(--e5-font); font-size: var(--e5-fs-md); color: var(--e5-ink); }
.payment-info p  { font-size: var(--e5-fs-xs); color: var(--e5-muted); }
/* The details only open for the chosen method - it was the same before, just
   with a different class name doing the hiding. */
.payment-details { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--e5-border); font-size: var(--e5-fs-xs); color: var(--e5-body); }
.payment-method.selected .payment-details { display: block; }
.payment-details p { margin-bottom: 3px; }

.e5-summary { position: sticky; top: calc(var(--e5-header-h) + 20px); }
.e5-summary__row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; font-size: var(--e5-fs-sm); color: var(--e5-body); }
.e5-summary__row + .e5-summary__row { border-top: 1px solid var(--e5-border); }
.e5-summary__row--total {
    border-top: 2px solid var(--e5-border);
    margin-top: 6px;
    padding-top: 14px;
    font-family: var(--e5-font);
    font-size: var(--e5-fs-lg);
    font-weight: 800;
    color: var(--e5-ink);
}
.e5-summary__row--total span:last-child { color: var(--e5-primary); }
.e5-trust { display: flex; gap: 16px; justify-content: center; margin-top: 14px; font-size: var(--e5-fs-xs); color: var(--e5-muted); }

/* checkout.php's console-logging scratch element. Kept because its id is in
   the page's DOM contract; it has never had anything visible in it. */
.debug-info:empty { display: none; }

/* =====================================================================
   PASSWORD WIDGET
   The live requirement checklist and match indicator on the portal's
   profile page - and, in phase 3, on register and reset-password, which
   carry the same widget.

   The class names here are JAVASCRIPT CONTRACTS, not design choices:
   profile.php's checkPasswordMatch() does
       passwordMatchDiv.className = 'password-match match'
   which REPLACES the class list, so any e5- class added to that element
   would be wiped the first time a key is pressed. The names stay as the
   script writes them; only the values are ours, and every one is a token.
   ===================================================================== */

.password-wrapper { position: relative; }
.password-wrapper .e5-input { padding-right: 42px; }
.password-toggle {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--e5-muted);
    cursor: pointer;
    padding: 6px 9px;
    font-size: var(--e5-fs-sm);
}
.password-toggle:hover { color: var(--e5-primary); }

.password-requirements { margin-top: 10px; display: grid; gap: 5px; }
.requirement {
    font-size: var(--e5-fs-xs);
    color: var(--e5-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.requirement i { font-size: .55em; }
.requirement.valid   { color: var(--e5-success); }
.requirement.invalid { color: var(--e5-danger); }

.password-match {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: var(--e5-fs-xs);
    font-weight: 600;
}
.password-match.match    { color: var(--e5-success); }
.password-match.no-match { color: var(--e5-danger); }

.password-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5-gap); }
@media (max-width: 900px) { .password-section { grid-template-columns: 1fr; } }

/* A colour chip beside a label, and a clickable palette preset. Used by
   Layout & Theme. The swatch element also carries the class "color-preview",
   which is a JAVASCRIPT hook that page's updatePreview() looks up by name -
   the styling lives here, the hook stays there, and neither has to know about
   the other. */
.e5-swatch {
    display: inline-block;
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 1px solid var(--e5-border);
    vertical-align: middle;
    margin-left: 6px;
}
input[type="color"].e5-input { padding: 4px; height: 40px; cursor: pointer; }

.e5-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.e5-preset {
    border: 1px solid var(--e5-border);
    border-radius: var(--e5-r-sm);
    padding: 12px;
    cursor: pointer;
    text-align: center;
    background: var(--e5-surface);
    transition: border-color .2s ease;
}
.e5-preset:hover { border-color: var(--e5-primary); }
.e5-preset__colors { display: flex; gap: 4px; justify-content: center; margin-bottom: 8px; }
.e5-preset__colors span { width: 18px; height: 18px; border-radius: 5px; }
.e5-preset__name { font-size: var(--e5-fs-xs); font-weight: 600; color: var(--e5-body); }

/* A value the operator has to copy out of the page and paste somewhere else:
   a webhook endpoint, a callback URL. Selectable in one gesture. */
.e5-copyfield {
    font-family: "Consolas", "Monaco", monospace;
    font-size: var(--e5-fs-sm);
    padding: 11px 14px;
    background: var(--e5-bg-soft);
    border: 1px solid var(--e5-border);
    border-radius: var(--e5-r-sm);
    word-break: break-all;
    color: var(--e5-ink);
    user-select: all;
}

/* A filter/search strip above a table. */
.e5-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; align-items: end; }
.e5-toolbar .e5-field { margin-bottom: 0; }

/* =====================================================================
   ALERT
   ===================================================================== */

.e5-alert {
    padding: 14px 18px;
    border-radius: var(--e5-r-sm);
    margin-bottom: var(--e5-gap-field);
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: var(--e5-fs-sm);
    line-height: 1.5;
    background: var(--e5-bg-soft);
    color: var(--e5-body);
}
.e5-alert i { margin-top: .15em; flex-shrink: 0; }
.e5-alert--ok     { background: rgba(var(--e5-success-rgb), .13); color: var(--e5-success); }
.e5-alert--warn   { background: rgba(var(--e5-warning-rgb), .15); color: var(--e5-warning); }
.e5-alert--danger { background: rgba(var(--e5-danger-rgb),  .13); color: var(--e5-danger); }
.e5-alert--info   { background: rgba(var(--e5-info-rgb),    .13); color: var(--e5-info); }
.e5-alert strong  { font-weight: 700; }

/* =====================================================================
   STATS
   ===================================================================== */

.e5-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--e5-gap);
    margin-bottom: var(--e5-gap);
}
.e5-stat {
    background: var(--e5-surface);
    border: 1px solid var(--e5-border);
    border-radius: var(--e5-r);
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: var(--e5-shadow-card);
    transition: box-shadow .2s ease;
}
.e5-stat:hover { box-shadow: var(--e5-shadow-hover); }
.e5-stat__icon {
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: var(--e5-fs-lg);
    color: var(--e5-on-primary);
    background: var(--e5-grad);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.e5-stat__icon--success { background: var(--e5-grad-success); }
.e5-stat__icon--warning { background: var(--e5-grad-warning); }
.e5-stat__icon--danger  { background: var(--e5-grad-danger); }
.e5-stat__icon--info    { background: var(--e5-grad-info); }
.e5-stat__value { display: block; font-size: var(--e5-fs-2xl); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--e5-ink); }
.e5-stat__label { font-size: var(--e5-fs-xs); color: var(--e5-muted); font-weight: 500; }

/* =====================================================================
   EMPTY
   ===================================================================== */

.e5-empty { text-align: center; padding: 44px 20px; color: var(--e5-muted); }
.e5-empty i { font-size: 2.6em; opacity: .35; display: block; margin-bottom: 14px; }
.e5-empty p { margin-bottom: 4px; }

/* =====================================================================
   PAGINATION, MENUS, TOASTS, IDENTITY CELLS
   Not in the Step-0 component map, added here because all four recur on
   the admin pages phases 1-4 will convert. Keeping them page-local would
   just re-create the duplication this file exists to remove.
   ===================================================================== */

.e5-pagination { display: flex; gap: 6px; padding: 18px; justify-content: center; flex-wrap: wrap; }
.e5-pagination a {
    padding: 8px 14px;
    border-radius: var(--e5-r-sm);
    background: var(--e5-bg-soft);
    color: var(--e5-body);
    text-decoration: none;
    font-size: var(--e5-fs-sm);
    font-weight: 500;
}
.e5-pagination a:hover { background: var(--e5-border); }
.e5-pagination a.is-active { background: var(--e5-primary); color: var(--e5-on-primary); }

.e5-menu { position: relative; display: inline-block; }
.e5-menu__list {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 200px;
    background: var(--e5-surface);
    border: 1px solid var(--e5-border);
    border-radius: var(--e5-r-sm);
    box-shadow: var(--e5-shadow-lift);
    overflow: hidden;
    z-index: 300;
}
.e5-menu__list.is-open { display: block; }
.e5-menu__list a,
.e5-menu__list button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 15px;
    border: none;
    background: none;
    font-family: var(--e5-font-body);
    font-size: var(--e5-fs-sm);
    color: var(--e5-body);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.e5-menu__list a:hover,
.e5-menu__list button:hover { background: var(--e5-bg-soft); }
.e5-menu__list button.is-danger { color: var(--e5-danger); }
.e5-menu__list i { width: 16px; text-align: center; }

.e5-toast {
    position: fixed;
    bottom: 26px; right: 26px;
    z-index: 400;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 20px;
    border-radius: var(--e5-r-sm);
    box-shadow: var(--e5-shadow-lift);
    font-size: var(--e5-fs-sm);
    font-weight: 500;
    background: var(--e5-surface);
    color: var(--e5-body);
    animation: e5-slide-in .3s ease;
}
.e5-toast--ok     { background: var(--e5-success); color: var(--e5-on-primary); }
.e5-toast--danger { background: var(--e5-danger);  color: var(--e5-on-primary); }
@keyframes e5-slide-in { from { transform: translateX(110%); opacity: 0; } to { transform: none; opacity: 1; } }

.e5-person { display: flex; align-items: center; gap: 11px; }
.e5-person__avatar {
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--e5-grad);
    color: var(--e5-on-primary);
    font-size: var(--e5-fs-sm);
    font-weight: 700;
}
.e5-person__name  { display: block; font-weight: 600; color: var(--e5-ink); font-size: var(--e5-fs-sm); }
.e5-person__meta  { display: block; font-size: var(--e5-fs-xs); color: var(--e5-muted); }

.e5-keyline { display: inline-flex; align-items: center; gap: 8px; }
.e5-keyline__copy { cursor: pointer; color: var(--e5-muted); }
.e5-keyline__copy:hover { color: var(--e5-primary); }

/* A record page: the record on the left, the things you can do to it on the
   right. Collapses to one column before the sidebar does, because a 300px
   action rail is the first thing that stops being worth its width. */
.e5-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--e5-gap); align-items: start; }
@media (max-width: 1100px) { .e5-cols { grid-template-columns: 1fr; } }

/* Dated events down a rule. */
.e5-timeline__item { padding: 10px 0 10px 14px; border-left: 3px solid var(--e5-border); margin-left: 6px; }
.e5-timeline__item--now  { border-left-color: var(--e5-primary); }
.e5-timeline__item--done { border-left-color: var(--e5-success); }
.e5-timeline__item strong { display: block; font-size: var(--e5-fs-sm); color: var(--e5-ink); }
.e5-timeline__item p { font-size: var(--e5-fs-xs); color: var(--e5-muted); margin-top: 2px; }

/* One row of a two-part fact: label on the left, value on the right. */
.e5-rows { display: flex; flex-direction: column; }
.e5-rows > div { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--e5-border); font-size: var(--e5-fs-sm); }
.e5-rows > div:last-child { border-bottom: none; }
.e5-rows dt, .e5-rows .e5-rows__k { flex: 0 0 42%; color: var(--e5-muted); font-weight: 500; }
.e5-rows dd, .e5-rows .e5-rows__v { flex: 1; margin: 0; color: var(--e5-ink); min-width: 0; word-break: break-word; }
.e5-rows .e5-rows__v .e5-price { font-size: calc(var(--e5-fs-base) * 1.3); font-weight: 800; color: var(--e5-primary); }

/* A record's fields, read-only: order details, customer details, the licence
   panel. Every page that shows a single record had built its own version of
   this grid; there is one now. */
.e5-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px 24px;
}
.e5-info__label {
    display: block;
    font-size: var(--e5-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--e5-muted);
    margin-bottom: 4px;
}
.e5-info__value { display: block; font-size: var(--e5-fs-sm); color: var(--e5-ink); font-weight: 500; }

/* One value the page exists to hand over: a licence key, a reference. Big,
   selectable, centred, and unmistakably the thing to copy. */
.e5-keybox {
    text-align: center;
    padding: 22px;
    border: 1px dashed var(--e5-border);
    border-radius: var(--e5-r-sm);
    background: var(--e5-bg-soft);
    margin-bottom: var(--e5-gap-field);
}
.e5-keybox__key {
    font-family: "Consolas", "Monaco", monospace;
    font-size: calc(var(--e5-fs-base) * 1.35);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--e5-primary);
    word-break: break-all;
    margin: 10px 0 16px;
    user-select: all;
}

.e5-list { padding-left: 20px; }
.e5-list li { font-size: var(--e5-fs-sm); color: var(--e5-body); margin-bottom: 9px; line-height: 1.6; }
.e5-list li:last-child { margin-bottom: 0; }

/* =====================================================================
   RESPONSIVE — FAKTUUR's breakpoints
   ===================================================================== */

@media (max-width: 1200px) {
    :root { --e5-pad-content: 24px; }
}

@media (max-width: 992px) {
    .e5-field-row { grid-template-columns: 1fr; }
    .e5-stats     { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* The sidebar collapses here: off-canvas, revealed by the burger. */
@media (max-width: 768px) {
    .e5-shell__nav    { transform: translateX(-100%); }
    .e5-shell.is-nav-open .e5-shell__nav { transform: none; }
    .e5-shell__main   { margin-left: 0; }
    .e5-shell__burger { display: inline-flex; }

    /* The header wraps here instead of holding its row.
       A burger, a page title and an action button do not fit across 390px, and
       a fixed-height flex row does not report that - it just grows past the
       viewport, and because it is the widest thing on the page it takes every
       card's right edge off-screen with it. So: auto height, wrap allowed, and
       the actions drop to their own line. */
    .e5-shell__header {
        height: auto;
        min-height: var(--e5-header-h);
        padding: 10px 16px;
        gap: 10px;
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .e5-shell__header h1 { font-size: var(--e5-fs-lg); min-width: 0; overflow-wrap: anywhere; }
    .e5-shell__actions   { width: 100%; }
    .e5-shell__actions .e5-btn { flex: 1; }
    .e5-shell__content   { padding: 16px; }
    .e5-stats { grid-template-columns: 1fr; }
    .e5-toolbar { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .e5-card__header { flex-direction: column; align-items: flex-start; }
    .e5-toast { left: 16px; right: 16px; bottom: 16px; }
}

/* =====================================================================
   STOREFRONT
   ---------------------------------------------------------------------
   index.php - the marketing page, and the only page on this site that
   is not an application screen. It keeps its own section shapes: a
   full-bleed hero with the particle canvas behind it, a feature grid, a
   single pricing card, a specification list. A marketing hero is not a
   .e5-card and is not forced into one.

   What it does NOT keep is its own palette. The 725-line inline
   stylesheet this replaces set four colours by hand - the brand blue,
   the brand orange, one grey for every piece of secondary copy and
   white for every card - underneath a :root that claimed to be
   theme-driven. Every one of them is a token below, so the storefront
   finally repaints with the rest of the shop.

   (Those four are described in words rather than written out: this file
   is scanned for colour literals, and a comment quoting the hex codes it
   removed is a false positive I have already caused on this project.)

   Class names beginning with a dot but no e5- prefix (.toast, .active,
   .scrolled) are a CONTRACT WITH THE PAGE'S OWN SCRIPT, which moved
   across verbatim. Renaming them would be a behaviour change.
   ===================================================================== */

/* The hero runs edge to edge, so the storefront's main column drops the
   content padding the application screens want. Each section pads
   itself instead. */
.e5-shell__content--flush { padding: 0; }

/* The page's scroll handler adds this to the bar. On a fixed bar it used
   to swap a translucent white for a slightly less translucent one; the
   bar is sticky and opaque now, so the state it can still express
   honestly is elevation. */
.e5-pubbar.scrolled { box-shadow: var(--e5-shadow-lift); }

.e5-pubbar__burger {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    font-size: var(--e5-fs-lg);
    color: var(--e5-ink);
    cursor: pointer;
}

/* The storefront's own bar carries a menu, so its links need the
   underline-on-hover the section anchors had. Buttons opt out. */
.e5-pubbar__nav > a:not(.e5-btn) { position: relative; padding: 4px 0; }
.e5-pubbar__nav > a:not(.e5-btn)::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 2px;
    background: var(--e5-grad);
    transition: width .25s ease;
}
.e5-pubbar__nav > a:not(.e5-btn):hover::after { width: 100%; }
.e5-pubbar__who {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--e5-font);
    font-size: var(--e5-fs-sm);
    font-weight: 600;
    color: var(--e5-ink);
}
.e5-pubbar__who i { color: var(--e5-primary); }

/* ---- the brand wordmark inside running text ------------------------
   colorizeBrand() in index.php wraps "e-5HOP" in these three spans. The
   colours were hardcoded blue and orange, which is why the wordmark
   stayed blue in a shop repainted green. Primary and accent now, so it
   moves with the theme. !important because the h1 it sits in paints
   itself with a gradient clipped to the text, and the spans have to
   opt back out of it. */
.colorized-brand {
    background: none !important;
    -webkit-text-fill-color: initial !important;
}
.colorized-brand .e,
.colorized-brand .hop {
    color: var(--e5-primary) !important;
    -webkit-text-fill-color: var(--e5-primary) !important;
}
.colorized-brand .dash {
    color: var(--e5-accent) !important;
    -webkit-text-fill-color: var(--e5-accent) !important;
}

/* ---- hero ---------------------------------------------------------- */

.e5-hero {
    position: relative;
    /* The bar used to be fixed and the hero reserved 100px for it. It is
       sticky and in flow now, so the reservation is the bar's own height
       and stays right if a merchant changes it. */
    min-height: calc(100vh - var(--e5-header-h));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 72px 24px;
    overflow: hidden;
    background: var(--e5-bg);
}
#particles-js {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.e5-hero__content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}
.e5-hero h1 {
    font-family: var(--e5-font);
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    color: var(--e5-ink);
}
/* The gradient wash is for a headline that is only words. One containing
   the wordmark keeps its three brand colours instead - clipping a
   gradient to text sets -webkit-text-fill-color, and the two cannot both
   win. */
.e5-hero h1:not(:has(.colorized-brand)) {
    background: var(--e5-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.e5-hero__subtitle {
    font-family: var(--e5-font);
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    font-weight: 600;
    color: var(--e5-primary);
    margin-bottom: 14px;
}
.e5-hero__desc {
    font-size: var(--e5-fs-lg);
    color: var(--e5-muted);
    line-height: 1.8;
    margin: 0 auto 34px;
    max-width: 720px;
}
.e5-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--e5-grad);
    color: var(--e5-on-primary);
    font-family: var(--e5-font);
    font-size: var(--e5-fs-lg);
    font-weight: var(--e5-fw-btn);
    padding: 17px 44px;
    border-radius: var(--e5-r-pill);
    text-decoration: none;
    box-shadow: var(--e5-shadow-lift);
    transition: transform .25s ease, box-shadow .25s ease;
}
.e5-hero__cta:hover { filter: brightness(1.06); }

/* ---- a marketing section and its title ------------------------------ */

.e5-sect { padding: 84px 24px; }
.e5-sect--soft { background: var(--e5-bg-soft); }
.e5-sect--plain { background: var(--e5-surface); }
.e5-sect__inner { max-width: 1240px; margin: 0 auto; }
.e5-sect__title { text-align: center; margin-bottom: 12px; }
.e5-sect__title h2 {
    font-family: var(--e5-font);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--e5-ink);
    margin-bottom: 12px;
}
.e5-sect__title p {
    font-family: var(--e5-font);
    font-size: var(--e5-fs-lg);
    font-weight: 500;
    color: var(--e5-muted);
}

/* ---- features -------------------------------------------------------- */

.e5-feats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 26px;
    margin-top: 48px;
}
.e5-feat {
    position: relative;
    overflow: hidden;
    background: var(--e5-surface);
    border: 1px solid var(--e5-border);
    border-radius: var(--e5-r);
    padding: var(--e5-pad-card);
    box-shadow: var(--e5-shadow-card);
    transition: box-shadow .25s ease, border-color .25s ease;
}
.e5-feat::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: var(--e5-grad);
    opacity: 0;
    transition: opacity .25s ease;
}
.e5-feat:hover { box-shadow: var(--e5-shadow-hover); border-color: var(--e5-border-hover); }
.e5-feat:hover::before { opacity: .7; }
.e5-feat__icon {
    width: 62px; height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--e5-r-sm);
    background: var(--e5-grad);
    margin-bottom: 20px;
}
.e5-feat__icon i { font-size: 1.5rem; color: var(--e5-on-primary); }
.e5-feat h3 {
    font-family: var(--e5-font);
    font-size: var(--e5-fs-xl);
    font-weight: var(--e5-fw-heading);
    color: var(--e5-ink);
    margin-bottom: 10px;
}
.e5-feat p { color: var(--e5-muted); line-height: 1.8; }

/* ---- the pricing card ------------------------------------------------ */

.e5-plan {
    position: relative;
    overflow: hidden;
    max-width: 620px;
    margin: 48px auto 0;
    background: var(--e5-surface);
    border: 1px solid var(--e5-border);
    border-radius: var(--e5-r);
    padding: 42px;
    box-shadow: var(--e5-shadow-lift);
    text-align: center;
}
.e5-plan__badge {
    position: absolute;
    top: 22px; right: -38px;
    transform: rotate(45deg);
    background: var(--e5-grad);
    color: var(--e5-on-primary);
    font-family: var(--e5-font);
    font-size: var(--e5-fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    padding: 7px 44px;
}
.e5-plan h3 {
    font-family: var(--e5-font);
    font-size: var(--e5-fs-2xl);
    font-weight: 800;
    color: var(--e5-ink);
    margin-bottom: 8px;
}
.e5-plan__price {
    font-family: var(--e5-font);
    font-size: clamp(2.4rem, 7vw, 4rem);
    font-weight: 800;
    color: var(--e5-primary);
    letter-spacing: -0.03em;
    margin: 18px 0;
}
.e5-plan__price span {
    font-size: var(--e5-fs-xl);
    font-weight: 600;
    color: var(--e5-muted);
    letter-spacing: 0;
}
.e5-plan__desc { color: var(--e5-muted); font-size: var(--e5-fs-lg); margin-bottom: 8px; }
.e5-plan__list { list-style: none; margin: 26px 0; text-align: left; }
.e5-plan__list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--e5-border);
    color: var(--e5-body);
}
.e5-plan__list li:last-child { border-bottom: none; }
.e5-plan__list i { color: var(--e5-success); font-size: var(--e5-fs-lg); }
.e5-plan__cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--e5-grad);
    color: var(--e5-on-primary);
    font-family: var(--e5-font);
    font-size: var(--e5-fs-lg);
    font-weight: var(--e5-fw-btn);
    border: none;
    border-radius: var(--e5-r-pill);
    padding: 18px 28px;
    margin-top: 18px;
    cursor: pointer;
    box-shadow: var(--e5-shadow-lift);
    transition: transform .25s ease;
}
.e5-plan__cta:hover { filter: brightness(1.06); }

/* ---- specifications --------------------------------------------------- */

.e5-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
    margin-top: 48px;
}
.e5-spec {
    background: var(--e5-bg-soft);
    border: 1px solid var(--e5-border);
    border-left: 4px solid var(--e5-primary);
    border-radius: var(--e5-r-sm);
    padding: 22px 24px;
    transition: box-shadow .2s ease;
}
.e5-spec:hover { box-shadow: var(--e5-shadow); }
.e5-spec__label {
    font-family: var(--e5-font);
    font-weight: 700;
    color: var(--e5-primary);
    font-size: var(--e5-fs-md);
    margin-bottom: 5px;
}
.e5-spec__value { color: var(--e5-ink); font-weight: 500; }

/* ---- the site footer --------------------------------------------------
   --e5-chrome and its text pair ARE the merchant's footer_bg_color and
   footer_text_color (see tokens.php); the sidebar borrows them. So this
   footer keeps painting from the same two settings it always did. */

.e5-sitefoot {
    background: var(--e5-chrome);
    color: var(--e5-chrome-text);
    padding: 46px 24px 30px;
    text-align: center;
}
.e5-sitefoot__inner { max-width: 1240px; margin: 0 auto; }
.e5-sitefoot__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    margin-bottom: 24px;
}
.e5-sitefoot__links a {
    font-family: var(--e5-font);
    font-size: var(--e5-fs-sm);
    font-weight: 500;
    color: var(--e5-chrome-text);
    text-decoration: none;
    transition: color .2s ease;
}
.e5-sitefoot__links a:hover { color: var(--e5-chrome-strong); }
.e5-sitefoot__note {
    padding-top: 20px;
    border-top: 1px solid var(--e5-chrome-border);
    font-size: var(--e5-fs-sm);
    color: var(--e5-chrome-text);
}
/* On the dark footer the wordmark's blue would sink into the panel, so
   the brand spans hand back to the footer's own text colour there.
   Kept for any footer that still renders the TEXT wordmark; the storefront's
   copyright line carries the artwork instead. */
.e5-sitefoot .colorized-brand .e,
.e5-sitefoot .colorized-brand .dash,
.e5-sitefoot .colorized-brand .hop {
    color: var(--e5-chrome-strong) !important;
    -webkit-text-fill-color: var(--e5-chrome-strong) !important;
}

/* The wordmark as artwork, inline in the copyright sentence.
   index.php emits it with the intrinsic 1675x315 on the tag, so the box is
   reserved at the true ratio before the file lands and the line does not
   reflow around it.

   SIZED IN em, NOT px, so it tracks Base Font Size in Layout & Theme. That
   setting runs 12 to 24, and a height pinned to today's 14 would be wrong at
   both ends of the range.

   Both numbers are measured off the artwork, not guessed. In the 1675x315
   source the hexagon runs the full height but the LETTERS occupy y 23..293, so
   the wordmark's cap height is 0.860 of the image and its baseline sits 0.070
   of the image height above the bottom edge. Hence:
     height: 1em         puts the logo's caps at 0.86em against the sentence's
                         own ~0.72em caps - a shade larger, which is right for
                         a mark standing in for text that used to be bold.
     vertical-align      drops the image by exactly that baseline offset, so
       -0.07em           the logo's letters sit ON the text baseline rather
                         than floating up with the hexagon's overhang.
   width:auto holds the 5.3514 ratio; nothing here sets a width, so it cannot
   be squashed. */
.e5-sitefoot__note .e5-footmark {
    height: 1em;
    width: auto;
    vertical-align: -0.07em;
    margin: 0 0.1em;
}

/* ---- the storefront's toast ------------------------------------------
   showToast() builds div.toast.<type> with .toast-message and
   .toast-close inside it. Same shape as .e5-toast, different class
   names, because the script that creates them moved across verbatim. */

.toast {
    position: fixed;
    bottom: 26px; right: 26px;
    z-index: 400;
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: 380px;
    padding: 14px 18px;
    border-radius: var(--e5-r-sm);
    background: var(--e5-surface);
    color: var(--e5-body);
    border: 1px solid var(--e5-border);
    box-shadow: var(--e5-shadow-lift);
    font-size: var(--e5-fs-sm);
    font-weight: 500;
    transform: translateX(115%);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
}
.toast.show { transform: none; opacity: 1; }
.toast i { font-size: var(--e5-fs-lg); color: var(--e5-info); }
.toast.success i { color: var(--e5-success); }
.toast.error i   { color: var(--e5-danger); }
.toast.warning i { color: var(--e5-warning); }
.toast-message { flex: 1; }
.toast-close {
    cursor: pointer;
    font-size: var(--e5-fs-lg);
    line-height: 1;
    color: var(--e5-muted);
}
.toast-close:hover { color: var(--e5-ink); }

@media (max-width: 768px) {
    /* The bar's menu goes behind the burger. It is the page's own script
       that flips .active, so the class stays. */
    .e5-pubbar__burger { display: block; }
    .e5-pubbar__nav {
        display: none;
        position: absolute;
        top: var(--e5-header-h);
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 14px 16px 18px;
        background: var(--e5-surface);
        border-bottom: 1px solid var(--e5-border);
        box-shadow: var(--e5-shadow-lift);
    }
    .e5-pubbar__nav.active { display: flex; }
    .e5-pubbar { position: sticky; }

    .e5-hero { padding: 48px 18px; }
    .e5-sect { padding: 56px 18px; }
    .e5-feats, .e5-specs { grid-template-columns: 1fr; gap: 18px; }
    .e5-plan { padding: 26px; }
    .toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* =====================================================================
   TABS AND MODAL (catalogue release)
   The product record spans three pages - details, channels, versions -
   joined by a tab strip of plain links, so each tab is a real URL with its
   own form and its own CSRF token. The modal replaces confirm(): a form
   with data-confirm="..." opens it (assets/js/e5-admin.js).
   ===================================================================== */

.e5-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--e5-gap);
    border-bottom: 1px solid var(--e5-border);
    overflow-x: auto;
    scrollbar-width: thin;
}
.e5-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--e5-muted);
    font-size: var(--e5-fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.e5-tabs__item:hover { color: var(--e5-ink); }
.e5-tabs__item.is-active { color: var(--e5-primary); border-bottom-color: var(--e5-primary); }
.e5-tabs__count {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--e5-bg-soft);
    color: var(--e5-muted);
    font-size: var(--e5-fs-xs);
    text-align: center;
}

.e5-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .55);
}
.e5-modal.is-open { display: flex; }
.e5-modal__box {
    width: 100%;
    max-width: 460px;
    background: var(--e5-surface);
    border-radius: var(--e5-r);
    box-shadow: var(--e5-shadow-lift);
    animation: e5-modal-in .18s ease;
}
.e5-modal__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px 0;
    color: var(--e5-ink);
    font-size: var(--e5-fs-lg);
    font-weight: 700;
}
.e5-modal__head i { color: var(--e5-danger); }
.e5-modal__body { padding: 12px 22px 4px; color: var(--e5-body); font-size: var(--e5-fs-sm); line-height: 1.55; }
.e5-modal__foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 18px 22px 20px; }
@keyframes e5-modal-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* A rule stated beside the form it governs. */
.e5-rule {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: var(--e5-gap-field);
    border: 1px dashed var(--e5-border);
    border-radius: var(--e5-r-sm);
    background: var(--e5-bg-soft);
    font-size: var(--e5-fs-sm);
    line-height: 1.5;
}
.e5-rule i { color: var(--e5-primary); margin-top: .2em; }

/* One channel per card-row on the Channels tab. */
.e5-chan {
    border: 1px solid var(--e5-border);
    border-radius: var(--e5-r-sm);
    padding: 16px 18px 4px;
    margin-bottom: 14px;
}
.e5-chan.is-off { opacity: .6; }
.e5-chan__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.e5-chan__title { font-weight: 700; color: var(--e5-ink); }

/* The patch chain: version -> version -> current. */
.e5-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.e5-chain__arrow { color: var(--e5-muted); font-size: var(--e5-fs-xs); }

@media (max-width: 768px) {
    .e5-toast { left: 16px; right: 16px; bottom: 16px; }
    .e5-modal__foot .e5-btn { flex: 1 1 auto; justify-content: center; }
}

/* =====================================================================
   STOREFRONT - the multi-product catalogue (DEPLOY-09)
   index.php, templates.php, product.php, custom-cms.php, quote.php.
   Every colour is a token, like the rest of this file.
   ===================================================================== */

.e5-pubbar__nav > a.is-current { color: var(--e5-primary); font-weight: 700; }
.e5-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.e5-center { text-align: center; margin-top: 28px; }
.e5-narrow { max-width: 860px; }
.e5-sect--tight { padding-top: 48px; padding-bottom: 48px; }

.e5-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.e5-hero__cta--ghost {
    background: var(--e5-surface);
    color: var(--e5-ink);
    border: 1px solid var(--e5-border);
    box-shadow: var(--e5-shadow-card);
}

/* ---- category chips --------------------------------------------------- */
.e5-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; }
.e5-chips--sub { margin-top: 12px; }
.e5-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--e5-border);
    border-radius: var(--e5-r-pill);
    background: var(--e5-surface);
    color: var(--e5-body);
    font-size: var(--e5-fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
.e5-chip span { color: var(--e5-muted); font-weight: 500; }
.e5-chip:hover { border-color: var(--e5-accent); color: var(--e5-ink); }
.e5-chip.is-active { background: var(--e5-primary); border-color: var(--e5-primary); color: var(--e5-on-primary); }
.e5-chip.is-active span { color: inherit; opacity: .75; }

/* ---- search bar ------------------------------------------------------- */
.e5-catbar { display: flex; gap: 10px; max-width: 560px; margin: 24px auto 0; }
.e5-catbar .e5-input { flex: 1 1 auto; }

/* ---- product cards ---------------------------------------------------- */
.e5-prods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 26px;
    margin-top: 36px;
}
.e5-prod {
    display: flex; flex-direction: column;
    height: 100%;
    background: var(--e5-surface);
    border: 1px solid var(--e5-border);
    border-radius: var(--e5-r);
    overflow: hidden;
    box-shadow: var(--e5-shadow-card);
    transition: box-shadow .25s ease, border-color .25s ease;
}
.e5-prod:hover { box-shadow: var(--e5-shadow-hover); border-color: var(--e5-border-hover); }
.e5-prod__media { display: block; aspect-ratio: 16 / 10; background: var(--e5-bg-soft); overflow: hidden; }
.e5-prod__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.e5-prod__ph {
    width: 100%; height: 100%; min-height: 160px;
    display: flex; align-items: center; justify-content: center;
    background: var(--e5-grad);
}
.e5-prod__ph i { font-size: 2.6rem; color: var(--e5-on-primary); opacity: .9; }
.e5-prod__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1 1 auto; }
.e5-prod__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.e5-prod__cat { font-size: var(--e5-fs-xs); color: var(--e5-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.e5-prod h3 { font-family: var(--e5-font); font-size: var(--e5-fs-xl); font-weight: var(--e5-fw-heading); line-height: 1.25; }
.e5-prod h3 a { color: var(--e5-ink); text-decoration: none; }
.e5-prod h3 a:hover { color: var(--e5-primary); }
.e5-prod p { color: var(--e5-muted); line-height: 1.6; flex: 1 1 auto; }
.e5-prod__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.e5-prod__price { font-family: var(--e5-font); font-size: var(--e5-fs-xl); font-weight: 800; color: var(--e5-ink); }
.e5-prod__price--muted { font-size: var(--e5-fs-sm); font-weight: 600; color: var(--e5-muted); }

/* ---- call-to-action band ---------------------------------------------- */
.e5-band {
    display: flex; align-items: center; justify-content: space-between; gap: 28px;
    padding: 40px 44px;
    border-radius: var(--e5-r);
    background: var(--e5-bg-soft);
    border: 1px solid var(--e5-border);
    border-left: 5px solid var(--e5-accent);
}
.e5-band h2 { font-family: var(--e5-font); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: var(--e5-ink); margin-bottom: 8px; }
.e5-band p { color: var(--e5-muted); line-height: 1.7; max-width: 680px; }
.e5-band__cta { flex: 0 0 auto; }
.e5-band--slim { margin-top: 48px; padding: 28px 32px; }
.e5-steps { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; padding-left: 1.2em; color: var(--e5-body); }
.e5-steps--row { list-style: none; padding: 0; justify-content: center; margin-top: 22px; }
.e5-steps--row li {
    background: var(--e5-surface); border: 1px solid var(--e5-border); border-radius: var(--e5-r-sm);
    padding: 12px 16px; font-size: var(--e5-fs-sm);
}

/* ---- product page ------------------------------------------------------ */
.e5-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--e5-fs-sm); color: var(--e5-muted); margin-bottom: 22px; }
.e5-crumbs a { color: var(--e5-muted); }
.e5-crumbs i { font-size: .7em; opacity: .6; }
.e5-pdp { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.e5-pdp__media {
    border-radius: var(--e5-r); overflow: hidden; aspect-ratio: 16 / 10;
    background: var(--e5-bg-soft); border: 1px solid var(--e5-border); box-shadow: var(--e5-shadow-lift);
}
.e5-pdp__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.e5-pdp__buy { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.e5-pdp__buy > .e5-badge { align-self: flex-start; }
.e5-pdp__buy h1 { font-family: var(--e5-font); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; color: var(--e5-ink); line-height: 1.15; }
.e5-pdp__lead { color: var(--e5-muted); font-size: var(--e5-fs-lg); line-height: 1.6; }
.e5-pdp__price { font-family: var(--e5-font); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; color: var(--e5-ink); }
.e5-pdp__price span { font-size: var(--e5-fs-sm); font-weight: 500; color: var(--e5-muted); }
.e5-pdp__buy .e5-plan__cta { margin-top: 0; text-decoration: none; }
.e5-pdp__facts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; color: var(--e5-body); font-size: var(--e5-fs-sm); }
.e5-pdp__facts i { width: 1.3em; color: var(--e5-accent); }
.e5-pdp__details { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; }
.e5-pdp__details h2 { font-family: var(--e5-font); font-size: var(--e5-fs-xl); font-weight: 800; color: var(--e5-ink); margin-bottom: 12px; }
.e5-pdp__details .e5-plan__list { margin-top: 0; }
.e5-editions { display: flex; flex-wrap: wrap; gap: 8px; }
.e5-prose { color: var(--e5-body); line-height: 1.8; }

/* ---- quote form and quote page ---------------------------------------- */
.e5-quote { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
.e5-quote__h { font-family: var(--e5-font); font-size: var(--e5-fs-lg); font-weight: 700; color: var(--e5-ink); margin: 8px 0 14px; }
.e5-quote__h:not(:first-of-type) { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--e5-border); }
.e5-quote__side h3 { font-family: var(--e5-font); font-size: var(--e5-fs-lg); font-weight: 700; color: var(--e5-ink); margin-bottom: 8px; }
.e5-quote__side .e5-plan__list { margin: 10px 0 0; }
.e5-quote__title { font-family: var(--e5-font); font-size: var(--e5-fs-2xl); font-weight: 800; color: var(--e5-ink); margin: 6px 0 18px; }
.e5-quote__offer h3 { font-family: var(--e5-font); font-weight: 700; color: var(--e5-ink); margin: 20px 0 8px; }
.e5-quote__answer { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--e5-border); }
.e5-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; }
.e5-checks .e5-check { margin-bottom: 6px; }
fieldset.e5-field { border: 0; padding: 0; margin: 0 0 var(--e5-gap-field); min-width: 0; }
.e5-field__error { display: block; margin-top: 6px; color: var(--e5-danger); font-size: var(--e5-fs-sm); font-weight: 500; }
.e5-input[aria-invalid="true"] { border-color: var(--e5-danger); }

.e5-progress { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; counter-reset: e5step; }
.e5-progress li {
    flex: 1 1 140px;
    counter-increment: e5step;
    padding: 12px 14px;
    border-radius: var(--e5-r-sm);
    border: 1px solid var(--e5-border);
    background: var(--e5-surface);
    color: var(--e5-muted);
    font-size: var(--e5-fs-sm);
    font-weight: 600;
}
.e5-progress li::before { content: counter(e5step) ". "; }
.e5-progress li.is-done { color: var(--e5-success); border-color: var(--e5-success); }
.e5-progress li.is-done::before { content: "\2713  "; }
.e5-progress li.is-now { color: var(--e5-on-primary); background: var(--e5-primary); border-color: var(--e5-primary); }

/* ---- live preview (preview.php, and its buttons) ----------------------
   Hover effects stay quiet on purpose: a 1-2px lift, a soft fade. */
.e5-prod__actions { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.e5-pdp__media--live { position: relative; display: block; }
.e5-pdp__live {
    position: absolute; left: 50%; bottom: 16px;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    border-radius: var(--e5-r-pill);
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-family: var(--e5-font); font-size: var(--e5-fs-sm); font-weight: 600;
    opacity: .85;
    transition: opacity .25s ease;
}
.e5-pdp__media--live:hover .e5-pdp__live,
.e5-pdp__media--live:focus-visible .e5-pdp__live { opacity: 1; }

.e5-live { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--e5-bg-soft); z-index: 50; }
.e5-live__bar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 56px; padding: 0 14px;
    background: var(--e5-surface);
    border-bottom: 1px solid var(--e5-border);
}
.e5-live__back { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--e5-ink); text-decoration: none; font-weight: 700; }
.e5-live__back:hover { color: var(--e5-primary); }
.e5-live__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--e5-font); }
.e5-live__sizes { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--e5-r-pill); background: var(--e5-bg-soft); border: 1px solid var(--e5-border); }
.e5-live__sizes button {
    width: 38px; height: 32px; border: 0; border-radius: var(--e5-r-pill);
    background: transparent; color: var(--e5-muted); cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.e5-live__sizes button:hover { color: var(--e5-ink); }
.e5-live__sizes button.is-active { background: var(--e5-surface); color: var(--e5-ink); box-shadow: var(--e5-shadow-card); }
.e5-live__actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.e5-live__stage { flex: 1 1 auto; display: flex; justify-content: center; overflow: auto; padding: 0; }
.e5-live__device {
    position: relative; width: 100%; height: 100%;
    background: var(--e5-surface);
    transition: width .3s ease;
}
.e5-live[data-size="tablet"] .e5-live__stage,
.e5-live[data-size="phone"] .e5-live__stage { padding: 18px; }
.e5-live[data-size="tablet"] .e5-live__device { width: 768px; max-width: 100%; border-radius: 14px; box-shadow: var(--e5-shadow-lift); overflow: hidden; }
.e5-live[data-size="phone"] .e5-live__device  { width: 375px; max-width: 100%; border-radius: 22px; box-shadow: var(--e5-shadow-lift); overflow: hidden; }
.e5-live__device iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.e5-live__loading, .e5-live__blocked {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    color: var(--e5-muted); text-align: center; padding: 24px;
    background: var(--e5-surface);
}
.e5-live__loading[hidden], .e5-live__blocked[hidden] { display: none; }
.e5-live__blocked i { font-size: 2.4rem; opacity: .4; }

@media (max-width: 700px) {
    .e5-live__sizes, .e5-live__label { display: none; }
}

@media (max-width: 992px) {
    .e5-pdp, .e5-pdp__details, .e5-quote { grid-template-columns: 1fr; }
    .e5-band { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}
@media (max-width: 560px) {
    .e5-catbar { flex-direction: column; }
    .e5-prods { grid-template-columns: 1fr; }
    .e5-hero__cta { padding: 15px 28px; }
}

/* =====================================================================
   ACCESSIBILITY AND PRINT
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .e5-stat:hover,
    .e5-btn--primary:hover,
    .e5-btn--success:hover,
    .e5-btn--warning:hover,
    .e5-btn--danger:hover { transform: none; }
}

@media print {
    .e5-shell__nav,
    .e5-shell__burger,
    .e5-shell__scrim,
    .e5-shell__actions,
    .e5-toast,
    .e5-pagination,
    .e5-menu { display: none !important; }
    .e5-shell__main   { margin-left: 0; }
    .e5-shell__header { position: static; height: auto; padding: 0 0 12px; border-bottom: 1px solid var(--e5-border); }
    .e5-shell__content { padding: 0; }
    .e5-card { break-inside: avoid; box-shadow: none; margin-bottom: 14px; }
    body { background: none; }
}