/* ============================================================================
   JamesPeptides — desktop storefront
   ----------------------------------------------------------------------------
   A desktop-first layout for a 241-SKU / 113-compound catalogue. This is not a
   widened version of the mobile app: the catalogue is collapsed to one card per
   compound with its doses as options, filtering lives in a persistent rail, and
   the order summary stays in view instead of being a page you navigate to.

   The mobile storefront (app.css) is untouched and keeps serving phones and the
   Telegram Mini App.
   ========================================================================== */

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

:root {
    color-scheme: dark;

    /* Three planes rather than one flat black: the page sits deepest, the
       catalogue is a sheet lifted just off it, and the order and chat panels sit
       one step higher again. Two or three points of lightness is enough to read
       as separate columns without any of it becoming grey mush. */
    --bg:          #0b0d10;   /* page */
    --bg-soft:     #14171d;   /* order and chat panels */
    --sheet:       #101318;   /* the catalogue column */
    --surface:     #171a21;
    --surface-2:   #1c2028;
    --raised:      #242932;

    --line:        rgba(255, 255, 255, 0.075);
    --line-strong: rgba(255, 255, 255, 0.155);

    --txt:   #e9ecf1;
    --txt-2: #a6adb9;
    --txt-3: #767e8b;

    --brand:     #ff4757;
    --brand-hi:  #ff6472;
    --brand-dim: rgba(255, 71, 87, 0.13);

    --ok:      #22c55e;
    --ok-dim:  rgba(34, 197, 94, 0.13);
    --warn:      #f5b400;
    --warn-dim:  rgba(245, 180, 0, 0.10);
    --warn-line: rgba(245, 180, 0, 0.32);
    --info:      #4aa3ff;

    --r-xs: 6px;
    --r-sm: 9px;
    --r:    13px;
    --r-lg: 18px;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow:    0 24px 60px rgba(0, 0, 0, 0.55);

    --head-h: 66px;
    --nav-h:  46px;
    --shell:  1600px;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { background: var(--bg); }

body {
    background: var(--bg);
    color: var(--txt);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

body.is-locked { overflow: hidden; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
button:disabled { cursor: not-allowed; }

:focus-visible {
    outline: 2px solid var(--info);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2c313a; border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a4049; }

.jd-skip {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 200;
    background: var(--raised);
    color: var(--txt);
    padding: 10px 16px;
    border-radius: var(--r-sm);
    text-decoration: none;
}
.jd-skip:focus { left: 16px; }

.jd-shell-width {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 32px;
    width: 100%;
}

/* ==========================================================================
   Header
   ========================================================================== */

.jd-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(16, 19, 24, 0.94);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.jd-header-row {
    height: var(--head-h);
    display: grid;
    grid-template-columns: auto minmax(240px, 1fr) auto;
    align-items: center;
    gap: 28px;
}

.jd-brand {
    display: flex;
    align-items: baseline;
    gap: 1px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--txt);
    text-decoration: none;
    white-space: nowrap;
}
.jd-brand span { color: var(--brand); font-weight: 500; }

/* ---- search ---- */
.jd-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 620px;
}

.jd-search-icon {
    position: absolute;
    left: 14px;
    color: var(--txt-3);
    pointer-events: none;
    font-size: 15px;
    line-height: 1;
}

.jd-search input {
    width: 100%;
    height: 40px;
    padding: 0 84px 0 40px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    color: var(--txt);
    transition: border-color 0.15s, background 0.15s;
}
.jd-search input::placeholder { color: var(--txt-3); }
.jd-search input:focus {
    outline: none;
    background: var(--surface-2);
    border-color: var(--line-strong);
}

.jd-search-hint {
    position: absolute;
    right: 12px;
    display: flex;
    gap: 4px;
    align-items: center;
    color: var(--txt-3);
    font-size: 11px;
    pointer-events: none;
}
.jd-search-hint kbd {
    background: var(--raised);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 1px 5px;
    font-family: inherit;
    font-size: 10px;
    line-height: 1.4;
}
.jd-search input:not(:placeholder-shown) ~ .jd-search-hint { opacity: 0; }

.jd-search-clear {
    position: absolute;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--txt-3);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.jd-search-clear:hover { background: var(--raised); color: var(--txt); }
.jd-search.has-value .jd-search-clear { display: flex; }
.jd-search.has-value .jd-search-hint { display: none; }

/* ---- header actions ---- */
.jd-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jd-act {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    color: var(--txt-2);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.jd-act:hover { background: var(--surface-2); color: var(--txt); }
.jd-act-ico { font-size: 15px; line-height: 1; }

.jd-act-account { border-color: var(--line); }
.jd-act-account.is-linked { border-color: rgba(34, 197, 94, 0.35); color: var(--txt); }
.jd-act-account.is-linked .jd-act-ico { color: var(--ok); }

.jd-act-cart {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 600;
}
.jd-act-cart:hover { background: var(--brand-hi); border-color: var(--brand-hi); color: #fff; }

.jd-cart-badge {
    display: none;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    font-size: 11px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
}
.jd-cart-badge.visible { display: inline-flex; }

/* ==========================================================================
   Pending payment banner
   ========================================================================== */

.jd-pending {
    display: none;
    align-items: center;
    gap: 14px;
    margin: 20px auto 0;
    padding: 14px 18px;
    background: var(--warn-dim);
    border: 1px solid var(--warn-line);
    border-radius: var(--r);
}
.jd-pending.visible { display: flex; }
.jd-pending-ico { font-size: 20px; line-height: 1; }
.jd-pending-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.jd-pending-txt strong { color: var(--warn); font-size: 13.5px; }
.jd-pending-txt small { color: var(--txt-2); font-size: 12.5px; }
.jd-pending-btn {
    padding: 9px 18px;
    border-radius: var(--r-sm);
    background: var(--warn);
    color: #1a1400;
    font-size: 13px;
    font-weight: 700;
}
.jd-pending-btn:hover { filter: brightness(1.08); }

/* ==========================================================================
   Shell: filter rail · catalogue · order summary
   ========================================================================== */

/* Three columns: catalogue · order · chat.
   The catalogue gives up everything a customer does not need on a line (the
   product code, the word "Add") so the other two columns can be wide enough to
   read, rather than three squeezed panels. */
/* Catalogue and order side by side. The chat is a button in the corner again,
   so it no longer takes a share of the layout. */
.jd-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 384px;
    gap: 30px;
    align-items: start;
    /* Room to breathe between the facts strip and the working area. */
    padding-top: 44px;
    padding-bottom: 60px;
}

.jd-side {
    position: sticky;
    top: calc(var(--head-h) + 26px);
    max-height: calc(100vh - var(--head-h) - 58px);
    display: flex;
    flex-direction: column;
}

.jd-order { flex: 1 1 auto; min-height: 0; }

/* ---- side column ---- */
.jd-factbar {
    border-bottom: 1px solid var(--line);
    background: var(--sheet);
}

.jd-factbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 34px;
    padding-top: 11px;
    padding-bottom: 11px;
}
.jd-factbar-row > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
    white-space: nowrap;
}
.jd-factbar dt {
    color: var(--txt-3);
    font-size: 11.5px;
}
.jd-factbar dd {
    color: var(--txt);
    font-size: 12.5px;
    font-weight: 500;
}

/* ---- catalogue head ---- */
.jd-main {
    min-width: 0;
    padding: 22px 24px 26px;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.jd-toolbar {
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.jd-toolbar h1 {
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.jd-toolbar-count {
    margin-top: 3px;
    color: var(--txt-3);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.jd-alpha {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 16px;
}
.jd-alpha button {
    min-width: 19px;
    height: 24px;
    padding: 0 3px;
    border: none;
    border-radius: var(--r-xs);
    background: none;
    color: var(--txt-3);
    font-size: 12px;
    font-weight: 600;
}
.jd-alpha button { font-size: 11.5px; }
.jd-alpha button:hover:not(:disabled) { background: var(--surface); color: var(--txt); }
.jd-alpha button.active { background: rgba(255, 255, 255, 0.09); color: var(--txt); }
.jd-alpha button:disabled { opacity: 0.22; cursor: default; }

.jd-applied {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.jd-applied:empty { display: none; }
.jd-applied-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 8px 4px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--txt-2);
    font-size: 12px;
}
.jd-applied-pill b { color: var(--txt); font-weight: 600; }
.jd-applied-pill button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: var(--raised);
    color: var(--txt-2);
    font-size: 10px;
    line-height: 1;
}
.jd-applied-pill button:hover { background: var(--brand); color: #fff; }

.jd-loading, .jd-empty {
    padding: 70px 20px;
    text-align: center;
    color: var(--txt-3);
}
.jd-empty h3 { color: var(--txt); font-size: 16px; margin-bottom: 6px; }

/* ---- catalogue ----
   A price list, not a grid of cards. Every dose is its own line; lines of the
   same compound sit together, so the name is printed once and the continuation
   lines carry only the dose. Grouping is done with a hairline that is almost
   invisible within a compound and normal between compounds — structure without
   a single box. */

.jd-letter { margin-bottom: 26px; }
.jd-letter:last-child { margin-bottom: 0; }

.jd-letter-head {
    padding: 0 0 7px 2px;
    border-bottom: 1px solid var(--line);
    color: var(--txt-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.jd-rows { display: flex; flex-direction: column; }

.jd-row {
    display: grid;
    /* The last column has to hold a full stepper, not just a "+": at 34px the
       plus was clipped the moment a product went into the order. */
    grid-template-columns: minmax(0, 1fr) 92px 86px 92px;
    align-items: center;
    gap: 14px;
    padding: 9px 10px 9px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.035);
    border-radius: var(--r-sm);
    transition: background 0.12s;
}
.jd-row.lead { border-top-color: var(--line); }
.jd-row:first-child { border-top: none; }
.jd-row:hover { background: rgba(255, 255, 255, 0.032); }
.jd-row.in-cart { background: rgba(255, 71, 87, 0.045); }

.jd-row-name { min-width: 0; }
.jd-row-name button {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0;
    border: none;
    background: none;
    color: var(--txt);
    font-size: 13.5px;
    font-weight: 550;
    line-height: 1.35;
    text-align: left;
}
.jd-row-name button:hover { color: var(--brand-hi); }

.jd-row-dose {
    color: var(--txt-2);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.jd-row-note {
    display: block;
    margin-top: 1px;
    color: var(--txt-3);
    font-size: 11px;
}

.jd-row-price {
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--txt);
    white-space: nowrap;
}

.jd-row-act { display: flex; justify-content: flex-end; }

.jd-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: none;
    color: var(--txt-2);
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.jd-add:hover, .jd-add:focus-visible {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.jd-add:disabled { background: none; border-color: var(--line); color: var(--txt-3); }

.jd-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 32px;
    background: var(--bg-soft);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.jd-stepper button {
    width: 30px;
    border: none;
    background: none;
    color: var(--txt-2);
    font-size: 16px;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}
.jd-stepper button:hover:not(:disabled) { background: var(--raised); color: var(--txt); }
.jd-stepper button:disabled { opacity: 0.35; cursor: default; }
.jd-stepper-n {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    font-size: 13px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--txt);
}

/* ---- table view ---- */
.jd-tablewrap {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
}

.jd-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.jd-table thead th {
    position: sticky;
    top: var(--head-h);
    z-index: 4;
    background: var(--surface-2);
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--txt-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.jd-table thead th:first-child { border-top-left-radius: var(--r); }
.jd-table thead th:last-child { border-top-right-radius: var(--r); }
.jd-table th.num, .jd-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.jd-table th.act, .jd-table td.act { text-align: right; width: 132px; }

.jd-table tbody tr { transition: background 0.12s; }
.jd-table tbody tr:hover { background: var(--surface-2); }
.jd-table tbody tr.in-cart { background: rgba(255, 71, 87, 0.05); }

.jd-table td {
    padding: 10px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
}
.jd-table tbody tr:last-child td { border-bottom: none; }
.jd-table .t-name { font-weight: 600; color: var(--txt); text-align: left; }
.jd-table .t-name:hover { color: var(--brand-hi); }
.jd-table .t-code { color: var(--txt-3); font-size: 11.5px; margin-top: 1px; }
.jd-table .t-cat { color: var(--txt-2); }
.jd-table .t-price { font-weight: 700; }
.jd-table .t-unit { color: var(--txt-3); }
.jd-table .act .jd-add, .jd-table .act .jd-stepper { height: 30px; }
.jd-table .act .jd-stepper { margin-left: auto; }
.jd-table .act > * { float: right; }

/* ==========================================================================
   Order summary rail
   ========================================================================== */

.jd-order {
    display: flex;
    flex-direction: column;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.jd-order-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px 13px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.jd-order-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.jd-order-sub { color: var(--txt-3); font-size: 12px; }

.jd-order-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* A half-visible row at the fold reads as a rendering fault; the fade says
       "more below" instead. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
}
.jd-order-body:not(.is-scrollable) {
    -webkit-mask-image: none;
    mask-image: none;
}

.jd-order-empty {
    padding: 44px 24px;
    text-align: center;
    color: var(--txt-3);
}
.jd-order-empty-ico { font-size: 26px; opacity: 0.5; margin-bottom: 10px; }
.jd-order-empty p { font-size: 13px; }
.jd-order-empty small { display: block; margin-top: 5px; font-size: 12px; color: var(--txt-3); opacity: 0.8; }

/* The order lines as they were: name and line total on the first row, the
   presentation and the quantity on the second. The remove control sits beside
   the stepper rather than in a column of its own, so the shape is unchanged. */
.jd-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
}
.jd-line:last-child { border-bottom: none; }

.jd-line-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--txt);
}
.jd-line-spec {
    grid-column: 1;
    color: var(--txt-3);
    font-size: 11.5px;
}
.jd-line-price {
    grid-row: 1;
    grid-column: 2;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--txt);
    white-space: nowrap;
}
.jd-line-qty {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 6px;
}
.jd-line-qty .jd-stepper { height: 28px; }
.jd-line-qty .jd-stepper button { width: 26px; font-size: 14px; }

.jd-line-del {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: var(--r-xs);
    background: none;
    color: var(--txt-3);
    font-size: 11px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.jd-line-del:hover { opacity: 1; background: var(--brand-dim); color: var(--brand); }

.jd-line-gift .jd-line-price { color: var(--ok); }
.jd-gift-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    background: var(--ok-dim);
    border-radius: 999px;
    color: var(--ok);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}
.jd-strike { color: var(--txt-3); text-decoration: line-through; font-weight: 500; margin-right: 6px; }

.jd-order-foot {
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 14px 18px 16px;
}

.jd-total-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    color: var(--txt-2);
    font-size: 13px;
}
.jd-total-row span:last-child { font-variant-numeric: tabular-nums; color: var(--txt); }
.jd-total-row.discount span:last-child { color: var(--ok); }
.jd-total-grand {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
}
.jd-total-grand span:last-child { font-size: 18px; letter-spacing: -0.02em; }

.jd-discount {
    display: flex;
    gap: 7px;
    margin: 13px 0 0;
}
.jd-discount input {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 13px;
    text-transform: uppercase;
}
.jd-discount input::placeholder { text-transform: none; color: var(--txt-3); }
.jd-discount input:focus { outline: none; border-color: var(--line-strong); }
.jd-discount button {
    flex: none;
    padding: 0 15px;
    height: 36px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--txt);
    font-size: 13px;
    font-weight: 600;
}
.jd-discount button:hover { background: var(--raised); }

.jd-msg { margin-top: 7px; font-size: 12px; min-height: 0; }
.jd-msg:empty { display: none; }
.jd-msg.ok { color: var(--ok); }
.jd-msg.err { color: var(--brand); }

.jd-moq {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--warn-dim);
    border: 1px solid var(--warn-line);
    border-radius: var(--r-sm);
    color: var(--warn);
    font-size: 12px;
    line-height: 1.45;
}
.jd-moq-bar {
    margin-top: 7px;
    height: 4px;
    background: rgba(255, 255, 255, 0.09);
    border-radius: 2px;
    overflow: hidden;
}
.jd-moq-bar i { display: block; height: 100%; background: var(--warn); border-radius: 2px; transition: width 0.3s var(--ease); }

.jd-checkout {
    width: 100%;
    height: 44px;
    margin-top: 13px;
    border-radius: var(--r-sm);
    background: #1fa758;
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: filter 0.12s;
}
.jd-checkout:hover:not(:disabled) { filter: brightness(1.08); }
.jd-checkout:disabled { background: var(--raised); color: var(--txt-3); }

.jd-order-reassure {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--txt-3);
    font-size: 11.5px;
}
.jd-order-reassure div { display: flex; gap: 7px; align-items: flex-start; }

/* ==========================================================================
   Footer
   ========================================================================== */

.jd-footer {
    border-top: 1px solid var(--line);
    background: var(--sheet);
    padding: 42px 0 30px;
}

.jd-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--line);
}

.jd-footer-about .jd-brand { font-size: 18px; margin-bottom: 12px; }
.jd-footer-about p { color: var(--txt-3); font-size: 12.5px; line-height: 1.65; max-width: 44ch; }

.jd-footer-col h4 {
    margin-bottom: 12px;
    color: var(--txt);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.jd-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.jd-footer-col li, .jd-footer-col button, .jd-footer-col a {
    color: var(--txt-3);
    font-size: 12.5px;
    text-align: left;
    text-decoration: none;
    line-height: 1.5;
}
.jd-footer-col button:hover, .jd-footer-col a:hover { color: var(--txt); text-decoration: underline; }

.jd-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 22px;
    color: var(--txt-3);
    font-size: 12px;
    flex-wrap: wrap;
}
.jd-footer-bottom a { color: var(--info); text-decoration: none; }
.jd-footer-bottom a:hover { text-decoration: underline; }

/* ==========================================================================
   Modal
   ========================================================================== */

.jd-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.jd-modal.open { display: flex; }

.jd-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 7, 9, 0.72);
    backdrop-filter: blur(3px);
}

.jd-modal-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    animation: jd-pop 0.16s var(--ease);
}
.jd-modal-panel.wide { max-width: 720px; }

@keyframes jd-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to { opacity: 1; transform: none; }
}

.jd-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}
.jd-modal-head h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

.jd-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    color: var(--txt-3);
    font-size: 15px;
}
.jd-close:hover { background: var(--raised); color: var(--txt); }

.jd-modal-body {
    padding: 20px 22px 22px;
    overflow-y: auto;
}

/* form controls inside modals */
.jd-field { margin-bottom: 14px; }
.jd-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--txt-2);
    font-size: 12px;
    font-weight: 600;
}
.jd-input {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 14px;
}
.jd-input:focus { outline: none; border-color: var(--info); }
.jd-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.jd-field-hint {
    margin-top: 5px;
    color: var(--txt-3);
    font-size: 11.5px;
    line-height: 1.5;
}

.jd-form-error {
    display: none;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--brand-dim);
    border: 1px solid rgba(255, 71, 87, 0.35);
    border-radius: var(--r-sm);
    color: var(--brand-hi);
    font-size: 12.5px;
}
.jd-form-error.visible { display: block; }

.jd-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.jd-btn {
    height: 42px;
    padding: 0 22px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 600;
    transition: background 0.12s, border-color 0.12s;
}
.jd-btn-primary { background: var(--ok); color: #06230f; }
.jd-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.jd-btn-primary:disabled { background: var(--raised); color: var(--txt-3); }
.jd-btn-secondary { border-color: var(--line-strong); color: var(--txt); }
.jd-btn-secondary:hover { background: var(--raised); }
.jd-btn-danger { border-color: rgba(255, 71, 87, 0.4); color: var(--brand); }
.jd-btn-danger:hover { background: var(--brand-dim); }
.jd-btn-wide { width: 100%; justify-content: center; }

/* ---- payment options ---- */
.jd-pay {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    margin-bottom: 8px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.jd-pay:hover { border-color: var(--line-strong); background: var(--surface-2); }
.jd-pay.selected { border-color: var(--ok); background: var(--ok-dim); }
.jd-pay-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    background: var(--raised);
    border-radius: 50%;
    font-size: 17px;
}
.jd-pay-info { flex: 1; min-width: 0; }
.jd-pay-name { font-size: 14px; font-weight: 600; }
.jd-pay-desc { color: var(--txt-3); font-size: 12px; }
.jd-pay-err { color: var(--brand); font-size: 11.5px; }
.jd-pay-check { color: var(--ok); font-size: 16px; opacity: 0; }
.jd-pay.selected .jd-pay-check { opacity: 1; }
.jd-pay.disabled { opacity: 0.45; pointer-events: none; }

/* ---- summary blocks in modals ---- */
.jd-sec { margin-bottom: 20px; }
.jd-sec:last-of-type { margin-bottom: 0; }
.jd-sec h3 {
    margin-bottom: 10px;
    color: var(--txt-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.jd-sec-body {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 13px 15px;
}
.jd-kv {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--txt-2);
}
.jd-kv span:last-child, .jd-kv strong { color: var(--txt); font-variant-numeric: tabular-nums; text-align: right; }
.jd-kv-total {
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    font-weight: 700;
    color: var(--txt);
}
.jd-address-text { font-size: 13px; line-height: 1.65; color: var(--txt); }

.jd-payline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--txt-2);
}
.jd-payline:last-child { border-bottom: none; }
.jd-payline strong { color: var(--txt); font-variant-numeric: tabular-nums; }

.jd-copyrow { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.jd-addressbox {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
    line-height: 1.5;
}
.jd-copy {
    flex: none;
    height: 38px;
    padding: 0 15px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 600;
}
.jd-copy:hover { background: var(--raised); }

/* ---- order cards ---- */
.jd-ordercard {
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color 0.12s;
}
.jd-ordercard:hover { border-color: var(--line-strong); }
.jd-ordercard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}
.jd-ordercard-id { font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em; }
.jd-ordercard-detail {
    display: flex;
    justify-content: space-between;
    color: var(--txt-3);
    font-size: 12.5px;
}
.jd-ordercard-detail b { color: var(--txt); font-variant-numeric: tabular-nums; }
.jd-ordercard-actions { display: flex; gap: 8px; margin-top: 12px; }
.jd-ordercard-actions button {
    flex: 1;
    height: 34px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    font-size: 12.5px;
    font-weight: 600;
}
.jd-ordercard-actions .go { background: var(--ok); border-color: var(--ok); color: #06230f; }
.jd-ordercard-actions .go:hover { filter: brightness(1.08); }
.jd-ordercard-actions .no { color: var(--txt-2); }
.jd-ordercard-actions .no:hover { background: var(--raised); color: var(--txt); }

.jd-status {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.jd-status-draft { background: var(--raised); color: var(--txt-2); }
.jd-status-pending_payment { background: var(--warn-dim); color: var(--warn); }
.jd-status-paid { background: var(--ok-dim); color: var(--ok); }
.jd-status-in_progress { background: rgba(74, 163, 255, 0.14); color: var(--info); }
.jd-status-shipped { background: rgba(74, 163, 255, 0.14); color: var(--info); }
.jd-status-delivered { background: var(--ok-dim); color: var(--ok); }
.jd-status-cancelled { background: var(--brand-dim); color: var(--brand); }

.jd-tracking {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.jd-tracking code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--txt);
}

/* ---- success ---- */
.jd-success { text-align: center; padding: 20px 0 6px; }
.jd-success-ico { font-size: 42px; margin-bottom: 12px; }
.jd-success h2 { font-size: 19px; margin-bottom: 8px; }
.jd-success p { color: var(--txt-2); font-size: 13.5px; line-height: 1.6; max-width: 42ch; margin: 0 auto; }
.jd-success-id {
    display: inline-block;
    margin-top: 16px;
    padding: 8px 18px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
}

/* ---- FAQ ---- */
.jd-faq details {
    border-bottom: 1px solid var(--line);
    padding: 2px 0;
}
.jd-faq details:last-child { border-bottom: none; }
.jd-faq summary {
    padding: 13px 26px 13px 0;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    position: relative;
}
.jd-faq summary::-webkit-details-marker { display: none; }
.jd-faq summary::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--txt-3);
    font-size: 17px;
    font-weight: 400;
}
.jd-faq details[open] summary::after { content: '\2212'; }
.jd-faq-a {
    padding: 0 10px 15px 0;
    color: var(--txt-2);
    font-size: 13px;
    line-height: 1.65;
}
.jd-faq-a strong { color: var(--txt); }

/* ---- account / linking ---- */
.jd-link-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.jd-link-step { display: flex; gap: 13px; align-items: flex-start; }
.jd-link-num {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--raised);
    color: var(--txt-2);
    font-size: 12px;
    font-weight: 700;
}
.jd-link-step p { font-size: 13px; color: var(--txt-2); line-height: 1.55; }
.jd-link-step b { color: var(--txt); }

.jd-code {
    display: block;
    padding: 16px;
    margin: 4px 0 6px;
    background: var(--bg);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-align: center;
    color: var(--txt);
}

.jd-link-state {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--txt-2);
    font-size: 12.5px;
}
.jd-link-state.ok { border-color: rgba(34, 197, 94, 0.4); color: var(--ok); }
.jd-spin {
    width: 13px;
    height: 13px;
    flex: none;
    border: 2px solid var(--line-strong);
    border-top-color: var(--info);
    border-radius: 50%;
    animation: jd-spin 0.8s linear infinite;
}
@keyframes jd-spin { to { transform: rotate(360deg); } }

.jd-account-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: 16px;
}
.jd-account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--raised);
    font-size: 17px;
}
.jd-account-info { flex: 1; min-width: 0; }
.jd-account-name { font-size: 14px; font-weight: 600; }
.jd-account-id {
    color: var(--txt-3);
    font-size: 11.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
}

/* ---- product detail ---- */
.jd-detail-head { margin-bottom: 18px; }
.jd-detail-cat {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 9px;
    background: var(--raised);
    border-radius: 999px;
    color: var(--txt-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.jd-detail-head h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.jd-detail-desc {
    margin-top: 10px;
    color: var(--txt-2);
    font-size: 13.5px;
    line-height: 1.65;
}

.jd-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.jd-detail-table th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--txt-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: left;
}
.jd-detail-table th.num, .jd-detail-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.jd-detail-table th.act, .jd-detail-table td.act { text-align: right; width: 124px; }
.jd-detail-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.jd-detail-table tr:last-child td { border-bottom: none; }
.jd-detail-table .act > * { float: right; }

.jd-disclaimer {
    margin-top: 18px;
    padding: 12px 14px;
    background: var(--warn-dim);
    border: 1px solid var(--warn-line);
    border-radius: var(--r-sm);
    color: var(--warn);
    font-size: 12px;
    line-height: 1.6;
}

/* ==========================================================================
   Toast
   ========================================================================== */

.jd-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    z-index: 200;
    transform: translate(-50%, 16px);
    padding: 12px 22px;
    background: var(--raised);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    box-shadow: var(--shadow);
    color: var(--txt);
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s var(--ease);
}
.jd-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Responsive — the mobile storefront takes over below 1024px, so these steps
   only need to keep the desktop layout honest on smaller desktops and tablets.
   ========================================================================== */

@media (max-width: 1460px) {
    .jd-shell { grid-template-columns: minmax(0, 1fr) 352px; gap: 22px; }
    .jd-shell-width { padding: 0 24px; }
    .jd-row { grid-template-columns: minmax(0, 1fr) 82px 80px 88px; gap: 10px; }
    .jd-main { padding: 20px 18px 22px; }
}

@media (max-width: 1199px) {
    /* Not enough width for a second column that is still readable: the order
       becomes a drawer again and the chat goes back to its floating panel. */
    .jd-shell { grid-template-columns: minmax(0, 1fr); }
    .jd-side {
        position: static;
        display: block;
        height: auto;
        min-height: 0;
    }
    .jd-order {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 372px;
        max-height: none;
        border-radius: 0;
        border-top: none;
        border-bottom: none;
        border-right: none;
        z-index: 110;
        transform: translateX(100%);
        transition: transform 0.22s var(--ease);
        box-shadow: var(--shadow);
    }
    .jd-order.open { transform: none; }
    .jd-order-close { display: flex !important; }
    .jd-scrim {
        position: fixed;
        inset: 0;
        z-index: 105;
        background: rgba(6, 7, 9, 0.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }
    .jd-scrim.open { opacity: 1; pointer-events: auto; }
    .jd-factbar-row { gap: 6px 22px; }
}

.jd-order-close { display: none; }

@media (max-width: 1120px) {
    .jd-header-row { grid-template-columns: auto minmax(160px, 1fr) auto; gap: 16px; }
    .jd-act { padding: 0 11px; }
}