/* ==========================================================================
   ReedFinder B2B -- the trade portal's stylesheet.

   Was 816 lines inlined into every page by templates/b2b/_styles.html plus a
   further 320 inside portal.html. Re-sent on every request, cached never, and
   two files that had to be kept from drifting apart by hand.

   Everything is prefixed .b2b- so nothing leaks into the consumer shop, and
   nothing in the shop's own styles.css reaches in. One trap worth knowing:
   styles.css pins EVERY <header> element sticky, written for the site nav --
   which is why .b2b-page header is reset below.

   Sections:
     1. tokens and shared atoms      (from _styles.html)
     2. the original single-product portal (from portal.html)
     3. the trade catalogue          (new in phase 3)
   ========================================================================== */

/* ==========================================================================
   B2B trade landing — scoped styles. Everything is prefixed .b2b- so nothing
   can leak into the rest of the shop.
   ========================================================================== */

:root {
    --b2b-ink: #1e1e1e;
    --b2b-ink-2: #3a3733;
    --b2b-muted: #6f6a63;
    --b2b-red: #c8102e;            /* Austrian red */
    --b2b-burgundy: #8e1f2f;       /* the AW-Reeds logo red */
    --b2b-paper: #ffffff;
    --b2b-paper-2: #faf7f2;
    --b2b-paper-3: #f2ede4;
    --b2b-line: #e8e3da;
    --b2b-cane: #e8caa0;
    --b2b-dark: #1e1e1e;
    --b2b-dim: rgba(255, 255, 255, .78);
    --b2b-dim-2: rgba(255, 255, 255, .62);
    --b2b-hair: rgba(255, 255, 255, .12);
    --b2b-hair-solid: rgba(255, 255, 255, .22);
    --b2b-shadow: 0 30px 64px -26px rgba(60, 45, 25, .40);
    --b2b-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
}

.b2b-page {
    background: var(--b2b-paper);
    color: var(--b2b-ink);
    font-family: "Albert Sans", sans-serif;
    overflow-x: clip;
}

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

.b2b-shell { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
/* The chart is a working tool, not a column of prose -- it gets the room. */
.b2b-shell.is-wide { max-width: 1560px; }

/* --- shared atoms ------------------------------------------------------- */

.b2b-kicker {
    font-family: var(--b2b-mono);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--b2b-red);
    margin: 0 0 18px;
}

.b2b-kicker.on-dark { color: #ff8b98; }

.b2b-h2 {
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 18px;
    text-wrap: balance;
}

.b2b-lede {
    font-size: 18px;
    line-height: 1.65;
    color: var(--b2b-muted);
    margin: 0;
}

.b2b-num { font-family: var(--b2b-mono); font-variant-numeric: tabular-nums; }

.b2b-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.2, .9, .3, 1.2),
                box-shadow .25s ease, background-color .2s ease, color .2s ease;
}

.b2b-btn--primary { background: var(--b2b-red); color: #fff; }
.b2b-btn--primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgba(200, 16, 46, .6);
}
.b2b-btn--ghost { border-color: var(--b2b-line); color: var(--b2b-ink); background: transparent; }
.b2b-btn--ghost:hover { border-color: var(--b2b-ink); color: var(--b2b-ink); }
.b2b-btn--onDark { border-color: var(--b2b-hair-solid); color: #fff; }
.b2b-btn--onDark:hover { border-color: #fff; color: #fff; }
.b2b-btn[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: none; }

/* Scroll reveal. One class, applied sparingly. */
.b2b-rise { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .3, 1); }
.b2b-rise.is-in { opacity: 1; transform: none; }

/* --- admin bar ---------------------------------------------------------- */

.b2b-adminbar {
    background: #1d1f22;
    color: rgba(255, 255, 255, .82);
    font-family: var(--b2b-mono);
    font-size: 12px;
    line-height: 1.6;
    padding: 12px 0;
}
.b2b-adminbar b, .b2b-adminbar strong { color: #fff; }
.b2b-adminbar-tag {
    display: inline-block;
    background: var(--b2b-red);
    color: #fff;
    border-radius: 3px;
    padding: 2px 8px;
    margin-right: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 10px;
}
.b2b-adminbar select {
    background: #2a2d31;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 4px;
    padding: 3px 8px;
    font-family: var(--b2b-mono);
    font-size: 11px;
    margin-left: 8px;
}

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

.b2b-hero {
    position: relative;
    padding: 84px 0 92px;
    background:
        radial-gradient(120% 90% at 88% 8%, rgba(232, 202, 160, .30) 0%, transparent 58%),
        linear-gradient(180deg, var(--b2b-paper-2) 0%, var(--b2b-paper) 100%);
    overflow: hidden;
}

.b2b-hero__inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 64px;
    align-items: center;
}

/* Three bars, not a gradient — the flag stays a flag. */
.b2b-flagline { display: inline-flex; gap: 4px; margin-bottom: 20px; }
.b2b-flagline i { display: block; width: 22px; height: 5px; border-radius: 1px; background: var(--b2b-red); }
.b2b-flagline i:nth-child(2) { background: var(--b2b-paper-3); }

.b2b-hero h1 {
    font-size: clamp(40px, 5.6vw, 74px);
    line-height: 1.02;
    letter-spacing: -.035em;
    margin: 0 0 22px;
    text-wrap: balance;
}
.b2b-hero h1 em { font-style: italic; color: var(--b2b-red); }

.b2b-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.b2b-hero__note {
    margin: 22px 0 0;
    font-size: 14px;
    color: var(--b2b-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.b2b-hero__note span { display: inline-flex; align-items: center; gap: 7px; }
.b2b-hero__note i { color: var(--b2b-red); font-style: normal; font-weight: 700; }

.b2b-hero__visual { position: relative; }
.b2b-hero__visual img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: var(--b2b-shadow);
}

/* The exclusivity seal, over the corner of the image. */
.b2b-seal {
    position: absolute;
    left: -18px;
    bottom: -20px;
    background: var(--b2b-red);
    color: #fff;
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 20px 44px -18px rgba(200, 16, 46, .7);
    max-width: 236px;
}
.b2b-seal b {
    display: block;
    font-family: var(--b2b-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: 6px;
}
.b2b-seal span { font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }

/* --- the reed ------------------------------------------------------------ */

.b2b-section { padding: 92px 0; }
.b2b-section.is-tight { padding-top: 0; }

.b2b-reed__grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: start;
}

.b2b-facts { border-top: 1px solid var(--b2b-line); }
.b2b-fact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid var(--b2b-line);
    font-size: 15px;
}
.b2b-fact dt {
    font-family: var(--b2b-mono);
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--b2b-muted);
    margin: 0;
    font-weight: 400;
}
.b2b-fact dd { margin: 0; text-align: right; font-weight: 600; }

/* The "this is not a smart reed" clarifier — a callout, not a footnote: it is
   the single most misreadable thing about the trade offer. */
.b2b-clarify {
    margin-top: 34px;
    border: 1px solid var(--b2b-line);
    border-left: 3px solid var(--b2b-red);
    border-radius: 0 12px 12px 0;
    background: var(--b2b-paper-2);
    padding: 24px 28px;
}
.b2b-clarify b {
    display: block;
    font-family: var(--b2b-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--b2b-red);
    margin-bottom: 10px;
}
.b2b-clarify p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--b2b-ink-2); }
.b2b-clarify p + p { margin-top: 10px; color: var(--b2b-muted); }

/* --- strength chart ------------------------------------------------------ */

.b2b-chart-frame {
    border: 1px solid var(--b2b-line);
    border-radius: 18px;
    background: var(--b2b-paper);
    padding: 10px;
    margin: 0;
    overflow: hidden;
}

.b2b-chart-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Shown only when the image is not there yet -- a labelled placeholder beats
   a broken-image icon while the asset is outstanding. */
.b2b-chart-missing { display: none; }

.b2b-chart-frame.is-missing .b2b-chart-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 40px 28px;
    border: 1px dashed var(--b2b-line);
    border-radius: 10px;
    background: var(--b2b-paper-2);
    font-family: var(--b2b-mono);
    font-size: 13px;
    line-height: 1.7;
    color: var(--b2b-muted);
    text-align: center;
}

/* --- benefits + form ----------------------------------------------------- */

.b2b-apply {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--b2b-shadow);
}

.b2b-apply__aside {
    background: var(--b2b-dark);
    color: #fff;
    padding: 54px 46px 58px;
}
.b2b-apply__aside .b2b-h2 { color: #fff; font-size: clamp(26px, 2.6vw, 34px); }

.b2b-benefits { list-style: none; margin: 34px 0 0; padding: 0; }
.b2b-benefit {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 0 16px;
    padding: 18px 0;
    border-top: 1px solid var(--b2b-hair);
}
.b2b-benefit:last-child { border-bottom: 1px solid var(--b2b-hair); }
.b2b-benefit i {
    grid-row: span 2;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--b2b-red);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-style: normal; font-weight: 700; font-size: 14px;
    margin-top: 2px;
}
.b2b-benefit b { font-size: 16px; font-weight: 600; display: block; margin-bottom: 4px; }
.b2b-benefit span { font-size: 14px; line-height: 1.6; color: var(--b2b-dim-2); }

/* The roadmap note under the benefits list. Quieter than the numbered items,
   because it is a promise rather than a term of the account. */
.b2b-outlook {
    margin-top: 30px;
    padding: 20px 22px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    border-left: 2px solid var(--b2b-red);
}
.b2b-outlook b {
    display: block;
    font-family: var(--b2b-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ff8b98;
    margin-bottom: 9px;
}
.b2b-outlook p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--b2b-dim); }

/* "What happens next" — the question a shop has with its finger over the
   send button, answered before they press it rather than after. */
.b2b-next {
    margin: 4px 0 24px;
    padding: 20px 24px 22px;
    border-radius: 12px;
    background: var(--b2b-paper-2);
    border-left: 2px solid var(--b2b-red);
}
.b2b-next b {
    display: block;
    font-family: var(--b2b-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--b2b-red);
    margin-bottom: 12px;
}
.b2b-next ol { margin: 0; padding-left: 20px; }
.b2b-next li { font-size: 14px; line-height: 1.65; color: var(--b2b-ink-2); }
.b2b-next li + li { margin-top: 6px; }

.b2b-apply__body { background: var(--b2b-paper); padding: 54px 46px 58px; }

/* Registration-only landing: no benefits aside, so the card stops being half
   of a two-column band and becomes one narrow column under its own heading.
   The page is white and so is the card, so it needs a hairline to have an
   edge at all. */
.b2b-apply.is-solo {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
}
.b2b-apply.is-solo .b2b-apply__body { border: 1px solid var(--b2b-line); }

/* The shop's global stylesheet pins EVERY <header> element to the top
   (`header { position: sticky; top: 0 }` -- written for the site nav), which
   left this page's own heading floating over the form while it scrolled.
   These headers are headings, not navigation, so undo it inside .b2b-page. */
/* NARROWED. This used to be `.b2b-page header`, which at specificity (0,1,1)
   also swallowed the trade portal's own <header> -- stripping its background
   and its stickiness and leaving pale nav text on a pale page. It only ever
   needed to reach the landing page's heading block, so it now says so. */
.b2b-page .b2b-apply-head {
    position: static;
    z-index: auto;
    background: none;
    transition: none;
}

.b2b-apply-head { max-width: 760px; margin: 0 auto 34px; }
.b2b-apply-title {
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 18px;
    text-wrap: balance;
}

.b2b-fieldset { border: 0; padding: 0; margin: 0 0 30px; }
.b2b-fieldset legend {
    font-family: var(--b2b-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--b2b-muted);
    padding: 0 0 14px;
    margin: 0;
    width: 100%;
    border-bottom: 1px solid var(--b2b-line);
}
.b2b-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.b2b-field.is-full { grid-column: 1 / -1; }
.b2b-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.b2b-field label .req { color: var(--b2b-red); }
.b2b-field label .opt { color: var(--b2b-muted); font-weight: 400; }
.b2b-field input,
.b2b-field select {
    width: 100%;
    height: 48px;
    padding: 0 15px;
    border: 1px solid var(--b2b-line);
    border-radius: 10px;
    background: var(--b2b-paper);
    font-family: inherit;
    font-size: 15px;
    color: var(--b2b-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.b2b-field input:focus,
.b2b-field select:focus {
    outline: none;
    border-color: var(--b2b-red);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
}
.b2b-field input.is-autofilled { border-color: var(--b2b-red); background: rgba(200, 16, 46, .05); }
.b2b-field input.is-bad { border-color: var(--b2b-red); }
.b2b-hint { display: block; font-size: 12px; color: var(--b2b-muted); margin-top: 6px; line-height: 1.5; }

.b2b-vat-row { display: flex; gap: 10px; }
.b2b-vat-row input { flex: 1; }
.b2b-vat-btn {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 18px;
    border: 1px solid var(--b2b-line);
    border-radius: 10px;
    background: var(--b2b-paper-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.b2b-vat-btn:hover { background: var(--b2b-paper-3); border-color: var(--b2b-muted); }
.b2b-vat-status { display: none; font-size: 13px; margin-top: 7px; line-height: 1.5; }
.b2b-vat-status.is-shown { display: block; }
.b2b-vat-status.is-valid { color: #1c7c3f; }
.b2b-vat-status.is-invalid { color: var(--b2b-red); }
.b2b-vat-status.is-checking,
.b2b-vat-status.is-unavailable { color: var(--b2b-muted); }

.b2b-check { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.6; cursor: pointer; }
.b2b-check input { margin-top: 4px; flex: 0 0 auto; accent-color: var(--b2b-red); }

.b2b-submit {
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: 999px;
    background: var(--b2b-red);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: transform .25s cubic-bezier(.2, .9, .3, 1.2), box-shadow .25s ease;
}
.b2b-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(200, 16, 46, .6); }
.b2b-submit[disabled] { opacity: .55; transform: none; box-shadow: none; cursor: default; }

.b2b-form-foot { font-size: 13px; color: var(--b2b-muted); text-align: center; margin: 14px 0 0; line-height: 1.6; }

.b2b-status { display: none; margin-top: 16px; font-size: 14px; line-height: 1.6; }
.b2b-status.is-shown { display: block; }
.b2b-status.is-error { color: var(--b2b-red); }

.b2b-done { display: none; text-align: center; padding: 28px 10px 8px; }
.b2b-done.is-shown { display: block; }
.b2b-done .tick {
    width: 62px; height: 62px; margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(28, 124, 63, .1);
    color: #1c7c3f;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
}
.b2b-done h3 { font-size: 25px; margin: 0 0 12px; letter-spacing: -.02em; }
.b2b-done p { font-size: 15px; line-height: 1.7; color: var(--b2b-muted); margin: 0 auto; max-width: 44ch; }

/* A pending applicant coming back to the page. */
.b2b-pending {
    border: 1px solid var(--b2b-line);
    border-left: 3px solid var(--b2b-red);
    border-radius: 0 12px 12px 0;
    background: var(--b2b-paper-2);
    padding: 26px 30px;
}
.b2b-pending h3 { font-size: 20px; margin: 0 0 10px; letter-spacing: -.01em; }
.b2b-pending p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--b2b-muted); }

/* --- closing ------------------------------------------------------------- */

.b2b-closing { text-align: center; padding: 88px 0 104px; background: var(--b2b-paper-2); }
.b2b-closing .b2b-lede { margin: 0 auto 30px; }

@media (max-width: 991px) {
    .b2b-hero__inner { grid-template-columns: 1fr; gap: 44px; }
    .b2b-reed__grid { grid-template-columns: 1fr; gap: 38px; }
    .b2b-apply { grid-template-columns: 1fr; }
    .b2b-apply__aside, .b2b-apply__body { padding: 42px 26px 46px; }
    .b2b-section { padding: 68px 0; }
    .b2b-seal { left: 12px; bottom: 12px; }
}

@media (max-width: 575px) {
    .b2b-shell { padding: 0 20px; }
    .b2b-fields { grid-template-columns: 1fr; }
    .b2b-hero { padding: 56px 0 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .b2b-rise { opacity: 1; transform: none; transition: none; }
    .b2b-btn, .b2b-submit { transition: none; }
}


/* --- delivery map ------------------------------------------------------- */

.b2b-mapband {
    background: var(--b2b-dark);
    color: #fff;
    border-radius: 14px;
    padding: 52px 48px 56px;
    position: relative;
    overflow: hidden;
}

.b2b-mapband::before {
    content: "";
    position: absolute;
    top: -35%;
    left: -8%;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 137, 58, .13) 0%, rgba(255, 137, 58, 0) 65%);
    pointer-events: none;
}

.b2b-mapband-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(260px, .70fr) 1.30fr;
    gap: 48px;
    align-items: center;
}

.b2b-mapband .b2b-lead { color: var(--b2b-dim); }

/* Live readout — the numbers the map is drawing, stated in text so the
   section still says something with images or JS disabled. */
.b2b-readout {
    margin-top: 34px;
    border-top: 1px solid var(--b2b-hair);
}

.b2b-readout-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid var(--b2b-hair);
}

.b2b-readout-key {
    font-family: var(--b2b-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--b2b-dim-2);
    flex: none;
}

.b2b-readout-val {
    font-size: 15px;
    font-weight: 600;
    text-align: right;
    color: #fff;
}

.b2b-readout-val .b2b-num { font-size: 21px; }
.b2b-readout-val small {
    font-size: 12px;
    font-weight: 500;
    color: var(--b2b-dim-2);
    margin-left: 4px;
}

.b2b-badge {
    display: inline-block;
    font-family: var(--b2b-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 3px;
    background: rgba(255, 137, 58, .16);
    color: var(--b2b-red);
    border: 1px solid rgba(255, 137, 58, .38);
}

.b2b-badge.is-muted {
    background: rgba(255, 255, 255, .07);
    color: var(--b2b-dim);
    border-color: var(--b2b-hair-solid);
}

/* --- the map itself ----------------------------------------------------- */

.b2b-map { width: 100%; height: auto; display: block; overflow: visible; }

/* Land sits beneath everything as a barely-there wash — enough to read the
   shape of the continent, not enough to compete with the route. */
.b2b-map-land {
    fill: rgba(255, 255, 255, .055);
    stroke: rgba(255, 255, 255, .13);
    stroke-width: .8;
    stroke-linejoin: round;
}

.b2b-map-land.is-origin {
    fill: rgba(255, 137, 58, .10);
    stroke: rgba(255, 137, 58, .30);
}

.b2b-map-land.is-destination {
    fill: rgba(255, 137, 58, .17);
    stroke: rgba(255, 137, 58, .48);
}

/* These read as background texture, but the first pass was faint enough that
   the country codes were barely legible against the ink. Lifted so the map
   is readable while still sitting behind the route. */
.b2b-map-graticule { stroke: rgba(255, 255, 255, .10); stroke-width: 1; }
.b2b-map-frame { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1; }

.b2b-map-node { fill: rgba(255, 255, 255, .48); }
.b2b-map-node-label {
    font-family: var(--b2b-mono);
    font-size: 11px;
    letter-spacing: .08em;
    fill: rgba(255, 255, 255, .60);
}

/* Destination node and its label are lifted well clear of the other nodes. */
.b2b-map-node.is-destination { fill: var(--b2b-red); }
.b2b-map-node-label.is-destination {
    fill: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
}

.b2b-map-origin-dot { fill: var(--b2b-red); }
.b2b-map-origin-label {
    font-family: var(--b2b-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    fill: #fff;
}

.b2b-map-ring {
    fill: none;
    stroke: var(--b2b-red);
    stroke-width: 1.5;
    transform-origin: center;
    transform-box: fill-box;
}

.b2b-map-arc {
    fill: none;
    stroke: var(--b2b-red);
    stroke-width: 2;
    stroke-linecap: round;
}

.b2b-map-arc-shadow {
    fill: none;
    stroke: rgba(255, 137, 58, .18);
    stroke-width: 6;
    stroke-linecap: round;
}

.b2b-map-parcel { fill: #fff; }

/* --- animation ---------------------------------------------------------- */

/* The arc is held fully retracted until the section scrolls into view, then
   drawn once. Without the .is-live gate it would animate off-screen and the
   visitor would arrive at a map that had already finished moving. */
.b2b-map-arc,
.b2b-map-arc-shadow {
    stroke-dasharray: var(--b2b-arc-len, 900);
    stroke-dashoffset: var(--b2b-arc-len, 900);
}

.b2b-map.is-live .b2b-map-arc,
.b2b-map.is-live .b2b-map-arc-shadow {
    animation: b2b-draw 1.7s cubic-bezier(.65, .02, .28, 1) forwards;
}

.b2b-map.is-live .b2b-map-arc-shadow { animation-delay: .06s; }

@keyframes b2b-draw {
    to { stroke-dashoffset: 0; }
}

.b2b-map-parcel, .b2b-map-ring { opacity: 0; }

/* Matches the 1.7s animateMotion: appears as it leaves Graz, gone as it
   lands so it does not sit on top of the destination dot. */
.b2b-map.is-live .b2b-map-parcel {
    animation: b2b-parcel-life 1.7s linear forwards;
}

@keyframes b2b-parcel-life {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    86%  { opacity: 1; }
    100% { opacity: 0; }
}

.b2b-map.is-live .b2b-map-ring {
    animation: b2b-fade-in .4s ease .2s forwards, b2b-pulse 2.8s ease-out .6s infinite;
}

.b2b-map.is-live .b2b-map-node.is-destination,
.b2b-map.is-live .b2b-map-node-label.is-destination {
    animation: b2b-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.55s backwards;
}

@keyframes b2b-fade-in { to { opacity: 1; } }

@keyframes b2b-pulse {
    0%   { opacity: .55; transform: scale(.5); }
    70%  { opacity: 0;   transform: scale(2.6); }
    100% { opacity: 0;   transform: scale(2.6); }
}

@keyframes b2b-pop {
    from { opacity: 0; transform: scale(.2); }
    to   { opacity: 1; transform: scale(1); }
}

/* Motion is decorative here — the readout carries the same information, so
   reduced-motion users simply get the finished state. */
@media (prefers-reduced-motion: reduce) {
    .b2b-map.is-live .b2b-map-arc,
    .b2b-map.is-live .b2b-map-arc-shadow {
        animation: none;
        stroke-dashoffset: 0;
    }
    .b2b-map.is-live .b2b-map-parcel { animation: none; opacity: 0; }
    .b2b-map.is-live .b2b-map-ring { animation: none; opacity: .45; }
    .b2b-map.is-live .b2b-map-node.is-destination,
    .b2b-map.is-live .b2b-map-node-label.is-destination { animation: none; }
}

@media (max-width: 991px) {
    .b2b-mapband { padding: 40px 26px 44px; }
    .b2b-mapband-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ==========================================================================
   2. The original single-product portal.

   Lifted verbatim out of portal.html so the existing page keeps rendering
   exactly as it did while the catalogue is built alongside it.
   ========================================================================== */

/* --- portal-only ---------------------------------------------------------- */

.b2b-portal-head {
    background: var(--b2b-dark);
    color: #fff;
    padding: 52px 0 56px;
}

.b2b-portal-head h1 {
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.1;
    letter-spacing: -.03em;
    margin: 0 0 12px;
}

.b2b-portal-head p { margin: 0; color: var(--b2b-dim); font-size: 17px; line-height: 1.6; }

.b2b-portal-who {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    margin-top: 22px;
    font-size: 14px;
    color: var(--b2b-dim-2);
}

.b2b-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--b2b-mono);
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
}
.b2b-chip.is-live { background: #1c7c3f; }

/* --- price strip ---------------------------------------------------------- */

.b2b-prices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--b2b-line);
    border: 1px solid var(--b2b-line);
    border-radius: 16px;
    overflow: hidden;
    margin-top: -34px;
    position: relative;
    z-index: 2;
    box-shadow: var(--b2b-shadow);
}

.b2b-price { background: var(--b2b-paper); padding: 26px 24px 28px; }
.b2b-price dt {
    font-family: var(--b2b-mono);
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--b2b-muted);
    margin-bottom: 10px;
}
.b2b-price dd {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.b2b-price dd small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--b2b-muted);
    margin-top: 7px;
    line-height: 1.45;
}
.b2b-price.is-accent dd { color: var(--b2b-red); }

/* --- order sheet ---------------------------------------------------------- */

.b2b-order {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 0;
    border: 1px solid var(--b2b-line);
    border-radius: 20px;
    overflow: hidden;
    background: var(--b2b-paper);
}

.b2b-order__main { padding: 44px 42px 48px; }
.b2b-order__side { padding: 44px 38px 48px; background: var(--b2b-paper-2); border-left: 1px solid var(--b2b-line); }

.b2b-qty-row {
    display: grid;
    grid-template-columns: 68px 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--b2b-line);
}

/* Two steppers per row need saying which is which, once, above them. The
   widths mirror .b2b-qty exactly so the labels sit over their own column. */
.b2b-qty-head {
    display: grid;
    grid-template-columns: 68px 1fr auto auto;
    gap: 16px;
    padding-bottom: 8px;
}
.b2b-qty-head span {
    grid-column: 3;
    width: 134px;
    text-align: center;
    font-family: var(--b2b-mono);
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--b2b-muted);
}
.b2b-qty-head span + span { grid-column: 4; color: var(--b2b-red); }
.b2b-qty-row:first-of-type { border-top: 1px solid var(--b2b-line); }
.b2b-qty-strength { font-family: var(--b2b-mono); font-size: 21px; font-weight: 600; }
.b2b-qty-hint { font-size: 13px; color: var(--b2b-muted); line-height: 1.5; }

.b2b-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--b2b-line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--b2b-paper);
}
.b2b-qty button {
    width: 38px; height: 42px;
    border: 0; background: transparent;
    font-size: 18px; line-height: 1; color: var(--b2b-muted);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.b2b-qty button:hover { background: var(--b2b-paper-3); color: var(--b2b-ink); }
.b2b-qty input {
    width: 56px; height: 42px;
    border: 0;
    border-left: 1px solid var(--b2b-line);
    border-right: 1px solid var(--b2b-line);
    text-align: center;
    font-family: var(--b2b-mono);
    font-size: 16px; font-weight: 600;
    color: var(--b2b-ink);
    -moz-appearance: textfield;
}
.b2b-qty input::-webkit-outer-spin-button,
.b2b-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The free column reads as the promotion, not as a second thing to pay for. */
.b2b-qty.is-free { border-color: rgba(200, 16, 46, .3); background: rgba(200, 16, 46, .04); }
.b2b-qty.is-free input { color: var(--b2b-red); border-color: rgba(200, 16, 46, .22); }
.b2b-qty.is-free button:hover { background: rgba(200, 16, 46, .1); color: var(--b2b-red); }
/* Nothing earned yet, so the column is inert rather than merely unhelpful. */
.b2b-qty.is-free.is-spent button[data-step="1"] { opacity: .3; cursor: default; }
.b2b-qty.is-free.is-spent button[data-step="1"]:hover { background: transparent; }

.b2b-free-note {
    margin: 18px 0 0;
    padding: 14px 18px;
    border-radius: 10px;
    background: rgba(200, 16, 46, .06);
    font-size: 14px;
    line-height: 1.6;
    color: var(--b2b-ink-2);
}
.b2b-free-note b { color: var(--b2b-red); font-family: var(--b2b-mono); }
.b2b-free-note.is-done { background: var(--b2b-paper-2); }

.b2b-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--b2b-line);
}
.b2b-sum-row[hidden] { display: none; }
.b2b-sum-row span:last-child { font-family: var(--b2b-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.b2b-sum-row.is-muted { color: var(--b2b-muted); }
.b2b-sum-row.is-muted span:last-child { font-weight: 500; }
.b2b-sum-row.is-free, .b2b-sum-row.is-free span:last-child { color: var(--b2b-red); }
.b2b-sum-row.is-total {
    border-bottom: 0;
    border-top: 1px solid var(--b2b-ink);
    margin-top: 6px;
    padding-top: 16px;
    font-size: 16px;
    font-weight: 700;
}
.b2b-sum-row.is-total span:last-child { font-size: 23px; }

.b2b-earn {
    margin-top: 22px;
    padding: 18px 20px;
    border-radius: 12px;
    background: rgba(200, 16, 46, .06);
    font-size: 13px;
    line-height: 1.7;
}
.b2b-earn b { font-family: var(--b2b-mono); color: var(--b2b-red); }

.b2b-ship { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--b2b-muted); }
.b2b-ship.is-met { color: #1c7c3f; font-weight: 600; }

/* --- addresses ------------------------------------------------------------- */

.b2b-addr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--b2b-line);
    border-radius: 22px;
    overflow: hidden;
    background: var(--b2b-paper);
    box-shadow: var(--b2b-shadow);
}
.b2b-addr__col { padding: 40px 36px 42px; }
.b2b-addr__col + .b2b-addr__col { border-left: 1px solid var(--b2b-line); }

/* The delivery column dims itself while it is only a copy of the billing one:
   the fields stay in the DOM (so what was typed survives ticking the box twice)
   but they must not look like something waiting to be filled in. */
.b2b-addr__mirror {
    display: none;
    font-size: 14px;
    line-height: 1.75;
    color: var(--b2b-muted);
    padding: 20px 22px;
    border-radius: 12px;
    background: var(--b2b-paper-2);
    border-left: 2px solid var(--b2b-line);
    margin-top: 20px;
}
.b2b-addr.is-mirrored .b2b-addr__mirror { display: block; }
.b2b-addr.is-mirrored .b2b-addr__fields { display: none; }

.b2b-addr__foot {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 26px;
}

/* The read-back next to the order form. */
.b2b-addr-summary { font-size: 13px; line-height: 1.7; color: var(--b2b-muted); margin-top: 26px; }
.b2b-addr-summary p { margin: 0 0 14px; }
.b2b-addr-summary strong { display: block; color: var(--b2b-ink); }
.b2b-addr-summary a { color: var(--b2b-red); text-decoration: underline; text-underline-offset: 3px; }

/* --- history --------------------------------------------------------------- */

.b2b-history { width: 100%; border-collapse: collapse; font-size: 14px; }
.b2b-history th {
    text-align: left;
    font-family: var(--b2b-mono);
    font-size: 10px; font-weight: 400;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--b2b-muted);
    padding: 12px 14px;
    border-bottom: 1px solid var(--b2b-ink);
    white-space: nowrap;
}
.b2b-history td { padding: 14px; border-bottom: 1px solid var(--b2b-line); }
.b2b-history td.num { text-align: right; font-family: var(--b2b-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

.b2b-state {
    display: inline-block;
    font-family: var(--b2b-mono);
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 4px;
    background: var(--b2b-paper-3); color: var(--b2b-ink-2);
}
.b2b-state.is-new { background: rgba(200, 16, 46, .1); color: var(--b2b-red); }

.b2b-tablewrap { overflow-x: auto; border: 1px solid var(--b2b-line); border-radius: 14px; padding: 0 4px; background: var(--b2b-paper); }

@media (max-width: 991px) {
    .b2b-prices { grid-template-columns: 1fr 1fr; margin-top: 24px; }
    .b2b-order { grid-template-columns: 1fr; }
    .b2b-order__side { border-left: 0; border-top: 1px solid var(--b2b-line); }
    .b2b-order__main, .b2b-order__side { padding: 36px 24px 40px; }

    .b2b-addr { grid-template-columns: 1fr; }
    .b2b-addr__col + .b2b-addr__col { border-left: 0; border-top: 1px solid var(--b2b-line); }
    .b2b-addr__col { padding: 34px 24px 38px; }
}

@media (max-width: 575px) {
    .b2b-prices { grid-template-columns: 1fr; }
    .b2b-qty-row { grid-template-columns: 52px 1fr; row-gap: 10px; }
    .b2b-qty-row .b2b-qty { grid-column: 2; justify-self: start; }
    /* The column headings cannot follow two steppers that have stopped being
       columns, so the steppers label themselves instead. */
    .b2b-qty-head { display: none; }
    .b2b-qty.is-free::before {
        content: attr(data-label);
        align-self: center;
        padding: 0 4px 0 12px;
        font-family: var(--b2b-mono);
        font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
        color: var(--b2b-red);
    }
}


/* ==========================================================================
   3. The trade portal (phases 3-5)

   Built on the consumer shop's design system, not beside it. templates/b2b/
   base.html loads bootstrap.min.css + styles.css + custom.css first and this
   file last, so everything below is an override of a system that is already
   doing most of the work.

   THE ONE COLOUR CHANGE is the first rule: styles.css defines --primary as the
   shop's orange (#FF893A) and the trade side rebinds it to #c8102e -- the red
   the consumer header already uses for its B2B link. Every shop component then
   comes out in trade red without any component being restyled.
   ========================================================================== */

.b2b-trade {
    --primary: #c8102e;
    --b2b-red: #c8102e;
    background: var(--white);
    color: var(--main);
    font-family: "Albert Sans", sans-serif;

    /* Sticky footer. Without this the footer follows the content, so a short
       page (Downloads with nothing in it, an empty basket) ends with the
       copyright line halfway up the screen. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.b2b-trade > header,
.b2b-trade > .b2b-foot,
.b2b-trade > .tf-page-title,
.b2b-trade > .b2b-adminbar { flex: 0 0 auto; }

/* The gap under the page-title band lives HERE, once, rather than being each
   page's own problem. It used to come from .b2b-cat-head's padding, which only
   the catalogue had -- so Downloads, Marken, Bestellungen and Warenkorb all
   started hard against the hero. */
.b2b-main { display: block; flex: 1 0 auto; padding: 48px 0 80px; }

/* --- header -------------------------------------------------------------
   `header.header-default` brings the shop's sticky bar, height and shadow.
   Only the trade-specific pieces are added here. */

/* Painted explicitly rather than inherited. The first version of this bar
   relied on inheritance for its background and got silently blanked by a
   broader rule -- pale text on a pale page, which is exactly what a nav bar
   must never be. It is one declaration; it should not be left to chance. */
/* The trade chrome also renders inside the CONSUMER shell: on
   b2b.reedfinder.com the registration page and the login come from
   webshop/base.html, which includes b2b/_header.html and b2b/_footer.html
   instead of the shop's own. There is no `.b2b-trade` on that <body>, and there
   must not be -- it turns the body into a flex column, which is right for the
   portal's sticky footer and wrong for a page built for the shop's shell. So
   the ONE COLOUR CHANGE is rebound on the chrome itself; custom properties
   inherit, so the header and footer come out in trade red either way. */
.b2b-header,
.b2b-foot { --primary: #c8102e; --b2b-red: #c8102e; }

.b2b-header {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 888;
}
.b2b-header .item-link { color: var(--main); }

.b2b-header .logo { display: inline-flex; align-items: baseline; gap: 9px; }
.b2b-header .logo img { max-height: 34px; width: auto; }
.b2b-logo-tag {
    font-size: 10px; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--primary); white-space: nowrap;
}

/* The shop marks the current page with .activeMenu; the trade nav reuses it. */
.b2b-header .item-link.activeMenu { color: var(--primary); }
.b2b-header .box-nav-ul .item-link:hover { color: var(--primary); }

/* --- the account menu ---------------------------------------------------
   The consumer shop's own account control, carrying the SHOP NAME: on a site
   where the account decides every price, an anonymous icon leaves a partner
   guessing which one they are signed in as. It is also the only logout in the
   bar -- there was none at all above 1150px, where the burger disappears. */
.b2b-account__btn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.b2b-account__btn .icon { font-size: 18px; }
.b2b-account__name {
    font-size: 13px; color: var(--text-2); max-width: 170px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.b2b-account__btn:hover .b2b-account__name { color: var(--primary); }
/* Bootstrap draws the caret on .dropdown-toggle; at this size it crowds the
   name, and the icon plus the menu itself already say it opens. */
.b2b-account__btn.dropdown-toggle::after { display: none; }
.b2b-account__menu { min-width: 232px; padding: 0; }
.b2b-account__head {
    display: flex; flex-direction: column; gap: 3px;
    padding: 12px 16px 10px;
}
.b2b-account__co {
    font-size: 14px; font-weight: 600; color: var(--main); line-height: 1.35;
}
.b2b-account__group {
    font-size: 11px; font-weight: 700; color: var(--primary); white-space: nowrap;
}
.b2b-account__menu .dropdown-divider { margin: 0; }
.b2b-account__menu .dropdown-item { padding: 9px 16px; font-size: 14px; }

.b2b-whoami { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.b2b-whoami__co {
    font-size: 13px; color: var(--text-2); max-width: 190px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.b2b-whoami__group {
    font-size: 11px; font-weight: 700; color: var(--primary);
    background: #fbe7ea; padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
/* The link out to the consumer shop. Deliberately NOT a filled button: the
   filled one in this bar is the basket (or, signed out, the application), and
   the way off this site must not compete with the thing the page is for. */
.b2b-shoplink {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; color: var(--text-2); white-space: nowrap;
}
.b2b-shoplink:hover { color: var(--primary); }
/* Small enough to read as a mark on the label rather than a second glyph
   competing with it -- it says "this leaves the trade side", nothing more. */
.b2b-shoplink { gap: 5px; }
.b2b-shoplink .icon { font-size: 7px; }

.b2b-cartbtn { padding: 9px 18px; font-size: 14px; white-space: nowrap; }
.b2b-cartbtn__n { opacity: .8; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* --- the mobile menu ---------------------------------------------------- */

.b2b-brandcol { display: flex; align-items: center; gap: 12px; min-width: 0; }
.b2b-brandcol .logo { min-width: 0; }

.b2b-burger {
    display: none;                      /* shown below 1150px, see the query */
    flex-direction: column; justify-content: center; gap: 5px;
    width: 34px; height: 34px; padding: 0 4px; flex: none;
    background: none; border: 0; cursor: pointer;
}
.b2b-burger span {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--main);
}
.b2b-burger:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Exactly where styles.css reveals `.tf-md-hidden` on the real nav, so the
   header never shows both and never shows neither. */
@media (max-width: 1149.98px) {
    .b2b-burger { display: flex; }
}

.b2b-menu { width: min(86vw, 340px); background: var(--white); }
.b2b-menu__head {
    border-bottom: 1px solid var(--line);
    padding: 18px 22px;
}
.b2b-menu__title {
    font-size: 13px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.b2b-menu__body { padding: 0; display: flex; flex-direction: column; }
.b2b-menu__group {
    margin: 0; padding: 12px 22px; font-size: 13px; font-weight: 600;
    color: var(--primary); background: #fbe7ea;
}
.b2b-menu__nav { list-style: none; margin: 0; padding: 8px 0; }
.b2b-menu__nav a {
    display: block; padding: 13px 22px; font-size: 16px; color: var(--main);
    border-left: 3px solid transparent;
}
.b2b-menu__nav a:hover { color: var(--primary); background: var(--bg-1); }
.b2b-menu__nav a.is-here { color: var(--primary); border-left-color: var(--primary); font-weight: 600; }
.b2b-menu__foot {
    margin-top: auto; padding: 20px 22px 26px;
    border-top: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.b2b-menu__cta { width: 100%; justify-content: center; }
.b2b-menu__quiet { font-size: 15px; color: var(--text-2); }
.b2b-menu__quiet:hover { color: var(--primary); }
.b2b-menu__out { font-size: 14px; }
.b2b-menu__label {
    margin: 22px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-2);
}
.b2b-menu__arrow { font-size: 10px; vertical-align: 1px; opacity: .75; }

/* --- the opening promotion ---------------------------------------------- */

/* A panel rather than a card: it is a note attached to the basket above it,
   not a separate object sitting beside it. */
.b2b-promo {
    border: 1px solid var(--line); border-left: 3px solid var(--primary);
    border-radius: 0 4px 4px 0; background: var(--white);
    padding: 18px 20px; margin: 22px 0 0;
}
.b2b-promo__h {
    margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--primary);
}
.b2b-promo__lead { margin: 0; font-size: 15px; color: var(--main); max-width: 68ch; }
.b2b-promo__lines { list-style: none; margin: 14px 0 0; padding: 0; }
.b2b-promo__lines li {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px;
}
.b2b-promo__n { font-weight: 700; color: var(--primary); white-space: nowrap; }
.b2b-promo__note {
    margin: 14px 0 0; font-size: 13px; color: var(--text-2); max-width: 70ch;
}
/* The rest of the offer -- free delivery, and how far off the next free box
   is -- closing the panel that announces it. Ruled off rather than spaced
   off: it is a second fact about the same promotion, not a second promotion. */
.b2b-promo__foot {
    margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
    font-size: 14px; line-height: 1.6; color: var(--main); max-width: 70ch;
}

/* A promotional line in the checkout table. Tinted rather than badged all over:
   the row already says "free" in its own price column. */
.b2b-table__free td { background: #fdf6f7; }
.b2b-freetag {
    display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 3px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    background: #fbe7ea; color: var(--primary); white-space: nowrap;
}
.b2b-sum-free { font-weight: 700; color: var(--primary); }

/* The strip that tells a partner the promotion exists, on the catalogue and the
   product page. A rule and a tag rather than a filled box: it sits above the
   thing the page is actually for, and must not compete with it. */
.b2b-strip {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding: 12px 0 14px; margin: 0 0 18px;
    border-top: 2px solid var(--primary); border-bottom: 1px solid var(--line);
}
.b2b-strip__tag {
    font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--primary); white-space: nowrap;
}
.b2b-strip__text {
    margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--main);
    flex: 1 1 340px; max-width: 78ch;
}

/* --- choosing the free strengths ---------------------------------------- */

.b2b-freepick {
    border: 1px solid var(--line); border-left: 3px solid var(--primary);
    border-radius: 0 4px 4px 0; background: var(--white);
    padding: 20px 22px; margin: 24px 0 0;
}
.b2b-freepick__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; flex-wrap: wrap; margin-bottom: 16px;
}
.b2b-freepick__lead {
    margin: 6px 0 0; font-size: 14.5px; color: var(--main); max-width: 62ch;
}
.b2b-freepick__count {
    margin: 0; font-size: 20px; font-weight: 700; white-space: nowrap;
    color: var(--primary); font-variant-numeric: tabular-nums;
}
.b2b-freepick__unit {
    display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-2); text-align: right;
}
.is-over .b2b-freepick__count { color: #b3261e; }

/* Two columns on a desktop, one on a phone. The rows are label + number box,
   so they keep their own alignment whichever it is. */
.b2b-freepick__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px; background: var(--line);
    border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
@media (max-width: 700px) {
    .b2b-freepick__grid { grid-template-columns: 1fr; }
    .b2b-freepick { padding: 16px; }
}
.b2b-freepick__row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 14px; background: var(--white); margin: 0; cursor: pointer;
}
/* A strength the shop actually ordered is the likely answer, so it reads first. */
.b2b-freepick__row.is-ordered { background: #fdf9f9; }
.b2b-freepick__name { font-size: 14px; color: var(--main); min-width: 0; }
.b2b-freepick__hint {
    display: block; font-size: 12px; color: var(--text-2); margin-top: 2px;
}
.b2b-freepick__row .b2b-qtybox { width: 72px; flex: none; }
.b2b-freepick__warn {
    margin: 14px 0 0; font-size: 13.5px; font-weight: 600; color: var(--primary);
}
.is-over .b2b-freepick__warn { color: #b3261e; }

/* --- the parcel --------------------------------------------------------- */

/* Deliberately not inside the collapsed "Lieferdetails" summary: a partner who
   opens this page while waiting on stock is looking for exactly this line, and
   it should not cost them a click to find it. */
.b2b-track {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin: 10px 0 0; padding: 9px 12px;
    background: var(--bg-1); border-radius: 4px;
    font-size: 13.5px; color: var(--main);
}
.b2b-track__label {
    font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--primary); white-space: nowrap;
}
.b2b-track a { color: var(--primary); text-decoration: underline; word-break: break-all; }
.b2b-track__no { font-variant-numeric: tabular-nums; word-break: break-all; }
.b2b-track__when { color: var(--text-2); font-size: 12.5px; }

/* The per-order "Lieferdetails" fold. A <details> so it collapses with no JS;
   these two rules only stop it inheriting the row's own type scale. */
.b2b-orderrow__more { margin: 8px 0 0; font-size: 13.5px; }
.b2b-orderrow__more summary {
    cursor: pointer; color: var(--text-2); list-style-position: outside;
}
.b2b-orderrow__more summary:hover { color: var(--primary); }
.b2b-orderrow__addr { margin: 8px 0 0; color: var(--text-2); line-height: 1.55; }

/* --- what "net" means --------------------------------------------------- */

/* Said wherever a figure is quoted, because a partner reading "Nettopreis"
   reasonably expects VAT on top and under the exemption there is none. */
.b2b-vatnote {
    margin: 14px 0 0; font-size: 13px; line-height: 1.55;
    color: var(--text-2); max-width: 70ch;
}
.b2b-sum .b2b-vatnote { margin-top: 10px; }

/* --- page furniture ----------------------------------------------------- */

.b2b-trade .b2b-kicker {
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--primary); font-weight: 600; margin: 0 0 12px;
}
.b2b-h1 {
    font-size: clamp(28px, 4vw, 42px); line-height: 1.08; letter-spacing: -.02em;
    font-weight: 700; color: var(--main); margin: 0 0 14px;
}
.b2b-trade .b2b-lede { font-size: 16px; line-height: 1.6; color: var(--text); margin: 0 0 6px; }
.b2b-trade .b2b-hint { font-size: 13px; color: var(--text-2); }
.b2b-cat-head { padding: 0 0 6px; }
.b2b-crumb { font-size: 13px; color: var(--text-2); margin: 0 0 6px; }
.b2b-crumb a { color: var(--text-2); }
.b2b-crumb span { margin: 0 7px; }
.b2b-trade .b2b-section { padding: 40px 0 0; }
.b2b-trade .b2b-main > .b2b-page > .b2b-section:first-of-type { padding-top: 0; }
.b2b-trade .b2b-section.is-tight { padding: 30px 0 0; }
.b2b-trade .b2b-h2 {
    font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.015em;
    color: var(--main); margin: 0 0 10px;
}

/* --- filters ------------------------------------------------------------ */

/* A plain row of controls: the downloads centre's kinds as buttons, the
   strength chart's instrument/tuning/cut as selects. The CATALOGUE's filtering
   is not here -- that is the shop's offcanvas panel (.canvas-filter, styled in
   styles.css), which needs nothing from this file. */
.b2b-filters {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
    padding: 20px 0; border-bottom: 1px solid var(--line); margin-bottom: 24px;
}
.b2b-filters__search { flex: 1 1 260px; }
.b2b-filters input[type="search"], .b2b-filters select {
    font: inherit; font-size: 14px; padding: 11px 14px;
    border: 1px solid var(--line); border-radius: 4px;
    background: var(--white); color: var(--main);
}
.b2b-filters input[type="search"] { width: 100%; }
.b2b-filters select { min-width: 150px; }
.b2b-filters__clear { font-size: 13px; color: var(--text-2); }

/* How many filters are on. The panel is shut most of the time, and a short
   list of results with no visible cause is the thing to avoid. */
.b2b-filtercount {
    font-size: 13px; font-weight: 600; color: var(--primary); white-space: nowrap;
}
.b2b-cat-count { font-size: 13px; color: var(--text-2); margin: 0 0 18px; }

/* --- the maker's strength chart ----------------------------------------- */

/* Was a framed page of its own (.b2b-chartframe) reached from the nav. It is
   now a link on the product the chart is about, so what this styles is the
   link, not a hole for an iframe. Built as a row rather than a plain anchor
   because it is a destination, not a footnote: a dealer answering "is their 3
   our 3?" should be able to find it without reading the spec table. */
.b2b-chartlink {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 16px 18px; border: 1px solid var(--line); border-radius: 6px;
    background: var(--white); color: var(--main); text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.b2b-chartlink:hover {
    border-color: var(--primary); color: var(--main);
    box-shadow: 0 10px 24px -18px rgba(0,0,0,.5);
}
.b2b-chartlink__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.b2b-chartlink__h { font-size: 16px; font-weight: 600; color: var(--main); }
.b2b-chartlink__sub { font-size: 13.5px; color: var(--text-2); max-width: 72ch; }
.b2b-chartlink__go { font-size: 20px; color: var(--primary); flex: none; }
/* The spec table's own trailing link is gone with the chart page. */
.b2b-specs__after { font-size: 14px; margin: 16px 0 0; }

/* --- product cards ------------------------------------------------------ */

.b2b-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.b2b-card {
    background: var(--white); border: 1px solid var(--line); border-radius: 8px;
    overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.b2b-card:hover { border-color: var(--text-2); box-shadow: 0 8px 26px -18px rgba(0,0,0,.35); }
.b2b-card__shot { display: block; aspect-ratio: 4 / 3; background: var(--bg-1); overflow: hidden; }
.b2b-card__shot img { width: 100%; height: 100%; object-fit: cover; }
.b2b-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.b2b-card__brand {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-2); margin: 0; font-weight: 600;
}
.b2b-card__name { font-size: 16px; font-weight: 600; margin: 0; line-height: 1.3; }
.b2b-card__name a { color: var(--main); text-decoration: none; }
.b2b-card__name a:hover { color: var(--primary); }
.b2b-card__line { font-size: 13px; color: var(--text-2); margin: 0; }
.b2b-card__prices { display: flex; gap: 20px; margin: 6px 0 0; flex-wrap: wrap; }
.b2b-card__prices dt {
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-2); margin: 0 0 3px; font-weight: 600;
}
.b2b-card__prices dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--main); }
.b2b-card__prices dd.is-net { color: var(--primary); font-size: 19px; }
.b2b-card__prices dd.is-margin { color: #2e7d4f; }
.b2b-card__prices dd.is-margin.is-thin { color: #b8860b; }
.b2b-card__meta { font-size: 12px; color: var(--text-2); margin: 0; }
.b2b-card__cta { margin-top: auto; text-align: center; }
.b2b-empty {
    text-align: center; padding: 70px 20px; color: var(--text-2);
    display: flex; flex-direction: column; align-items: center; gap: 18px;
}

/* --- catalogue pager ------------------------------------------------------
   Sits under the grid, inside #b2b-results, so the filter panel re-renders it
   along with the cards. Steps at the ends, numbers in the middle; the current
   page is a flat block rather than another bordered box, so the row does not
   read as a strip of identical buttons. */
.b2b-pager {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 8px;
    margin: 40px 0 8px; padding-top: 28px;
    border-top: 1px solid var(--line);
}
.b2b-pager__pages {
    display: flex; align-items: center; gap: 4px;
    list-style: none; margin: 0; padding: 0;
}
.b2b-pager__page,
.b2b-pager__step {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 6px;
    font-size: 14px; line-height: 1; color: var(--main);
    text-decoration: none; background: var(--white);
    font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.b2b-pager__page:hover,
.b2b-pager__step:hover { border-color: var(--main); color: var(--main); }
.b2b-pager__page.is-current {
    background: var(--main); border-color: var(--main); color: var(--white);
    font-weight: 600; cursor: default;
}
/* Not a link at the ends of the range, so it must not invite a click. */
.b2b-pager__step.is-off { opacity: .38; cursor: default; }
.b2b-pager__step.is-off:hover { border-color: var(--line); color: var(--main); }
.b2b-pager__gap {
    min-width: 20px; text-align: center;
    color: var(--text-2); font-size: 14px; user-select: none;
}
.b2b-pager a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 575px) {
    /* Prev/Next carry the load on a phone; the numbers wrap under them. */
    .b2b-pager { gap: 6px; }
    .b2b-pager__page, .b2b-pager__step { min-width: 34px; height: 34px; padding: 0 9px; font-size: 13px; }
}

/* --- product page ------------------------------------------------------- */

.b2b-pdp { display: grid; gap: 44px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 6px 0 0; }
.b2b-pdp__shot {
    width: 100%; background: var(--bg-1); border: 1px solid var(--line);
    border-radius: 8px; aspect-ratio: 1; object-fit: contain;
}
.b2b-pdp__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
/* The thumb is a button, not a bare img: swapping the main shot is an action,
   so it has to be reachable by keyboard and announce itself as one. */
.b2b-pdp__thumb {
    padding: 0; background: none; border: 0; cursor: pointer; line-height: 0;
    border-radius: 5px;
}
.b2b-pdp__thumb img {
    width: 74px; height: 74px; object-fit: contain; background: var(--bg-1);
    border: 1px solid var(--line); border-radius: 5px;
    transition: border-color .15s ease;
}
.b2b-pdp__thumb:hover img { border-color: var(--text-2); }
.b2b-pdp__thumb.is-active img { border-color: var(--primary); }
.b2b-pdp__thumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- featured product ----------------------------------------------------
   The catalogue's hero: one reed, its own copy, and the same price figures
   every card below it shows. A band rather than a card, so it reads as part
   of the page's head and not as the first (oddly large) grid item. */
.b2b-feature { background: var(--bg-1); border-bottom: 1px solid var(--line); padding: 34px 0 38px; }
.b2b-feature__inner {
    display: grid; gap: 36px; align-items: center;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
}
.b2b-feature__shot {
    display: flex; align-items: center; justify-content: center;
    background: var(--white); border: 1px solid var(--line); border-radius: 10px;
    aspect-ratio: 4 / 3; padding: 18px; overflow: hidden;
}
.b2b-feature__shot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.b2b-feature__body { min-width: 0; }
.b2b-feature__label {
    display: inline-block; margin: 0 0 12px; padding: 5px 11px;
    background: var(--primary); color: #fff; border-radius: 3px;
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.b2b-feature__name { font-size: clamp(24px, 3vw, 34px); line-height: 1.2; margin: 0 0 6px; }
.b2b-feature__name a { color: var(--main); }
.b2b-feature__name a:hover { color: var(--primary); }
.b2b-feature__product { font-size: 14px; color: var(--text-2); margin: 0 0 12px; font-weight: 600; }
.b2b-feature__text { font-size: 15px; line-height: 1.65; color: var(--text); max-width: 62ch; }
.b2b-feature__text p { margin: 0 0 10px; }
.b2b-feature__prices { display: flex; gap: 30px; margin: 18px 0 20px; }
.b2b-feature__prices div { display: flex; flex-direction: column; gap: 2px; }
.b2b-feature__prices dt {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-2); font-weight: 600;
}
.b2b-feature__prices dd { margin: 0; font-size: 20px; font-weight: 700; color: var(--main); }
.b2b-feature__prices dd.is-net { color: var(--primary); }
@media (max-width: 820px) {
    .b2b-feature__inner { grid-template-columns: 1fr; gap: 22px; }
    .b2b-feature__prices { gap: 22px; }
}

/* --- language switcher ---------------------------------------------------
   The shop's .nav-language dropdown, sized for the trade bar. */
.b2b-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.b2b-lang__code { font-weight: 600; letter-spacing: .04em; }
.nav-language .dropdown-item.active { color: var(--primary); font-weight: 600; background: none; }

/* --- brand page header ---------------------------------------------------
   Logo and story side by side; the logo drops above the text on narrow
   screens rather than squeezing both into unreadable columns. */
.b2b-brandhead { display: flex; align-items: flex-start; gap: 28px; margin-bottom: 6px; }
.b2b-brandhead__logo {
    flex: 0 0 190px; display: flex; align-items: center; justify-content: center;
    height: 120px; padding: 16px 20px; background: var(--bg-1);
    border: 1px solid var(--line); border-radius: 8px;
}
.b2b-brandhead__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.b2b-brandhead__text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 780px) {
    .b2b-brandhead { flex-direction: column; gap: 18px; }
    .b2b-brandhead__logo { flex: 0 0 auto; width: 100%; max-width: 260px; }
}

/* --- downloads -----------------------------------------------------------
   A grid of previews rather than a list of links: a partner picking a product
   shot for their own shop is choosing by eye, and a filename does not tell
   them which photo it is. */
.b2b-assetgrid {
    display: grid; gap: 16px; margin-top: 18px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.b2b-asset {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--white); border: 1px solid var(--line); border-radius: 8px;
    color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.b2b-asset:hover { border-color: var(--primary); box-shadow: 0 8px 26px -18px rgba(0,0,0,.35); }
.b2b-asset__preview {
    display: flex; align-items: center; justify-content: center;
    height: 140px; background: var(--bg-1); border-bottom: 1px solid var(--line);
}
.b2b-asset__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.b2b-asset__ext {
    font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--text-2);
    padding: 8px 14px; border: 1px dashed var(--line); border-radius: 5px; background: var(--white);
}
.b2b-asset__body { display: block; padding: 12px 14px 14px; }
.b2b-asset__title {
    display: block; font-size: 14px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.b2b-asset__meta { display: block; margin-top: 4px; font-size: 12px; color: var(--text-2); }
.b2b-asset__kind { text-transform: uppercase; letter-spacing: .06em; }

/* Availability. Colour carries the same meaning as the words, never instead of
   them -- the label is readable with the colour ignored. */
/* Bands, never counts -- see the note above STOCK_BAND_GOOD in b2b_pricing.
   Colour AND a word: a dot on its own says nothing to a colour-blind reader
   and nothing at all on a printed picking list. */
.b2b-stock { font-weight: 600; font-size: 13px; white-space: nowrap; }
.b2b-stock.is-in { color: #1d7a3d; }
.b2b-stock.is-low { color: #b8860b; }
.b2b-stock.is-short { color: #b8860b; }
.b2b-stock.is-back { color: var(--text-2); }
.b2b-stock__eta {
    display: block; font-size: 12px; font-weight: 400; color: var(--text-2);
    white-space: nowrap;
}

/* --- what will not go out with the rest ---------------------------------- */

.b2b-backorder {
    margin: 22px 0 0; padding: 16px 18px; background: var(--bg-1);
    border-left: 3px solid #b8860b;
}
.b2b-backorder__h { margin: 0 0 10px; font-weight: 700; font-size: 15px; color: var(--main); }
.b2b-backorder__lines { list-style: none; margin: 0; padding: 0; }
.b2b-backorder__lines li {
    display: flex; gap: 14px; justify-content: space-between; align-items: baseline;
    padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.b2b-backorder__lines li:last-child { border-bottom: 0; }
.b2b-backorder__what { color: #8a6508; font-weight: 600; white-space: nowrap; }
.b2b-backorder__note {
    margin: 11px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-2);
    max-width: 70ch;
}
.b2b-card__stock { margin: 6px 0 0; }

/* --- collapsible section -------------------------------------------------
   A <details> that does not look like one: the browser's default triangle is
   replaced with a chevron on the right, so the heading still reads as a
   heading. `list-style: none` plus the -webkit- pseudo-element covers both
   engines; without the second, Safari keeps drawing its own marker. */
.b2b-collapse { border-top: 1px solid var(--line); }
.b2b-collapse__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 0; cursor: pointer; list-style: none;
}
.b2b-collapse__head::-webkit-details-marker { display: none; }
.b2b-collapse__head:hover .b2b-h2 { color: var(--primary); }
.b2b-collapse__head:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.b2b-collapse__head .b2b-h2 { margin: 0; transition: color .15s ease; }
.b2b-collapse__chev {
    flex: 0 0 auto; width: 10px; height: 10px; margin-right: 4px;
    border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}
.b2b-collapse[open] .b2b-collapse__chev { transform: rotate(-135deg) translate(-2px, -2px); }
.b2b-collapse__body { padding-bottom: 8px; }

/* Technical data. Label column fixed so the values line up down the page the
   way they do on the shop's attribute table. */
.b2b-specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.b2b-specs th, .b2b-specs td {
    text-align: left; vertical-align: top; padding: 11px 14px 11px 0;
    border-bottom: 1px solid var(--line);
}
.b2b-specs th { width: 34%; font-weight: 600; color: var(--text-2); }
.b2b-specs td { color: var(--text); }
.b2b-specs tr:last-child th, .b2b-specs tr:last-child td { border-bottom: 0; }
.b2b-specs__sub { display: block; margin-top: 3px; font-size: 13px; color: var(--text-2); }
@media (max-width: 640px) {
    .b2b-specs th, .b2b-specs td { display: block; width: auto; border-bottom: 0; padding: 0; }
    .b2b-specs th { padding-top: 12px; }
    .b2b-specs td { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
}
.b2b-prose { font-size: 15px; color: var(--text); line-height: 1.65; }
.b2b-brandnote {
    margin-top: 22px; padding: 18px 20px; background: var(--bg-1);
    border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
}
.b2b-brandnote__h {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--primary); margin: 0 0 8px; font-weight: 600;
}
.b2b-brandnote p { margin: 0; color: var(--text); }
.b2b-brandnote__link { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--primary); }

/* --- tables ------------------------------------------------------------- */

.b2b-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.b2b-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.b2b-table thead th {
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-2); font-weight: 700; text-align: left;
    padding: 12px 16px; border-bottom: 1px solid var(--line);
    background: var(--bg-1); white-space: nowrap;
}
.b2b-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text); }
.b2b-table tbody tr:last-child td { border-bottom: 0; }
.b2b-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.b2b-table .is-act { text-align: right; }
.b2b-table__name { color: var(--main); }
.b2b-table__name a { color: var(--main); text-decoration: none; font-weight: 600; }
.b2b-table__name a:hover { color: var(--primary); }
.b2b-strength { display: inline-block; font-weight: 700; color: var(--main); margin-right: 8px; }
.b2b-sku, .b2b-moq { font-size: 11px; color: var(--text-2); margin-right: 8px; }
.b2b-net { font-weight: 700; color: var(--primary); }
.b2b-was { display: block; font-size: 11px; color: var(--text-2); text-decoration: line-through; font-weight: 400; }
.b2b-margin { font-weight: 600; color: #2e7d4f; }
.b2b-margin.is-thin { color: #b8860b; }
.b2b-line { font-weight: 700; color: var(--main); }
.b2b-addline { display: inline-flex; gap: 8px; align-items: center; justify-content: flex-end; }
.b2b-table input[type="number"] {
    width: 82px; font: inherit; font-size: 14px; text-align: right;
    padding: 9px 11px; border: 1px solid var(--line); border-radius: 4px; background: var(--white);
}

/* --- basket / checkout -------------------------------------------------- */

.b2b-cartfoot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 0 0; }
.b2b-cartfoot__sum { display: flex; align-items: baseline; gap: 14px; font-size: 15px; color: var(--text); }
.b2b-cartfoot__sum strong { font-size: 25px; color: var(--main); font-variant-numeric: tabular-nums; }
.b2b-cartacts { display: flex; gap: 12px; justify-content: flex-end; padding: 24px 0 0; flex-wrap: wrap; }
.b2b-checkout { display: grid; gap: 34px; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); padding: 26px 0 0; }
.b2b-checkout__fields { margin-top: 26px; }
.b2b-checkout__side { display: flex; flex-direction: column; gap: 18px; }
.b2b-sum { background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px; }
.b2b-trade .b2b-sum-row { display: flex; justify-content: space-between; gap: 16px; }
.b2b-trade .b2b-sum-row.is-total { font-size: 16px; color: var(--main); }
.b2b-trade .b2b-sum-row.is-total strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.b2b-trade .b2b-ship { font-size: 13px; color: var(--text-2); margin: 10px 0 0; }
.b2b-addr-summary { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; font-size: 14px; color: var(--text); }
.b2b-addr-summary__h { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin: 0 0 6px; font-weight: 700; }
.b2b-addr-summary__note { margin-top: 10px; padding: 9px 12px; background: var(--bg-1); border-radius: 4px; font-size: 13px; }
.b2b-addr-summary__edit { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--primary); }
.b2b-trade .b2b-submit {
    width: 100%; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    padding: 15px 20px; border: 0; border-radius: 999px;
    background: var(--primary); color: var(--white);
}
.b2b-trade .b2b-submit:hover { filter: brightness(1.08); }
.b2b-trade .b2b-form-foot { font-size: 12px; color: var(--text-2); text-align: center; margin: 10px 0 0; }
.b2b-trade .b2b-fields { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.b2b-trade .b2b-field { display: flex; flex-direction: column; gap: 6px; }
.b2b-trade .b2b-field label { font-size: 13px; font-weight: 600; color: var(--main); }
.b2b-trade .b2b-field input {
    font: inherit; font-size: 14px; padding: 11px 14px;
    border: 1px solid var(--line); border-radius: 4px; background: var(--white);
}

/* --- orders ------------------------------------------------------------- */

.b2b-orders { display: flex; flex-direction: column; gap: 16px; padding: 10px 0 0; }
.b2b-orderrow { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px; }
.b2b-orderrow__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.b2b-orderrow__no { font-weight: 700; font-size: 15px; color: var(--main); }
.b2b-orderrow__date { color: var(--text-2); font-size: 13px; }
.b2b-orderrow__net { margin-left: auto; font-weight: 700; font-size: 18px; color: var(--main); font-variant-numeric: tabular-nums; }
.b2b-orderrow__lines { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.b2b-orderrow__line { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; color: var(--text); padding: 3px 0; }
.b2b-orderrow__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.b2b-orderrow__ref { font-size: 12px; color: var(--text-2); }
.b2b-trade .b2b-chip {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
    background: var(--bg-2); color: var(--text);
}
.b2b-trade .b2b-chip.is-new       { background: #fff3d6; color: #8a6212; }
.b2b-trade .b2b-chip.is-confirmed,
.b2b-trade .b2b-chip.is-packed,
.b2b-trade .b2b-chip.is-shipped   { background: #e6f0f6; color: #2f5568; }
.b2b-trade .b2b-chip.is-invoiced  { background: #ede4f6; color: #55317a; }
.b2b-trade .b2b-chip.is-paid      { background: #e2f2e8; color: #2e7d4f; }
.b2b-trade .b2b-chip.is-cancelled { background: #fbe7ea; color: var(--primary); }

/* --- manufacturer material ---------------------------------------------- */

.b2b-assets { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.b2b-asset__link {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    background: var(--white); border: 1px solid var(--line); border-radius: 6px;
    padding: 14px 18px; text-decoration: none; color: var(--main);
}
.b2b-asset__link:hover { border-color: var(--primary); }
.b2b-asset__kind {
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
    color: var(--primary); background: #fbe7ea; padding: 3px 9px; border-radius: 3px; flex: none;
}
.b2b-asset__title { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.b2b-asset__meta { font-size: 11px; color: var(--text-2); }
.b2b-brandcard .b2b-card__body { padding-top: 18px; }

/* Logo plate. A fixed height with `contain` so a wide wordmark and a square
   roundel sit on the same baseline and neither is cropped or stretched --
   manufacturers send whatever aspect ratio they have. */
.b2b-brandcard__logo {
    display: flex; align-items: center; justify-content: center;
    height: 110px; padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}
.b2b-brandcard__logo img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain;
}
.b2b-brandcard__wordmark {
    font-size: 17px; font-weight: 600; letter-spacing: .01em;
    color: var(--text-2); text-align: center;
}

/* --- footer ------------------------------------------------------------- */

.b2b-foot { border-top: 1px solid var(--line); background: var(--bg-1); }
.b2b-foot__inner {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    padding-top: 24px; padding-bottom: 24px; font-size: 13px; color: var(--text-2);
}
.b2b-foot__sep { opacity: .5; }
.b2b-foot__link { margin-left: auto; color: var(--primary); }
.b2b-orderrow__meta { font-size: 12.5px; color: var(--text-2); margin: 2px 0 0; }
.b2b-orderrow__meta a { color: var(--text-2); text-decoration: underline; }
.b2b-terms-check { display: block; margin: 4px 0 14px; font-size: 13.5px; }
.b2b-cartfoot__ship { font-size: 13px; color: var(--text-2); margin-right: 14px; }

.b2b-foot__legal {
    display: flex; flex-wrap: wrap; gap: 6px 20px;
    padding-bottom: 24px; margin-top: -10px; font-size: 13px;
}
.b2b-foot__legal a { color: var(--text-2); }
.b2b-foot__legal a:hover { color: var(--primary); }

/* --- the AGB ------------------------------------------------------------
   A contract, not a landing page: one column at reading width, numbered
   clauses that stay quotable, and nothing decorative between them. */
.b2b-agb { max-width: 780px; }
.b2b-agb__meta {
    font-size: 12.5px; color: var(--text-2); line-height: 1.7;
    padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.b2b-agb__lang {
    font-size: 13.5px; background: var(--bg-1); border-left: 3px solid var(--primary);
    padding: 10px 14px; margin-bottom: 26px;
}
.b2b-agb .b2b-lede { margin-bottom: 30px; }
.b2b-agb__sec { margin-bottom: 30px; }
.b2b-agb__sec h2 {
    font-size: 17px; font-weight: 600; margin: 0 0 10px; letter-spacing: -.01em;
}
.b2b-agb__sec p { margin: 0 0 9px; font-size: 15px; line-height: 1.68; color: var(--text-2); }
.b2b-agb__sec p b:first-child { color: var(--main); font-weight: 600; }
.b2b-agb__foot {
    margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line);
    font-size: 12.5px; color: var(--text-2);
}

/* --- narrow ------------------------------------------------------------- */

@media (max-width: 991px) {
    .b2b-pdp, .b2b-checkout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .b2b-table thead { display: none; }
    .b2b-table tr { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
    .b2b-table td { border: 0; padding: 2px 0; text-align: left; }
    .b2b-table .is-num, .b2b-table .is-act { text-align: left; }
    .b2b-addline { justify-content: flex-start; margin-top: 8px; }
    .b2b-whoami { display: none; }
}

/* Buttons: the shape and colour were already right (a pill in --b2b-red, which
   the token block above rebinds to --primary). Only the SIZE needed work --
   16px/32px is a landing-page call to action, not something that belongs in a
   table row next to a quantity box. */
.b2b-trade .b2b-btn { padding: 12px 26px; font-size: 15px; }
.b2b-trade .b2b-btn--primary { background: var(--primary); }
.b2b-trade .b2b-btn--primary:hover { box-shadow: 0 12px 26px -12px rgba(200, 16, 46, .55); }
.b2b-trade .b2b-btn--ghost { border-color: var(--line); color: var(--main); }
.b2b-trade .b2b-btn--ghost:hover { border-color: var(--main); }
.b2b-trade .b2b-addline .b2b-btn { padding: 9px 20px; font-size: 14px; }
.b2b-trade .b2b-filters .b2b-btn { padding: 10px 22px; font-size: 14px; }

/* One quantity box per strength, one Add button for the lot. A trade buyer
   decides an assortment by looking at the whole range at once, so the page
   should let them enter it that way rather than making each strength its own
   round trip. */
.b2b-qtybox {
    width: 86px; font: inherit; font-size: 14px; text-align: right;
    padding: 9px 11px; border: 1px solid var(--line); border-radius: 4px;
    background: var(--white); color: var(--main);
}
.b2b-qtybox:focus { border-color: var(--primary); outline: none; }
.b2b-addbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap; padding: 18px 0 0;
}
/* The same bar with nothing but the button in it. */
.b2b-addbar.is-solo { justify-content: flex-end; }

/* The § 13.4 consent note under the registration checkbox. Quiet, but on the
   page rather than only inside the AGB: it is the one clause that grants us a
   permission over the shop's own name and logo, and consent a shop has to go
   looking for is not informed consent. */
.b2b-consent-note {
    margin: 8px 0 0 30px; font-size: 12.5px; line-height: 1.5;
    color: var(--text-2); max-width: 68ch;
}