/* ==========================================================================
   EARLY ORDER SHOP  (eos-)

   The /EarlyOrder page as a shop: pick a digger, add parts to an order that
   stays on screen, check out on one screen.  Everything private is eos-
   prefixed; the handful of eo2- names that remain are hooks the picture
   tooling (scripts/fittings/shoot_earlyorder.mjs) drives the page by.

   THE LOOK IS "PARTS TAG" (owner, 2026-10-14, picked from five in the
   Downloads/earlyorder-looks mockup: "i like the parts tag"): the shop
   counter - a pegboard ground, each part a manila tag with a punched hole
   that turns green once the part is in the order, group headings on
   label-maker tape, the order as a pad with a dark head.  The site's green
   stays for actions and its yellow for the order's count and Checkout.

   The face is Atkinson Hyperlegible Next ("i want the most readable fonts"),
   the Braille Institute's face drawn so 0/O, 1/l/I, 5/S and 8/B can't be
   mistaken, self-hosted under /assets/atkinson/ (SIL Open Font License,
   OFL.txt beside the file).  Readable on purpose: no capitals for style, no
   wide letter spacing, nothing under 14px.  The customer never sees a part
   number ("just the description"); the script keeps the card's code in a
   hidden .eo2-code for the picture tooling.

   The hero is NOT this look ("the current header/hero shouldnt change"): it
   keeps Barlow Semi Condensed (/assets/barlow/, OFL.txt there), named in
   --eo-hero-font.  .eos re-points the layout's --brand-font to it, so the
   layout's hero h1/h2 (Marlboro everywhere else) stay as they were.  The site
   header and footer sit outside .eos and keep Marlboro.

   Rules this page keeps (owner): no striped cards (no one-sided coloured
   borders, selection is a full border + tint), no toasts, no browser
   dialogs, no clipped words.
   ========================================================================== */

@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/atkinson/AtkinsonHyperlegibleNext-latin-var.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/barlow/BarlowSemiCondensed-600.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/barlow/BarlowSemiCondensed-700.woff2?v=1') format('woff2'); }

.eos {
    --eo-body: 'Atkinson Hyperlegible Next', 'Segoe UI', Arial, sans-serif;
    --eo-head: var(--eo-body);
    --eo-head-w: 800;
    --eo-head-ls: 0;
    --eo-head-case: none;
    --eo-hero-font: 'Barlow Semi Condensed', 'Barlow', Arial, sans-serif;
    --eo-hero-ls: 0.04em;
    --eo-green: #2e8b57;
    --eo-green-600: #277a4c;
    --eo-green-700: #1f6640;
    --eo-green-900: #143f29;
    --eo-green-050: #eef6f1;
    --eo-green-100: #dcefe3;
    --eo-yellow: #f3e100;
    --eo-yellow-600: #b5a600;
    --eo-yellow-050: #fffbe0;
    --eo-ink: #29231a;
    --eo-ink-2: #3d3526;
    --eo-ink-3: #5c523e;
    --eo-line: #dcc78f;            /* manila edges */
    --eo-line-2: #c6b07a;
    --eo-bg: #ecebe6;              /* the pegboard */
    --eo-peg: radial-gradient(circle, rgba(0, 0, 0, .11) 2.3px, transparent 2.9px) 0 0 / 26px 26px fixed, var(--eo-bg);
    --eo-paper: #fffdf6;           /* panels: the welcome, the order pad, checkout */
    --eo-paper-line: #ddd6c3;
    --eo-tape: #1d1a14;            /* label-maker tape, the order pad's head */
    --eo-tape-ink: #f5f1e6;
    --eo-tag: linear-gradient(to bottom, #f7e8bf, #f1dfaf);   /* a manila tag */
    --eo-tag-edge: #d9c58d;
    --eo-card: #f5e5b8;            /* manila: sheets, the digger chip */
    --eo-raise: #f8ecc9;           /* a quieter second surface */
    --eo-field: #fffdf6;           /* inputs, steppers, chips, tiles */
    --eo-chip: #fffdf6;            /* counts */
    --eo-ghost: #bfcac3;           /* placeholder icons */
    /* the ground a part's picture sits on: light, because the stills are
       black rollers and grey steel on a clear background */
    --eo-well: radial-gradient(120% 100% at 50% 12%, #fff 0%, #f6f4ee 62%, #e9e6dd 100%);
    --eo-tint: var(--eo-green-050);
    --eo-tint-line: var(--eo-green-100);
    --eo-tint-ink: var(--eo-green-900);
    --eo-accent-ink: var(--eo-green-700);   /* kickers, links */
    --eo-go-ink: var(--eo-green-700);       /* steppers, "in your order" */
    --eo-lf-bg: var(--eo-yellow-050);
    --eo-lf-icon: #8a7c00;
    --eo-noearly-ink: #6f5400;     /* "No early order pricing" */
    --eo-noearly-bg: var(--eo-yellow-050);
    --eo-noearly-line: #ece08f;
    --eo-warn-bg: #fff7d6;
    --eo-warn-line: #efe39a;
    --eo-warn-ink: #4a4300;
    --eo-err-bg: #fdeeed;
    --eo-err-line: #f1c4c0;
    --eo-err-ink: #7c1b15;
    --eo-scrim: rgba(9, 22, 14, .55);
    --eo-danger: #b3261e;
    --eo-danger-050: #fdeeed;
    --eo-warn-050: #fff7d6;
    --eo-r-lg: 6px;
    --eo-r: 6px;
    --eo-r-sm: 10px;
    --eo-r-ctl: 6px;               /* buttons, fields, steppers */
    --eo-r-tile: 4px;              /* kinds of parts, the digger chip */
    --eo-r-pic: 3px;               /* small pictures */
    --eo-shadow-1: 0 1px 0 rgba(80, 60, 20, .16), 0 3px 8px rgba(80, 60, 20, .10);
    --eo-shadow-2: 0 2px 0 rgba(80, 60, 20, .16), 0 12px 24px rgba(80, 60, 20, .18);
    --eo-shadow-3: 0 24px 60px rgba(8, 22, 14, .30);
    --eo-sticky-top: 0px;
    --eo-ease: cubic-bezier(.2, .8, .2, 1);
    --brand-font: var(--eo-hero-font);
    font-family: var(--eo-body);
    color: var(--eo-ink);
    background: var(--eo-peg);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

@media (min-width: 769px) {
    /* the layout's fixed 22px hose rail slides in once the header scrolls away */
    .eos {
        --eo-sticky-top: 22px;
    }
}

.eos *,
.eos *::before,
.eos *::after {
    box-sizing: border-box;
}

.eos button,
.eos input,
.eos textarea,
.eos select {
    font-family: inherit;
}

.eos [hidden] {
    display: none !important;
}

.eos-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- hero: the layout's own, in its own face (not the shop's) ----------- */
.eos .eos-hero {
    height: 36vh;
    min-height: 290px;
}

@media (max-width: 768px) {
    .eos .eos-hero {
        height: 28vh;
        min-height: 210px;
    }
}

.eos .hero-overlay h1,
.eos .hero-overlay h2 {
    font-family: var(--eo-hero-font);
    text-transform: uppercase;
    /* Marlboro's black outline reads as a smudge round a heavy sans */
    text-shadow: 0 2px 0 rgba(0, 0, 0, .28), 0 8px 26px rgba(0, 0, 0, .32);
}

.eos .hero-overlay h1 {
    font-weight: 700;
    letter-spacing: var(--eo-hero-ls);
}

.eos .hero-overlay h2 {
    font-weight: 600;
    letter-spacing: .04em;
    font-size: 26px;
}

@media (max-width: 768px) {
    .eos .hero-overlay h2 {
        font-size: 20px;
    }
}

/* ---- frame ---------------------------------------------------------------- */
.eos-wrap {
    max-width: 1380px;
    margin: 0 auto;
    padding: 26px 20px 120px;
}

@media (max-width: 768px) {
    .eos-wrap {
        padding: 16px 16px 124px;
    }
}

.eos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

@media (min-width: 1100px) {
    .eos-layout {
        grid-template-columns: minmax(0, 1fr) 372px;
    }
}

.eos-h2 {
    font-family: var(--eo-head);
    font-weight: var(--eo-head-w);
    letter-spacing: var(--eo-head-ls);
    text-transform: var(--eo-head-case);
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.12;
    color: var(--eo-ink);
    margin: 0;
}

.eos-lede {
    color: var(--eo-ink-3);
    font-size: 16px;
    margin: 8px 0 0;
}

.eos-kicker {
    font-size: 14px;
    font-weight: 700;
    color: var(--eo-accent-ink);
}

/* ---- server / page banners ------------------------------------------------ */
.eos-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    border-radius: var(--eo-r);
    margin-bottom: 18px;
    font-size: 15px;
    border: 1.5px solid;
}

.eos-banner i {
    margin-top: 3px;
}

.eos-banner--err {
    background: var(--eo-err-bg);
    border-color: var(--eo-err-line);
    color: var(--eo-err-ink);
}

.eos-banner--info {
    background: var(--eo-warn-bg);
    border-color: var(--eo-warn-line);
    color: var(--eo-warn-ink);
}

.eos-banner--preview {
    background: #eaf1fb;
    border-color: #bcd0ee;
    color: #173a6b;
}

/* ---- buttons ----------------------------------------------------------------
   The big yellow call-to-action is the layout's own .btn.btn-primary, so it
   presses like every other button on the site.  The green ones below use the
   same machined edge in the brand green.                                      */
.eos .btn {
    min-width: 0;
    border-radius: var(--eo-r-ctl);
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
}

.eos-btn-go {
    width: 100%;
    padding: 15px 22px !important;
    font-size: 17px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.eos-green {
    appearance: none;
    border: 0;
    border-radius: var(--eo-r-ctl);
    background-color: var(--eo-green);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .28) 0 1px, rgba(255, 255, 255, .08) 1px 2px, rgba(255, 255, 255, 0) 2px);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 11px 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 3px 0 var(--eo-green-900), 0 4px 10px rgba(20, 63, 41, .22);
    transition: transform 140ms var(--eo-ease), box-shadow 140ms var(--eo-ease), background-color 200ms ease-out;
    white-space: nowrap;
}

@media (hover: hover) {
    .eos-green:hover {
        background-color: #339a61;
        transform: translateY(-1px);
        box-shadow: 0 4px 0 var(--eo-green-900), 0 8px 16px rgba(20, 63, 41, .26);
    }
}

.eos-green:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--eo-green-900), inset 0 2px 4px rgba(0, 0, 0, .2);
    transition-duration: 60ms;
}

.eos-quiet {
    appearance: none;
    border: 1.5px solid var(--eo-line-2);
    background: var(--eo-field);
    color: var(--eo-ink-2);
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--eo-r-ctl);
    padding: 8px 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

@media (hover: hover) {
    .eos-quiet:hover {
        border-color: var(--eo-green);
        color: var(--eo-accent-ink);
    }
}

.eos-link {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    color: var(--eo-accent-ink);
    font-weight: 600;
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}

/* the − n + stepper, used on cards, in the order and in the part view */
.eos-step {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--eo-green);
    border-radius: var(--eo-r-ctl);
    background: var(--eo-field);
    overflow: hidden;
}

.eos-step button {
    appearance: none;
    border: 0;
    background: var(--eo-field);
    color: var(--eo-go-ink);
    width: 42px;
    height: 40px;
    font-size: 15px;
    cursor: pointer;
    transition: background-color .15s ease;
}

@media (hover: hover) {
    .eos-step button:hover {
        background: var(--eo-tint);
    }
}

.eos-step output {
    min-width: 40px;
    text-align: center;
    font-weight: 800;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    color: var(--eo-ink);
}

.eos-step--sm button {
    width: 34px;
    height: 32px;
    font-size: 13px;
}

.eos-step--sm output {
    min-width: 32px;
    font-size: 15px;
}

/* ---- welcome (a personal link) -------------------------------------------- */
.eos-hello {
    background: var(--eo-paper);
    border: 1px solid var(--eo-paper-line);
    border-radius: var(--eo-r-lg);
    box-shadow: var(--eo-shadow-1);
    padding: 24px 26px;
    margin-bottom: 22px;
    display: grid;
    gap: 16px;
}

@media (max-width: 768px) {
    .eos-hello {
        padding: 18px 16px;
    }
}

.eos-hello-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 20px;
}

.eos-diggers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.eos-digger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 10px;
    border-radius: var(--eo-r-tile);
    background: var(--eo-card);
    border: 1.5px solid var(--eo-line);
    min-width: 0;
}

/* the site's own digger icon (the harvest map's), not a stock tractor */
.eos-digger-ic {
    flex: 0 0 66px;
    width: 66px;
    height: 44px;
    object-fit: contain;
}

.eos-dig-mini {
    flex: 0 0 auto;
    width: 30px;
    height: 20px;
    object-fit: contain;
}

.eos-digger b {
    display: block;
    font-family: var(--eo-head);
    font-weight: var(--eo-head-w);
    font-size: 21px;
    line-height: 1;
    letter-spacing: var(--eo-head-ls);
}

.eos-digger small {
    display: block;
    color: var(--eo-ink-3);
    font-size: 14px;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.eos-dig-gen {
    font-family: var(--eo-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--eo-ink-2);
    margin-left: 6px;
}

.eos-dig-n {
    display: inline-block;
    font-family: var(--eo-body);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--eo-green-900);
    background: var(--eo-yellow);
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: 2px;
}

@media (max-width: 640px) {
    .eos-diggers {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .eos-digger {
        padding: 8px 12px 8px 8px;
    }

    .eos-digger-ic {
        flex-basis: 57px;
        width: 57px;
        height: 38px;
    }

    .eos-digger b {
        font-size: 19px;
    }
}

.eos-notme {
    font-size: 14px;
    color: var(--eo-ink-3);
}

/* what they bought last year: Early Order on top, the other parts under it */
.eos-lastfall {
    background: var(--eo-paper);
    border: 1px solid var(--eo-paper-line);
    border-radius: var(--eo-r-lg);
    box-shadow: var(--eo-shadow-1);
    margin-bottom: 22px;
    overflow: hidden;
}

.eos-lastfall-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    padding: 18px 22px;
    background: var(--eo-lf-bg);
    border-bottom: 1px solid var(--eo-line);
}

.eos-lastfall-head h3 {
    margin: 0;
    font-family: var(--eo-head);
    font-weight: var(--eo-head-w);
    letter-spacing: var(--eo-head-ls);
    text-transform: var(--eo-head-case);
    font-size: 21px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.eos-lastfall-head h3 i {
    color: var(--eo-lf-icon);
}

.eos-lf-when {
    display: block;
    font-family: var(--eo-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--eo-ink-3);
    margin-top: 2px;
}

.eos-lastfall-body {
    padding: 6px 22px 18px;
}

@media (max-width: 768px) {
    .eos-lastfall-head,
    .eos-lastfall-body {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.eos-lf-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--eo-line);
}

.eos-lf-row:first-child {
    border-top: 0;
}

.eos-lf-qty {
    font-weight: 800;
    color: var(--eo-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* "2 × Deviner chain, ..." - what it is, never the part number */
.eos-lf-desc {
    font-size: 16px;
    line-height: 1.45;
    color: var(--eo-ink);
    overflow-wrap: anywhere;
}

.eos-lf-main {
    min-width: 0;
}

.eos-ly-sec {
    padding: 12px 0 4px;
}

.eos-ly-sec + .eos-ly-sec {
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1.5px solid var(--eo-line-2);
}

.eos-ly-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.eos-ly-h h4 {
    margin: 0;
    font-family: var(--eo-head);
    font-weight: var(--eo-head-w);
    letter-spacing: var(--eo-head-ls);
    text-transform: var(--eo-head-case);
    font-size: 19px;
    color: var(--eo-ink);
}

.eos-ly-h small {
    display: block;
    margin-top: 1px;
    font-size: 14px;
    font-weight: 700;
    color: var(--eo-go-ink);
}

.eos-ly-sec--other .eos-ly-h small {
    color: var(--eo-noearly-ink);
}

.eos-ly-kind {
    padding: 16px 0 2px;
    font-size: 14px;
    font-weight: 800;
    color: var(--eo-ink-3);
}

.eos-ly-kind + .eos-lf-row {
    border-top: 0;
}

.eos-ly-none {
    margin: 8px 0 6px;
    font-size: 14.5px;
    color: var(--eo-ink-3);
}

/* a card they bought last year (All parts, the part view): it stands out */
.eos-lastbuy {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--eo-green-900);
    background: var(--eo-yellow);
    border-radius: 999px;
    padding: 3px 10px;
}

/* a search's rows from last year, above the matching cards */
.eos-ly-hits {
    background: var(--eo-paper);
    border: 1px solid var(--eo-paper-line);
    border-radius: var(--eo-r-lg);
    box-shadow: var(--eo-shadow-1);
    padding: 4px 22px;
    margin-bottom: 22px;
}

@media (max-width: 768px) {
    .eos-ly-hits {
        padding: 4px 16px;
    }
}

/* the shop's own parts that get no early order pricing, and last year's other parts */
.eos-noearly {
    width: fit-content;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--eo-noearly-ink);
    background: var(--eo-paper);
    border: 1px solid var(--eo-noearly-line);
    border-radius: 999px;
    padding: 2px 10px;
}

.eos-cg-h span small {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--eo-noearly-ink);
}

.eos-in-order {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--eo-go-ink);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .eos-lf-row {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .eos-lf-row > :last-child {
        grid-column: 2;
        justify-self: start;
    }
}

/* already sent this season */
.eos-sent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 14px 18px;
    border-radius: var(--eo-r);
    background: var(--eo-tint);
    border: 1.5px solid var(--eo-tint-line);
    margin-bottom: 18px;
    font-size: 15px;
}

.eos-sent i {
    color: var(--eo-green);
}

/* ---- choose the digger (public visit) -------------------------------------- */
.eos-pick {
    background: var(--eo-paper);
    border: 1px solid var(--eo-paper-line);
    border-radius: var(--eo-r-lg);
    box-shadow: var(--eo-shadow-1);
    padding: 30px 30px 34px;
    max-width: 980px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .eos-pick {
        padding: 22px 16px 26px;
    }
}

.eos-gens {
    display: grid;
    gap: 18px;
    margin-top: 24px;
}

@media (min-width: 900px) {
    .eos-gens {
        grid-template-columns: 1.6fr 1fr;
    }
}

.eos-gen {
    border: 1.5px solid var(--eo-line);
    border-radius: var(--eo-r);
    padding: 18px;
    background: var(--eo-raise);
}

.eos-gen h3 {
    margin: 0 0 4px;
    font-family: var(--eo-head);
    font-weight: var(--eo-head-w);
    letter-spacing: var(--eo-head-ls);
    text-transform: var(--eo-head-case);
    font-size: 20px;
}

.eos-gen p {
    margin: 0 0 14px;
    color: var(--eo-ink-3);
    font-size: 14px;
}

.eos-years {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 10px;
}

.eos-year {
    appearance: none;
    border: 1.5px solid var(--eo-line-2);
    background: var(--eo-card);
    border-radius: var(--eo-r-ctl);
    padding: 14px 6px;
    font-family: var(--eo-head);
    font-weight: var(--eo-head-w);
    letter-spacing: var(--eo-head-ls);
    font-size: 22px;
    color: var(--eo-ink);
    cursor: pointer;
    transition: transform .15s var(--eo-ease), border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

@media (hover: hover) {
    .eos-year:hover {
        border-color: var(--eo-green);
        transform: translateY(-2px);
        box-shadow: var(--eo-shadow-1);
    }
}

.eos-year.is-on {
    border-color: var(--eo-green);
    background: var(--eo-tape);
    color: var(--eo-yellow);
}

/* ---- the shop bar (sticky) ------------------------------------------------- */
.eos-bar {
    position: sticky;
    top: var(--eo-sticky-top);
    z-index: 30;
    background: var(--eo-peg);
    margin: 0 -20px;
    padding: 10px 20px 12px;
    display: grid;
    /* minmax(0, ...): nothing in the bar may stretch it past a phone's edge */
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    transition: box-shadow .2s ease;
}

.eos-bar > * {
    min-width: 0;
}

.eos-bar.is-stuck {
    box-shadow: 0 8px 18px -12px rgba(23, 34, 28, .35);
}

@media (max-width: 768px) {
    .eos-bar {
        margin: 0 -16px;
        padding: 10px 16px;
    }

    /* the layout's round menu button floats top-right on a phone (fixed,
       top 20px, 50px square); only the search row is up there with it */
    .eos-bar-row {
        padding-right: 66px;
    }
}

.eos-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.eos-search {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
}

.eos-search i.fa-magnifying-glass,
.eos-search i.fa-search {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--eo-ink-3);
    pointer-events: none;
}

/* the browser's own clear button would sit beside ours */
.eos-search input::-webkit-search-cancel-button,
.eos-search input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.eos-search input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 50px;
    border-radius: var(--eo-r-ctl);
    border: 1.5px solid #cfc6ad;
    background: var(--eo-paper);
    padding: 0 44px 0 42px;
    font-size: 16px;
    color: var(--eo-ink);
    box-shadow: var(--eo-shadow-1);
}

/* no clear button until there is something to clear: the hint gets its room */
.eos-search input:placeholder-shown {
    padding-right: 12px;
}

.eos-search input:focus {
    outline: none;
    border-color: var(--eo-green);
    box-shadow: 0 0 0 4px rgba(46, 139, 87, .16);
}

.eos-search-x {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--eo-r-ctl);
    background: transparent;
    color: var(--eo-ink-3);
    cursor: pointer;
}

.eos-for {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 15px;
    color: var(--eo-ink-2);
}

.eos-for b {
    color: var(--eo-ink);
}

/* digger-group chips (a personal link with machines of more than one kind) */
/* at most three groups: they wrap rather than run off the edge looking cut */
.eos-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0;
}

.eos-chip {
    appearance: none;
    flex: 0 0 auto;
    border: 1.5px solid var(--eo-line-2);
    background: var(--eo-field);
    border-radius: var(--eo-r-ctl);
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--eo-ink-2);
    cursor: pointer;
    white-space: nowrap;
}

.eos-chip.is-on {
    background: var(--eo-ink);
    border-color: var(--eo-ink);
    color: var(--eo-bg);
}

/* ---- category tiles ---------------------------------------------------------- */
.eos-cat {
    appearance: none;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #cfc6ad;
    background: var(--eo-paper);
    border-radius: var(--eo-r-tile);
    padding: 6px 14px 6px 6px;
    cursor: pointer;
    color: var(--eo-ink);
    transition: border-color .15s ease, background-color .15s ease, transform .15s var(--eo-ease);
}

@media (hover: hover) {
    .eos-cat:hover {
        border-color: var(--eo-green);
    }
}

.eos-cat-pic {
    width: 44px;
    height: 44px;
    border-radius: var(--eo-r-pic);
    background: var(--eo-well);
    display: grid;
    place-items: center;
    overflow: hidden;
    /* on the light picture ground in both versions */
    color: #1f6640;
    font-size: 17px;
}

.eos-cat-pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.eos-cat-name {
    font-weight: 700;
    font-size: 15.5px;
    white-space: nowrap;
}

.eos-cat-n {
    font-size: 14px;
    font-weight: 700;
    color: var(--eo-ink-3);
    background: var(--eo-chip);
    border-radius: 999px;
    padding: 1px 8px;
    font-variant-numeric: tabular-nums;
}

/* the kind on show: a strip of label tape */
.eos-cat.is-on {
    border-color: var(--eo-tape);
    background: var(--eo-tape);
    color: var(--eo-tape-ink);
}

.eos-cat.is-on .eos-cat-n {
    background: var(--eo-yellow);
    color: var(--eo-tape);
}

/* a customer's own page: the last tile is what they bought last year, in
   manila (owner, 2026-10-14: "stand out within ALL PARTS"; 2026-10-15: "last/at
   the bottom instead of first/at the top") */
.eos-cat--last {
    background: var(--eo-card);
    border-color: var(--eo-line-2);
}

.eos-cat--last .eos-cat-pic {
    background: #fff4b8;
    color: var(--eo-lf-icon);
}

.eos-cat--last .eos-cat-n {
    background: #f4e7a1;
    color: var(--eo-noearly-ink);
}

@media (hover: hover) {
    .eos-cat--last:hover {
        border-color: var(--eo-yellow-600);
    }
}

.eos-cat--last.is-on {
    border-color: var(--eo-tape);
    background: var(--eo-tape);
    color: var(--eo-yellow);
}

.eos-cat--last.is-on .eos-cat-n {
    background: var(--eo-yellow);
    color: var(--eo-tape);
}

/* narrower than the list down the left: one button in the bar names the kind on
   show and opens every kind in a sheet. It replaced a sideways strip (owner,
   2026-10-15: "some user on mobile may not understand they have to scroll
   horizontally to view all the categories"). */
.eos-kinds {
    width: 100%;
    text-align: left;
}

.eos-kinds .eos-cat-name {
    white-space: normal;
}

.eos-kinds-more {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--eo-accent-ink);
    white-space: nowrap;
}

.eos-kinds-more i {
    font-size: 14px;
}

.eos-kinds.is-on .eos-kinds-more {
    color: var(--eo-yellow);
}

/* ---- a wide screen: the kinds of parts become a list down the left ------- */
.eos-rail {
    display: none;
}

@media (min-width: 1280px) {
    .eos-shop {
        display: grid;
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }

    .eos-rail {
        display: block;
        position: sticky;
        top: calc(var(--eo-sticky-top) + 12px);
    }

    .eos-bar .eos-cats {
        display: none;
    }
}

.eos-rail-list {
    display: grid;
    gap: 6px;
}

/* the list down the left and the Kinds sheet: the same rows */
.eos-rail .eos-cat,
.eos-klist .eos-cat {
    width: 100%;
    padding: 5px 10px 5px 5px;
}

.eos-rail .eos-cat-pic,
.eos-klist .eos-cat-pic {
    width: 38px;
    height: 38px;
}

.eos-rail .eos-cat-name,
.eos-klist .eos-cat-name {
    font-size: 15.5px;
}

.eos-rail .eos-cat-n,
.eos-klist .eos-cat-n {
    margin-left: auto;
}

/* ---- notes above the grid ---------------------------------------------------- */
.eos-advice {
    display: grid;
    gap: 10px;
    margin: 6px 0 18px;
}

.eos-advice div {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 16px;
    border-radius: var(--eo-r);
    font-size: 15px;
    background: var(--eo-warn-bg);
    border: 1.5px solid var(--eo-warn-line);
    color: var(--eo-warn-ink);
}

.eos-advice div.is-info {
    background: var(--eo-tint);
    border-color: var(--eo-tint-line);
    color: var(--eo-tint-ink);
}

.eos-advice i {
    margin-top: 3px;
}

/* ---- the parts ---------------------------------------------------------------- */
.eos-group-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 26px 0 12px;
}

/* a group's name on label-maker tape */
.eos-group-h h3 {
    display: inline-block;
    margin: 0;
    font-family: var(--eo-head);
    font-weight: var(--eo-head-w);
    letter-spacing: var(--eo-head-ls);
    text-transform: var(--eo-head-case);
    font-size: 18px;
    color: var(--eo-tape-ink);
    background: var(--eo-tape);
    padding: 5px 12px 4px;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .3);
}

.eos-group-h span {
    color: var(--eo-ink-2);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.eos-results {
    color: var(--eo-ink-3);
    font-size: 15px;
    margin: 14px 0 0;
}

.eos-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(214px, 100%), 1fr));
    gap: 18px;
}

/* a part: a manila tag, corners clipped at the top, a punched hole */
.eos-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--eo-tag);
    border: 0;
    border-radius: 5px;
    padding-top: 34px;
    clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 20px);
    overflow: hidden;
    transition: transform .18s var(--eo-ease), box-shadow .18s var(--eo-ease), border-color .18s ease, background-color .18s ease;
}

.eos-card::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 11px;
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
    border-radius: 50%;
    background: var(--eo-bg);
    box-shadow: 0 0 0 4px #e3cd8f, inset 0 1px 2px rgba(0, 0, 0, .35);
    z-index: 2;
}

@media (hover: hover) {
    .eos-card:hover {
        transform: translateY(-3px) rotate(-.4deg);
    }
}

/* in the order: the hole turns green */
.eos-card.is-picked::before {
    background: var(--eo-green);
}

.eos-thumb {
    appearance: none;
    position: relative;
    display: block;
    width: calc(100% - 20px);
    margin: 0 10px;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--eo-tag-edge);
    border-radius: 3px;
    padding: 0;
    background: var(--eo-well);
    cursor: pointer;
    overflow: hidden;
}

.eos-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s var(--eo-ease);
}

@media (hover: hover) {
    .eos-card:hover .eos-thumb img {
        transform: scale(1.04);
    }
}

.eos-mono {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--eo-ghost);
    font-size: 42px;
}

.eos-badge3d {
    position: absolute;
    left: 10px;
    top: 10px;
    background: rgba(23, 34, 28, .82);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 5px 9px;
    border-radius: 999px;
    pointer-events: none;
}

.eos-tick {
    position: absolute;
    right: 10px;
    top: 10px;
    background: var(--eo-green);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(20, 63, 41, .3);
    pointer-events: none;
}

.eos-card-body {
    padding: 14px 16px 6px;
    display: grid;
    gap: 7px;
    flex: 1;
    align-content: start;
}

/* the kind of part, rubber-stamped */
.eos-card .eos-kicker {
    width: fit-content;
    color: var(--eo-green-700);
    border: 1.5px solid currentColor;
    border-radius: 3px;
    padding: 0 6px;
}

.eos-card-name {
    font-size: 16px;
    line-height: 1.45;
    color: var(--eo-ink);
    overflow-wrap: anywhere;
}

.eos-fits {
    font-size: 14px;
    color: var(--eo-ink-3);
    display: flex;
    align-items: center;
    gap: 6px;
}

.eos-fits i {
    color: var(--eo-green);
}

.eos-card-foot {
    padding: 10px 16px 16px;
}

.eos-card-foot .eos-green {
    width: 100%;
}

.eos-card-foot .eos-step {
    width: 100%;
    justify-content: space-between;
}

.eos-card-foot .eos-step button {
    width: 54px;
}

/* a phone: the card becomes a row, picture left - the tag lies on its side,
   the hole on the left */
@media (max-width: 640px) {
    .eos-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .eos-card {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-rows: auto auto;
        padding-top: 0;
        padding-left: 26px;
        clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
        background: linear-gradient(to right, #f7e8bf, #f1dfaf);
    }

    .eos-card::before {
        left: 13px;
        top: 50%;
        width: 11px;
        height: 11px;
        margin: -5.5px 0 0 -5.5px;
    }

    .eos-thumb {
        grid-row: 1 / span 2;
        aspect-ratio: auto;
        margin: 8px 0;
        width: auto;
        height: calc(100% - 16px);
        min-height: 112px;
    }

    .eos-card-body {
        padding: 12px 14px 4px;
    }

    .eos-card-foot {
        padding: 8px 14px 14px;
    }

    .eos-badge3d,
    .eos-tick {
        display: none;
    }
}

.eos-empty {
    text-align: center;
    color: var(--eo-ink-3);
    padding: 40px 10px;
}

.eos-empty i {
    display: block;
    font-size: 30px;
    margin-bottom: 10px;
    color: var(--eo-ghost);
}

/* ---- the order (cart) ----------------------------------------------------------
   One element.  At 1100px and wider it is the right-hand column; narrower it
   is a sheet that slides up (a phone) or in from the right (a tablet), opened
   from the dock at the bottom of the screen.                                   */
/* the order: an order pad with a dark head */
.eos-cart {
    background: var(--eo-paper);
    border: 1px solid var(--eo-paper-line);
    border-radius: var(--eo-r-lg);
    box-shadow: var(--eo-shadow-2);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

@media (min-width: 1100px) {
    .eos-cart {
        position: sticky;
        top: calc(var(--eo-sticky-top) + 14px);
        max-height: calc(100vh - var(--eo-sticky-top) - 28px);
    }
}

.eos-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: var(--eo-tape);
    color: var(--eo-tape-ink);
}

.eos-cart-head h2 {
    margin: 0;
    font-family: var(--eo-head);
    font-weight: var(--eo-head-w);
    letter-spacing: var(--eo-head-ls);
    text-transform: var(--eo-head-case);
    font-size: 21px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--eo-tape-ink);
}

.eos-count {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--eo-yellow);
    color: var(--eo-green-900);
    font-weight: 800;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.eos-count.bump {
    animation: eosBump .42s var(--eo-ease);
}

@keyframes eosBump {
    0% { transform: scale(1); }
    35% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.eos-cart-x {
    appearance: none;
    border: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--eo-r-ctl);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}

@media (min-width: 1100px) {
    .eos-cart-x {
        display: none;
    }
}

.eos-cart-for {
    padding: 11px 20px;
    background: var(--eo-card);
    color: var(--eo-ink);
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    justify-content: space-between;
}

.eos-cart-body {
    overflow: auto;
    overscroll-behavior: contain;
    padding: 4px 20px 10px;
    flex: 1 1 auto;
    min-height: 0;
}

.eos-cg {
    padding: 12px 0 4px;
    border-top: 1px solid var(--eo-line);
}

.eos-cg:first-child {
    border-top: 0;
}

.eos-cg-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.eos-cg-h span {
    font-size: 14px;
    font-weight: 800;
    color: var(--eo-ink-3);
}

.eos-cg-h .eos-link {
    font-size: 14px;
}

.eos-line {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
}

.eos-line-pic {
    width: 52px;
    height: 44px;
    border-radius: var(--eo-r-pic);
    background: var(--eo-well);
    object-fit: contain;
    display: grid;
    place-items: center;
    color: var(--eo-ghost);
}

.eos-line-name {
    font-size: 14px;
    line-height: 1.4;
    color: var(--eo-ink);
    overflow-wrap: anywhere;
}

.eos-line-act {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.eos-remove {
    appearance: none;
    border: 0;
    background: none;
    color: var(--eo-ink-3);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
}

@media (hover: hover) {
    .eos-remove:hover {
        color: var(--eo-danger);
    }
}

.eos-note-box {
    margin: 4px 0 10px;
}

.eos-note-box textarea {
    width: 100%;
    min-height: 70px;
    border: 1.5px solid var(--eo-line-2);
    border-radius: var(--eo-r-ctl);
    padding: 10px 12px;
    font-size: 16px;
    resize: vertical;
    color: var(--eo-ink);
    background: var(--eo-field);
}

.eos-note-box textarea:focus {
    outline: none;
    border-color: var(--eo-green);
    box-shadow: 0 0 0 3px rgba(46, 139, 87, .14);
}

.eos-cart-empty {
    text-align: center;
    padding: 34px 10px 30px;
    color: var(--eo-ink-3);
}

.eos-cart-empty i {
    display: block;
    font-size: 34px;
    color: var(--eo-ghost);
    margin-bottom: 12px;
}

.eos-cart-foot {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--eo-line);
    background: var(--eo-raise);
    display: grid;
    gap: 12px;
}

.eos-tally {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--eo-ink-3);
}

.eos-tally b {
    color: var(--eo-ink);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1099px) {
    .eos-cart {
        position: fixed;
        z-index: 9985;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 90vh;
        border-radius: 22px 22px 0 0;
        transform: translateY(104%);
        visibility: hidden;
        transition: transform .3s var(--eo-ease), visibility 0s linear .3s;
        box-shadow: var(--eo-shadow-3);
    }

    .eos-cart.is-open {
        transform: none;
        visibility: visible;
        transition: transform .3s var(--eo-ease), visibility 0s;
    }

    /* a grip, so it reads as a sheet that came up from the bar */
    .eos-cart::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 7px;
        width: 44px;
        height: 5px;
        margin-left: -22px;
        border-radius: 3px;
        background: rgba(255, 255, 255, .55);
        z-index: 1;
    }

    .eos-cart-head {
        padding-top: 22px;
    }
}

@media (min-width: 769px) and (max-width: 1099px) {
    .eos-cart {
        left: auto;
        top: 0;
        width: 430px;
        max-height: none;
        border-radius: 0;
        transform: translateX(104%);
    }

    .eos-cart::before {
        display: none;
    }

    .eos-cart-head {
        padding-top: 18px;
    }
}

.eos-scrim {
    position: fixed;
    inset: 0;
    z-index: 9980;
    background: var(--eo-scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
}

.eos-scrim.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease, visibility 0s;
}

/* the bar at the bottom of a phone or tablet */
.eos-dock {
    position: fixed;
    z-index: 950;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 9px 9px 9px 16px;
    border-radius: 8px;
    background: var(--eo-tape);
    color: #fff;
    box-shadow: 0 10px 30px rgba(8, 30, 18, .35);
    transform: translateY(160%);
    transition: transform .34s var(--eo-ease);
}

@media (max-width: 1099px) {
    .eos-dock {
        display: flex;
    }
}

.eos-dock.is-on {
    transform: none;
}

/* the footer must not end up under the dock */
@media (max-width: 1099px) {
    body.eos-has-dock > footer {
        padding-bottom: 96px;
    }
}

.eos-dock-text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
}

.eos-dock-text small {
    display: block;
    font-weight: 500;
    font-size: 14px;
    opacity: .85;
}

.eos-dock .btn {
    padding: 11px 16px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ---- checkout ----------------------------------------------------------------- */
.eos-co {
    display: grid;
    gap: 18px;
}

.eos-co-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.eos-co-sec {
    background: var(--eo-paper);
    border: 1px solid var(--eo-paper-line);
    border-radius: var(--eo-r-lg);
    box-shadow: var(--eo-shadow-1);
    padding: 22px 24px 24px;
}

@media (max-width: 768px) {
    .eos-co-sec {
        padding: 18px 16px 20px;
    }
}

.eos-co-sec h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-family: var(--eo-head);
    font-weight: var(--eo-head-w);
    letter-spacing: var(--eo-head-ls);
    text-transform: var(--eo-head-case);
    font-size: 21px;
}

.eos-co-n {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--eo-yellow);
    color: var(--eo-green-900);
    font-family: var(--eo-body);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
}

.eos-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 16px;
}

.eos-field--wide {
    grid-column: 1 / -1;
}

.eos-field label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--eo-ink-2);
    margin-bottom: 6px;
}

.eos-req {
    color: var(--eo-danger);
}

.eos-hint {
    margin: -2px 0 8px;
    font-size: 14px;
    color: var(--eo-ink-3);
}

.eos-input {
    width: 100%;
    min-height: 50px;
    border: 1.5px solid var(--eo-line-2);
    border-radius: var(--eo-r-ctl);
    padding: 11px 14px;
    /* 16px on purpose: anything smaller and iOS zooms the page on focus */
    font-size: 16px;
    background: var(--eo-field);
    color: var(--eo-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.eos-input:focus {
    outline: none;
    border-color: var(--eo-green);
    box-shadow: 0 0 0 4px rgba(46, 139, 87, .14);
}

textarea.eos-input {
    min-height: 100px;
    resize: vertical;
}

.eos-field.is-bad .eos-input,
.eos-field.is-bad #eo2Pad {
    border-color: var(--eo-danger);
    box-shadow: 0 0 0 4px rgba(179, 38, 30, .1);
}

.eos-err {
    display: none;
    margin-top: 6px;
    color: var(--eo-danger);
    font-size: 14px;
    font-weight: 600;
}

.eos-field.is-bad .eos-err {
    display: block;
}

.eos-pay {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--eo-warn-bg);
    border: 1.5px solid var(--eo-warn-line);
    border-radius: var(--eo-r);
    padding: 13px 16px;
    margin-bottom: 16px;
    font-size: 15px;
    color: var(--eo-warn-ink);
}

.eos-pay i {
    margin-top: 3px;
}

#eo2Pad {
    width: 100%;
    height: 190px;
    background: #fff;
    border: 1.5px solid var(--eo-line-2);
    border-radius: var(--eo-r-ctl);
    cursor: crosshair;
    touch-action: none;
    display: block;
    background-image: linear-gradient(to top, transparent 44px, var(--eo-line-2) 44px, var(--eo-line-2) 45px, transparent 45px);
}

.eos-sign-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 14px;
    color: var(--eo-ink-3);
}

.eos-sign-row .is-ok {
    color: var(--eo-go-ink);
    font-weight: 700;
}

.eos-robot {
    min-height: 78px;
}

.eos-robot-stand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border: 1.5px solid var(--eo-line-2);
    border-radius: 6px;
    background: #f9f9f9;
    padding: 18px 16px;
    font-size: 15px;
    color: #333;
}

.eos-robot-stand span {
    width: 26px;
    height: 26px;
    border: 2px solid #c1c1c1;
    border-radius: 3px;
    background: #fff;
}

.eos-place {
    display: grid;
    gap: 10px;
}

.eos-place p {
    margin: 0;
    font-size: 14px;
    color: var(--eo-ink-3);
    text-align: center;
}

/* ---- order received ------------------------------------------------------------- */
.eos-done {
    max-width: 760px;
    margin: 0 auto;
    background: var(--eo-paper);
    border: 1px solid var(--eo-paper-line);
    border-radius: var(--eo-r-lg);
    box-shadow: var(--eo-shadow-2);
    padding: 38px 34px 34px;
    text-align: center;
}

@media (max-width: 768px) {
    .eos-done {
        padding: 28px 18px 24px;
    }
}

.eos-done-check {
    width: 86px;
    height: 86px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--eo-green);
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 10px var(--eo-tint);
}

.eos-done-check svg {
    width: 44px;
    height: 44px;
}

.eos-done-check path {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: eosDraw .6s .15s var(--eo-ease) forwards;
}

@keyframes eosDraw {
    to { stroke-dashoffset: 0; }
}

.eos-done-msg {
    color: var(--eo-ink-2);
    font-size: 16px;
    margin: 12px auto 0;
    max-width: 560px;
}

.eos-ticket {
    display: inline-grid;
    gap: 2px;
    margin: 22px auto 6px;
    padding: 14px 24px;
    border: 2px dashed var(--eo-line-2);
    border-radius: 14px;
    background: var(--eo-raise);
}

.eos-ticket small {
    font-size: 14px;
    font-weight: 800;
    color: var(--eo-ink-3);
}

.eos-ticket b {
    font-size: 19px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .eos-ticket {
        display: grid;
        width: 100%;
        padding: 14px 10px;
    }

    .eos-ticket b {
        font-size: 16.5px;
        letter-spacing: 0;
    }
}

.eos-next {
    display: grid;
    gap: 10px;
    text-align: left;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.eos-next li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 16px;
    border-radius: var(--eo-r);
    background: var(--eo-tint);
    font-size: 15px;
}

.eos-next i {
    color: var(--eo-green);
    margin-top: 4px;
}

.eos-done-lines {
    text-align: left;
    margin-top: 22px;
    border-top: 1px solid var(--eo-line);
}

.eos-done-lines .eos-line {
    border-bottom: 1px solid var(--eo-line);
    align-items: center;
}

.eos-done-q {
    font-weight: 800;
    white-space: nowrap;
}

/* ---- the part view -----------------------------------------------------------------
   On a computer the picture side hosts the 3D viewer when the part has a
   model; everywhere else it is the big still.  #eo2Modal, data-kind and
   data-state stay for scripts/fittings/shoot_earlyorder.mjs.                        */
.eos-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.eos-modal.is-open {
    display: block;
}

.eos-modal-back {
    position: absolute;
    inset: 0;
    background: var(--eo-scrim);
}

.eos-modal-box {
    position: absolute;
    inset: 4vh 4vw;
    background: var(--eo-card);
    border-radius: 22px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    box-shadow: var(--eo-shadow-3);
    animation: eosRise .3s var(--eo-ease);
}

@keyframes eosRise {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    .eos-modal-box {
        inset: auto 0 0 0;
        max-height: 94vh;
        border-radius: 22px 22px 0 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(220px, 40vh) minmax(0, 1fr);
        animation-name: eosSheet;
    }

    @keyframes eosSheet {
        from { transform: translateY(40%); opacity: .4; }
        to { transform: none; opacity: 1; }
    }
}

.eos-stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    background: var(--eo-well);
}

.eos-stage > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4%;
}

#eo2cv {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.eos-stage-note {
    position: absolute;
    left: 14px;
    bottom: 14px;
    max-width: calc(100% - 28px);
    font-size: 14px;
    font-weight: 600;
    color: #5f6d65;
    background: rgba(255, 255, 255, .9);
    padding: 6px 12px;
    border-radius: 12px;
}

.eos-stage-bar {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .94);
    border: 1.5px solid var(--eo-line);
    border-radius: 14px;
    box-shadow: var(--eo-shadow-1);
    font-size: 14px;
    font-weight: 700;
    color: #36443c;
}

.eos-stage-bar .eos-unroll {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.eos-stage-bar input[type=range] {
    flex: 1;
    accent-color: var(--eo-green);
}

.eos-stage-bar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    cursor: pointer;
}

.eos-stage-wait {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5f6d65;
    font-size: 14px;
    font-weight: 700;
}

.eos-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--eo-line);
    background: var(--eo-raise);
}

@media (max-width: 900px) {
    .eos-side {
        border-left: 0;
        border-top: 1px solid var(--eo-line);
    }
}

.eos-side-body {
    overflow: auto;
    padding: 24px 24px 12px;
    display: grid;
    gap: 10px;
    align-content: start;
}

@media (max-width: 900px) {
    .eos-side-body {
        padding: 18px 16px 10px;
    }
}

.eos-side-body h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--eo-ink);
}

.eos-side-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 6px;
}

.eos-side-body td {
    padding: 7px 0;
    border-top: 1px solid var(--eo-line);
    vertical-align: top;
}

.eos-side-body td:first-child {
    color: var(--eo-ink-3);
    width: 46%;
    padding-right: 10px;
}

.eos-side-body td:last-child {
    font-weight: 600;
}

.eos-side-said {
    font-size: 14px;
    color: var(--eo-ink-3);
    line-height: 1.6;
}

.eos-side-said .bad {
    color: #a3401f;
}

.eos-side-foot {
    padding: 14px 24px 18px;
    border-top: 1px solid var(--eo-line);
    background: var(--eo-card);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .eos-side-foot {
        padding: 12px 16px 16px;
    }
}

.eos-side-foot .eos-green {
    flex: 1 1 160px;
    padding: 12px 18px;
}

.eos-close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .95);
    color: #17221c;
    font-size: 18px;
    cursor: pointer;
    z-index: 3;
    box-shadow: var(--eo-shadow-1);
}

/* ---- change-digger sheet (public) ------------------------------------------------ */
.eos-ysheet {
    position: fixed;
    z-index: 9990;
    left: 50%;
    top: 50%;
    width: min(720px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow: auto;
    transform: translate(-50%, -46%);
    opacity: 0;
    visibility: hidden;
    transition: transform .26s var(--eo-ease), opacity .2s ease, visibility 0s linear .26s;
    background: var(--eo-card);
    border-radius: 22px;
    box-shadow: var(--eo-shadow-3);
    padding: 24px 24px 26px;
}

.eos-ysheet.is-open {
    transform: translate(-50%, -50%);
    opacity: 1;
    visibility: visible;
    transition: transform .26s var(--eo-ease), opacity .2s ease, visibility 0s;
}

.eos-ysheet .eos-close {
    top: 14px;
    right: 14px;
    background: var(--eo-chip);
    color: var(--eo-ink);
    box-shadow: none;
}

/* ---- the Kinds sheet (the bar's Kinds button) -------------------------------------- */
.eos-ksheet {
    width: min(420px, calc(100vw - 24px));
}

.eos-ksheet .eos-h2 {
    padding-right: 52px;      /* clear of the close button */
}

.eos-klist {
    margin-top: 16px;
}

.eos-drop {
    margin-top: 18px;
    padding: 16px;
    border-radius: var(--eo-r);
    background: var(--eo-warn-bg);
    border: 1.5px solid var(--eo-warn-line);
    font-size: 15px;
}

.eos-drop ul {
    margin: 8px 0 14px;
    padding-left: 20px;
}

.eos-drop-act {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---- motion off ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .eos *,
    .eos *::before,
    .eos *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .eos-done-check path {
        stroke-dashoffset: 0;
    }
}

/*  THE PHONE GATE, HALF ONE OF TWO.  The interactive 3D viewer is
    computer-only; a phone never downloads three.js (the script's matchMedia is
    half two -- change one, change the other).  Pictures are stills on every
    device, so on a phone the part view shows the still and no 3D badge.        */
@media (max-width: 768px), (max-height: 600px) {
    .eos-badge3d {
        display: none;
    }
}

@media print {
    .eos-dock,
    .eos-bar,
    .eos-cats,
    .eos-scrim {
        display: none !important;
    }
}