/* The Learning Collection storefront styles.
   Scoped to .bs-* classes and loaded only on /store pages.
   Deliberately separate from the shared app.css/Tailwind build. */

@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/space-grotesk-regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/space-grotesk-medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/space-grotesk-bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

:root {
    --bs-ink: #0b0f0d;
    --bs-ink-soft: #26302b;
    --bs-muted: #66716b;
    --bs-line: #e2e7e3;
    --bs-line-strong: #cfd6d1;
    --bs-bg: #f6f8f6;
    --bs-panel: #ffffff;
    --bs-green: #00ae42;
    --bs-green-dark: #00892f;
    --bs-green-soft: #e8f7ee;
    --bs-dark: #0c1310;
    --bs-dark-2: #131c17;
    --bs-radius: 16px;
    --bs-radius-sm: 10px;
    --bs-shadow: 0 1px 2px rgba(11, 15, 13, .04), 0 12px 32px rgba(11, 15, 13, .06);
    --bs-font: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
    --bs-mono: 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace;
}

.bs-body {
    margin: 0;
    background: var(--bs-bg);
    color: var(--bs-ink);
    font-family: var(--bs-font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.bs-body *,
.bs-body *::before,
.bs-body *::after { box-sizing: border-box; }
.bs-body img { max-width: 100%; }
.bs-body a { color: inherit; text-decoration: none; }
.bs-body :focus-visible {
    outline: 3px solid var(--bs-green);
    outline-offset: 3px;
    border-radius: 4px;
}
.bs-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.bs-shell {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header */
.bs-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bs-header.is-scrolled {
    background: rgba(255, 255, 255, .78);
    border-bottom-color: var(--bs-line);
    box-shadow: 0 10px 30px rgba(10, 40, 20, .06);
}
.bs-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
}
.bs-brand {
    display: grid;
    grid-template-columns: auto 1px auto;
    grid-template-areas: "tlc divider partner";
    align-items: center;
    justify-items: start;
    column-gap: 12px;
}
.bs-brand__mark { display: flex; align-items: center; }
.bs-brand__mark--tlc { grid-area: tlc; }
.bs-brand__mark--partner { grid-area: partner; }
.bs-brand__logo { height: 27px; width: auto; display: block; }
.bs-brand__logo--partner { height: 19px; width: auto; }
.bs-brand__divider { grid-area: divider; width: 1px; height: 22px; background: var(--bs-line-strong); }
.bs-brand__by {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bs-muted);
}
.bs-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    column-gap: 20px;
    row-gap: 8px;
    white-space: nowrap;
}
.bs-nav a {
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--bs-ink-soft);
    transition: color .18s ease;
}
.bs-nav a:hover { color: var(--bs-green-dark); }
.bs-soon {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--bs-line-strong);
    border-radius: 999px;
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--bs-muted);
    vertical-align: 1px;
}

/* Below this width the links no longer fit beside the logo, so the nav takes
   its own row instead of dropping a single link onto a second line. */
@media (max-width: 1000px) {
    .bs-header__inner { flex-wrap: wrap; gap: 6px 18px; }
    .bs-nav { width: 100%; justify-content: flex-start; column-gap: 18px; }
}

/* Hero */
.bs-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 420px at 82% -10%, rgba(0, 174, 66, .28), transparent 60%),
        radial-gradient(700px 360px at 8% 110%, rgba(0, 174, 66, .12), transparent 55%),
        linear-gradient(160deg, var(--bs-dark), var(--bs-dark-2));
    color: #f2f7f3;
}
.bs-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%);
    pointer-events: none;
}
.bs-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 48px;
    align-items: center;
    padding-top: 82px;
    padding-bottom: 82px;
}
.bs-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #9fe6b8;
}
.bs-hero__eyebrow::before {
    content: "";
    width: 26px; height: 1px;
    background: var(--bs-green);
}
.bs-hero__title {
    margin: 18px 0 0;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.03;
    letter-spacing: -.03em;
    font-weight: 700;
}
.bs-hero__title em { font-style: normal; color: var(--bs-green); }
.bs-hero__sub {
    margin: 20px 0 0;
    max-width: 34rem;
    font-size: 1.06rem;
    color: #c4d2ca;
}
.bs-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.bs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.bs-btn:hover { transform: translateY(-1px); }
.bs-btn--primary { background: var(--bs-green); color: #04210f; }
.bs-btn--primary:hover { background: #12c757; }
.bs-btn--ghost { border-color: rgba(255, 255, 255, .28); color: #e8f2eb; }
.bs-btn--ghost:hover { border-color: rgba(255, 255, 255, .6); }
/* `.bs-body a { color: inherit }` otherwise wins; keep button labels legible. */
.bs-body a.bs-btn--primary { color: #04210f; }
.bs-body a.bs-btn--ghost { color: #e8f2eb; }
.bs-body a.bs-btn--dark { color: #fff; }
.bs-body a.bs-btn--outline { color: var(--bs-ink); }
.bs-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}
.bs-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #c9d8cf;
}
.bs-chip strong { color: #fff; font-weight: 500; }
.bs-hero__art {
    display: flex;
    align-items: center;
    justify-content: center;
}
.bs-hero__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 380px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 40%, rgba(0, 174, 66, .18), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
    display: flex;
    align-items: center;
    justify-content: center;
}
.bs-hero__frame::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px dashed rgba(255, 255, 255, .16);
    border-radius: 20px;
}
.bs-hero__bambu { width: 62%; filter: drop-shadow(0 10px 30px rgba(0,0,0,.45)); }
.bs-hero__frame-note {
    position: absolute;
    bottom: 26px;
    left: 0; right: 0;
    text-align: center;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8fa79a;
}

/* Sections */
.bs-main { display: block; }
.bs-section { padding: 64px 0; }
.bs-section--tight { padding: 40px 0 64px; }

/* Store home: stacked sections used to add both paddings (up to 128px of air
   between "What are you looking for?" and the catalogue, and around the
   ordering/support blocks). One gap per boundary, and no trailing gap before
   the footer. Keep these ids stable — they are referenced from the templates. */
#choose { padding-bottom: 16px; }
#catalogue { padding-top: 0; padding-bottom: 48px; }
#how-ordering { padding-top: 0; padding-bottom: 48px; }
#support { padding-top: 0; padding-bottom: 0; }
.bs-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}
.bs-eyebrow {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bs-muted);
}
.bs-h2 {
    margin: 8px 0 0;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.bs-lead { margin: 12px 0 0; max-width: 46rem; color: var(--bs-muted); }
.bs-series { margin-top: 40px; scroll-margin-top: 96px; }
.bs-series:first-of-type { margin-top: 0; }
.bs-series__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.bs-series__label {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bs-ink-soft);
    font-weight: 500;
}
.bs-series__count { font-size: 11px; color: var(--bs-muted); }

/* Brand picker (landing page) */
.bs-brandpick__head { margin-bottom: 26px; }
.bs-brandpick__head .bs-lead { margin-top: 8px; max-width: 42rem; }
.bs-brandpick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.bs-brandpick__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--bs-line);
    border-radius: 16px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bs-brandpick__item:hover {
    border-color: var(--bs-green);
    transform: translateY(-1px);
}
.bs-brandpick__item.is-active {
    border-color: var(--bs-green);
    background: #f6fcf8;
    box-shadow: 0 0 0 3px rgba(0, 174, 66, .10);
}
.bs-brandpick__item--partner {
    background: #fafafa;
}
.bs-brandpick__logo {
    flex: 0 0 96px;
    display: flex;
    align-items: center;
}
.bs-brandpick__logo img {
    max-width: 100%;
    height: 28px;
    width: auto;
    object-fit: contain;
}
.bs-brandpick__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bs-brandpick__name {
    font-weight: 600;
    color: var(--bs-ink);
}
.bs-brandpick__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--bs-ink-soft);
}
.bs-brandpick__item.is-active .bs-brandpick__icon { color: #0a6a2c; }
@media (max-width: 900px) {
    .bs-brandpick { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) and (min-width: 901px) {
    .bs-brandpick__item { padding: 16px; gap: 12px; }
    .bs-brandpick__logo { flex-basis: 72px; }
}

/* Catalogue filters */
.bs-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 36px;
    padding: 16px 18px;
    margin-bottom: 14px;
    background: var(--bs-panel);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
}
.bs-filter { display: flex; flex-direction: column; gap: 9px; }
.bs-filter--sort { margin-left: auto; }
.bs-filter__label {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bs-muted);
}
.bs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-chipf {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--bs-line);
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1;
    color: var(--bs-ink-soft);
    background: #fff;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.bs-chipf:hover { border-color: var(--bs-line-strong); }
.bs-chipf.is-active { background: var(--bs-ink); border-color: var(--bs-ink); color: #fff; }
.bs-chipf__n { font-size: 10.5px; color: var(--bs-muted); }
.bs-chipf.is-active .bs-chipf__n { color: rgba(255, 255, 255, .6); }

.bs-resultsbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin: 4px 0 26px;
}
.bs-resultsbar__count { margin: 0; font-size: 13px; color: var(--bs-muted); }
.bs-resultsbar__count strong { color: var(--bs-ink); font-weight: 600; }
.bs-resultsbar__clear {
    margin-left: 12px;
    color: var(--bs-green-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bs-jumpnav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; }
.bs-jumpnav__label {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bs-muted);
}
.bs-jumpnav a {
    padding: 4px 10px;
    border: 1px solid var(--bs-line);
    border-radius: 999px;
    color: var(--bs-ink-soft);
}
.bs-jumpnav a:hover { border-color: var(--bs-green); color: var(--bs-green-dark); }

/* Cards */
.bs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.bs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bs-panel);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(11, 15, 13, .02);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bs-card:hover {
    border-color: var(--bs-line-strong);
    transform: translateY(-2px);
    box-shadow: var(--bs-shadow);
}
.bs-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(0, 174, 66, .12), transparent 62%),
        linear-gradient(160deg, #f1f4f2, #e7ece8);
    border-bottom: 1px solid var(--bs-line);
    overflow: hidden;
}
.bs-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(11, 15, 13, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 15, 13, .035) 1px, transparent 1px);
    background-size: 22px 22px;
}
.bs-card__ghost {
    position: relative;
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -.04em;
    color: rgba(11, 15, 13, .12);
}
.bs-card__media-note {
    position: absolute;
    bottom: 10px;
    left: 0; right: 0;
    text-align: center;
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(11, 15, 13, .34);
}
.bs-card__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 0; }
.bs-card__series {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bs-muted);
}
.bs-card__name {
    font-size: 1.06rem;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.25;
}
.bs-card__config { font-size: 12.5px; color: var(--bs-muted); }
.bs-card__foot {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 18px;
}
.bs-card__price { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.bs-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.bs-badge--live {
    background: var(--bs-green-soft);
    color: #0a6a2c;
    border: 1px solid #bfe7cd;
}
.bs-badge--live::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--bs-green);
}

/* Card compare control + stretched link */
.bs-card__link { position: absolute; inset: 0; z-index: 1; }
.bs-card__compare {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    margin: 0;
}
.bs-card__compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--bs-line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    font: inherit;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--bs-ink-soft);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(11, 15, 13, .06);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.bs-card__compare-btn:hover { border-color: var(--bs-green); color: var(--bs-green-dark); }
.bs-card__compare-btn:disabled {
    background: var(--bs-green-soft);
    border-color: #bfe7cd;
    color: #0a6a2c;
    cursor: default;
}

/* Product detail */
.bs-product { padding: 44px 0 72px; }
.bs-backlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bs-muted);
}
.bs-backlink:hover { color: var(--bs-green-dark); }
.bs-breadcrumb { font-size: 12px; letter-spacing: .02em; color: var(--bs-muted); }
.bs-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bs-breadcrumb li { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.bs-breadcrumb li + li::before { content: "/"; color: var(--bs-line-strong); }
.bs-breadcrumb a { color: var(--bs-muted); }
.bs-breadcrumb a:hover { color: var(--bs-green-dark); }
.bs-breadcrumb [aria-current="page"] { color: var(--bs-ink-soft); font-weight: 500; }
.bs-product__actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.bs-inline-compare { margin: 0; }
.bs-product__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 48px;
    margin-top: 26px;
    align-items: start;
}
.bs-product__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
    border: 1px solid var(--bs-line);
    background:
        radial-gradient(circle at 50% 42%, rgba(0, 174, 66, .14), transparent 62%),
        linear-gradient(160deg, #f1f4f2, #e5ebe6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bs-product__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(11, 15, 13, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 15, 13, .035) 1px, transparent 1px);
    background-size: 30px 30px;
}
.bs-product__media--gallery {
    aspect-ratio: auto;
    border: 0;
    background: none;
    display: block;
    overflow: visible;
}
.bs-product__media--gallery::before { display: none; }
.bs-product__ghost {
    position: relative;
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 700;
    letter-spacing: -.05em;
    color: rgba(11, 15, 13, .1);
}
.bs-product__media-note {
    position: absolute;
    bottom: 16px; left: 0; right: 0;
    text-align: center;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(11, 15, 13, .34);
}
.bs-product__series {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bs-muted);
}
.bs-product__name {
    margin: 8px 0 0;
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -.03em;
}
.bs-product__config {
    margin: 10px 0 0;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-muted);
}
.bs-product__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--bs-line);
}
.bs-product__price { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.bs-product__unit { font-size: 12px; color: var(--bs-muted); }
.bs-notice {
    margin-top: 22px;
    padding: 18px 20px;
    border-radius: var(--bs-radius-sm);
    border: 1px solid #bfe7cd;
    background: var(--bs-green-soft);
    color: #0a5a27;
}
.bs-notice__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.bs-notice__title::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bs-green);
}
.bs-notice p { margin: 8px 0 0; font-size: 14px; color: #1d5c36; }
.bs-facts { margin-top: 28px; border-top: 1px solid var(--bs-line); }
.bs-fact {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid var(--bs-line);
    font-size: 14px;
}
.bs-fact dt { color: var(--bs-muted); margin: 0; }
.bs-fact dd { margin: 0; text-align: right; font-weight: 500; }
.bs-muted-note { margin-top: 18px; font-size: 12.5px; color: var(--bs-muted); }
.bs-disabled-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 10px 14px;
    border: 1px dashed var(--bs-line-strong);
    border-radius: 10px;
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--bs-muted);
    cursor: not-allowed;
    user-select: none;
}

/* Empty / deferred states */
.bs-empty {
    margin-top: 24px;
    padding: 34px;
    border: 1px dashed var(--bs-line-strong);
    border-radius: var(--bs-radius);
    background: var(--bs-panel);
    text-align: center;
}
.bs-empty__title { margin: 0; font-size: 1.15rem; font-weight: 500; }
.bs-empty p { margin: 10px auto 0; max-width: 36rem; color: var(--bs-muted); font-size: 14px; }

/* Footer */
/* Store section bar: sticky under the shared site header. Explicit sizes here
   because store.css is unlayered and wins over Tailwind utilities (the arbitrary
   h-[18px] utility lost to .bs-body img in the first cut and the partner logo
   rendered at its 749x126 natural size). */
.bs-catbar__partner-logo { display: block; height: 18px; width: auto; }
.bs-footer__partner-logo { display: block; height: 20px; width: auto; }

.bs-footer {
    margin-top: 72px;
    background: #fff;
    border-top: 1px solid var(--bs-line);
}
.bs-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 34px;
    padding-bottom: 34px;
}
.bs-footer__meta { font-size: 11.5px; color: var(--bs-muted); }
.bs-footer__meta p { margin: 0 0 6px; }

/* Responsive */
@media (max-width: 900px) {
    .bs-hero__inner { grid-template-columns: 1fr; gap: 36px; padding-top: 60px; padding-bottom: 64px; }
    .bs-hero__art { order: 0; }
    .bs-hero__frame { max-width: 300px; }
    .bs-product__grid { grid-template-columns: 1fr; gap: 30px; }
    .bs-section__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 680px) {
    .bs-shell { padding: 0 18px; }
    .bs-header__inner { min-height: 62px; }
    .bs-brand { column-gap: 9px; row-gap: 6px; }
    .bs-brand__logo { height: 22px; width: auto; }
    .bs-brand__logo--partner { height: 16px; width: auto; }
    .bs-brand__divider { height: 18px; }
    .bs-nav { display: none; }
    .bs-hero__title { font-size: clamp(2rem, 9vw, 2.6rem); }
    .bs-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .bs-card, .bs-btn { transition: none; }
    .bs-card:hover, .bs-btn:hover { transform: none; }
}

/* Hero logo card (keeps the dark wordmark legible on the dark hero) */
.bs-hero__logo-card {
    width: 64%;
    padding: 22px 26px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .38);
}
.bs-hero__logo-card img { display: block; width: 100%; height: auto; }

/* Card status line */
.bs-card__status {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--bs-muted);
}

/* "Prepared for launch" notes */
.bs-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.bs-note {
    padding: 22px;
    background: var(--bs-panel);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
}
.bs-note__index {
    font-family: var(--bs-mono);
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--bs-green-dark);
}
.bs-note h3 {
    margin: 10px 0 0;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -.01em;
}
.bs-note p { margin: 8px 0 0; font-size: 13.5px; color: var(--bs-muted); }

/* Flash messages */
.bs-flash {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid var(--bs-line-strong);
    background: #fff;
}
.bs-flash--success { border-color: #bfe7cd; background: var(--bs-green-soft); color: #0a5a27; }
.bs-flash--error { border-color: #f0c2c2; background: #fdf1f1; color: #8a1f1f; }

/* Inline add-to-cart form */
.bs-inline-form { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.bs-inline-form input[type="number"] {
    width: 64px;
    padding: 6px 8px;
    border: 1px solid var(--bs-line-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
}
.bs-inline-form button {
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--bs-ink);
    color: #fff;
    font: inherit;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}
.bs-inline-form button:hover { background: var(--bs-green-dark); }

/* Brand cards (The Learning Collection: Bambu Lab + Cytron) */
.bs-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.bs-brand-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px;
    background: var(--bs-panel);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
}
.bs-brand-card--wide { padding: 32px; }
.bs-brand-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bs-brand-card__name { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }
.bs-brand-card__meta { margin: 0; font-size: 13.5px; color: var(--bs-muted); max-width: 48rem; }
.bs-brand-card__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.bs-btn--dark { background: var(--bs-ink); color: #fff; border-color: var(--bs-ink); }
.bs-btn--dark:hover { background: var(--bs-green-dark); border-color: var(--bs-green-dark); }
.bs-btn--outline { background: transparent; color: var(--bs-ink); border-color: var(--bs-line-strong); }
.bs-btn--outline:hover { border-color: var(--bs-ink); }
.bs-brand-card h2 { margin-top: 6px; }


/* Hero product image (supplied A1 Combo) */
.bs-hero__art { flex-direction: column; gap: 12px; }
.bs-hero__product {
    position: relative;
    width: 100%;
    max-width: 470px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bs-hero__product::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 174, 66, .22), transparent 65%);
    filter: blur(12px);
}
.bs-hero__product img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 24px 42px rgba(0, 0, 0, .45));
}
.bs-hero__caption {
    margin: 0;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #9fb3a7;
}

/* Product images in cards and detail */
.bs-card__img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    mix-blend-mode: multiply;
}
.bs-product__img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    mix-blend-mode: multiply;
}

/* Independent partner strip (Cytron) */
.bs-partner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    background: var(--bs-panel);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
}
@media (max-width: 680px) {
    .bs-partner { flex-direction: column; align-items: flex-start; }
}

/* Compare tray */
.bs-compare-tray {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--bs-tray-offset, 0px);
    z-index: 60;
    max-height: calc(100dvh - 8px);
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--bs-line-strong);
    box-shadow: 0 -8px 24px rgba(11, 15, 13, .08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.bs-compare-tray__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    padding-top: 12px;
    padding-bottom: 12px;
}
.bs-compare-tray__summary { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.bs-compare-tray__count { margin: 0; font-size: 13px; }
.bs-compare-tray__count strong { font-weight: 700; }
.bs-compare-tray__hint { margin: 0; font-size: 11.5px; color: var(--bs-muted); }
.bs-compare-tray__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
}
.bs-compare-tray__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 11px;
    border: 1px solid var(--bs-line);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    max-width: 100%;
}
.bs-compare-tray__item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-compare-tray__item form { margin: 0; display: inline-flex; }
.bs-compare-tray__remove {
    width: 20px;
    height: 20px;
    line-height: 1;
    border: 0;
    border-radius: 50%;
    background: var(--bs-bg);
    color: var(--bs-muted);
    font-size: 14px;
    cursor: pointer;
}
.bs-compare-tray__remove:hover { background: #fdecec; color: #b42318; }
.bs-compare-tray__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.bs-compare-tray__actions form { margin: 0; }
.bs-compare-tray__clear {
    border: 0;
    background: none;
    padding: 0;
    color: var(--bs-muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bs-compare-tray__clear:hover { color: var(--bs-ink); }
.bs-compare-tray__cta--disabled { opacity: .45; cursor: default; }
.bs-body.has-compare-tray { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }

/* Comparison page */
.bs-compare__scrollhint { display: none; }
.bs-compare {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    background: var(--bs-panel);
}
.bs-compare:focus-visible { outline: 3px solid var(--bs-green); outline-offset: 2px; }
.bs-compare__table { width: 100%; min-width: 700px; border-collapse: collapse; }
.bs-compare__table th,
.bs-compare__table td {
    padding: 16px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--bs-line);
}
.bs-compare__table thead th { background: #fbfcfb; border-bottom: 1px solid var(--bs-line-strong); }
.bs-compare__table tbody th {
    width: 190px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bs-muted);
    font-weight: 500;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bs-panel);
    box-shadow: 1px 0 0 var(--bs-line-strong);
}
.bs-compare__table thead th.bs-compare__corner {
    position: sticky;
    left: 0;
    z-index: 2;
    vertical-align: bottom;
    background: #fbfcfb;
    box-shadow: 1px 0 0 var(--bs-line-strong);
}
.bs-compare__col { min-width: 210px; }
.bs-compare__product { display: block; }
.bs-compare__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--bs-line);
    border-radius: 10px;
    background: linear-gradient(160deg, #f1f4f2, #e7ece8);
    mix-blend-mode: multiply;
}
.bs-compare__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: rgba(11, 15, 13, .16);
}
.bs-compare__name { display: block; margin-top: 10px; font-size: 1rem; font-weight: 500; }
.bs-compare__remove { margin: 8px 0 0; }
.bs-compare__remove-btn {
    border: 0;
    background: none;
    padding: 0;
    color: var(--bs-muted);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bs-compare__remove-btn:hover { color: #b42318; }
.bs-compare__price { display: block; font-size: 1.05rem; font-weight: 700; }
.bs-compare__price-note { display: block; margin-top: 2px; font-size: 11px; color: var(--bs-muted); }
.bs-compare__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}
.bs-compare__actions form { margin: 0; }
.bs-compare__single { margin-top: 20px; }

@media (max-width: 720px) {
    .bs-compare__scrollhint { display: block; margin: 0 0 10px; font-size: 12px; color: var(--bs-muted); }
    .bs-compare__table tbody th { width: 124px; }
    .bs-compare-tray__actions { margin-left: 0; width: 100%; justify-content: flex-end; }
    .bs-body.has-compare-tray { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}

/* Information pages */
.bs-info { max-width: 60rem; }
.bs-info__head { margin-bottom: 24px; }
.bs-prose { max-width: 52rem; }
.bs-prose h2 { margin: 32px 0 8px; font-size: 1.15rem; letter-spacing: -.01em; }
.bs-prose p { margin: 0 0 14px; color: var(--bs-ink-soft); }
.bs-prose ul { margin: 0 0 14px; padding-left: 20px; }
.bs-prose li { margin: 6px 0; color: var(--bs-ink-soft); }
.bs-prose a { color: var(--bs-green-dark); text-decoration: underline; text-underline-offset: 2px; }
.bs-faq { margin: 0; max-width: 52rem; }
.bs-faq dt { margin-top: 22px; font-weight: 500; }
.bs-faq dd { margin: 6px 0 0; color: var(--bs-muted); }
.bs-faq a { color: var(--bs-green-dark); text-decoration: underline; text-underline-offset: 2px; }
.bs-steps { margin: 0; padding-left: 22px; max-width: 50rem; }
.bs-steps li { margin: 0 0 16px; color: var(--bs-ink-soft); }
.bs-steps strong { color: var(--bs-ink); }
.bs-footer__links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 12px; }
.bs-footer__links a { color: var(--bs-muted); }
.bs-footer__links a:hover { color: var(--bs-green-dark); }

/* Product gallery */
.bs-gallery { display: flex; flex-direction: column; gap: 14px; }
.bs-gallery__stage {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f4f6f4;
    border: 1px solid var(--bs-line);
    border-radius: 22px;
    overflow: hidden;
}
.bs-gallery__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.bs-gallery__slide[hidden] { display: none; }
.bs-gallery__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bs-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.bs-gallery__thumb {
    position: relative;
    padding: 0;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--bs-line);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
}
.bs-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bs-gallery__thumb.is-active { border-color: var(--bs-green); box-shadow: 0 0 0 2px rgba(0, 174, 66, .25); }
.bs-gallery__note { margin: 0; font-size: 11.5px; color: var(--bs-muted); }

/* Key highlights */
.bs-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.bs-highlight { padding: 20px 22px; background: var(--bs-panel); border: 1px solid var(--bs-line); border-radius: var(--bs-radius); }
.bs-highlight h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.bs-highlight p { margin: 0; font-size: 13.5px; color: var(--bs-muted); }

/* Feature sections */
.bs-feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; align-items: center; margin-top: 32px; }
.bs-feature:first-of-type { margin-top: 0; }
.bs-feature--reverse .bs-feature__media { order: 2; }
.bs-feature--text { grid-template-columns: minmax(0, 1fr); gap: 0; }
.bs-feature--text .bs-feature__body { max-width: 68ch; }
.bs-feature__media { border: 1px solid var(--bs-line); border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, #f4f7f5, #e8eeea); }
.bs-feature__media img { display: block; width: 100%; height: auto; }
.bs-feature__body h3 { margin: 0 0 10px; font-size: 1.25rem; letter-spacing: -.01em; }
.bs-feature__body p { margin: 0 0 12px; color: var(--bs-ink-soft); }
.bs-feature__why { font-size: 13.5px; color: var(--bs-muted); }
.bs-feature__why strong { color: var(--bs-ink); }

/* Specifications */
.bs-specs { border: 1px solid var(--bs-line); border-radius: var(--bs-radius); overflow: hidden; background: var(--bs-panel); }
.bs-specs__table { width: 100%; border-collapse: collapse; }
.bs-specs__table th,
.bs-specs__table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bs-line); }
.bs-specs__table tr:last-child th,
.bs-specs__table tr:last-child td { border-bottom: 0; }
.bs-specs__table th { width: 34%; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-muted); font-weight: 500; background: #fbfcfb; }
.bs-specs__table td { font-size: 14px; color: var(--bs-ink-soft); }

/* Included + resources */
.bs-included { margin: 0; padding-left: 20px; }
.bs-included li { margin: 6px 0; color: var(--bs-ink-soft); }
.bs-docs { margin: 0; padding-left: 20px; }
.bs-docs li { margin: 8px 0; }
.bs-docs a { color: var(--bs-green-dark); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 680px) {
    .bs-feature { grid-template-columns: 1fr; gap: 18px; }
    .bs-feature--reverse .bs-feature__media { order: 0; }
    .bs-specs__table th { width: 42%; }
}

/* Series chooser */
.bs-series-guide {
    margin: 8px 0 30px;
    padding: 24px;
    background: var(--bs-panel);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
}
.bs-series-guide__head { margin-bottom: 18px; }
.bs-series-guide__head .bs-lead { margin-top: 8px; }
.bs-series-guide__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.bs-series-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--bs-line);
    border-radius: 12px;
    transition: border-color .15s ease, transform .15s ease;
}
.bs-series-card:hover { border-color: var(--bs-line-strong); transform: translateY(-2px); }
.bs-series-card__name { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.bs-series-card__count { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bs-muted); }
.bs-series-card__desc { font-size: 12.5px; color: var(--bs-ink-soft); line-height: 1.45; }
.bs-series-card__link { margin-top: 6px; font-size: 11.5px; color: var(--bs-green-dark); }
.bs-series-guide .bs-muted-note { margin-top: 14px; }

@media (max-width: 680px) {
    .bs-series-guide { padding: 18px; }
}

/* Brand logo strip (storefront landing, directly under the hero) */
.bs-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
    padding: 2rem 0 1rem;
}
.bs-logos__item {
    display: inline-flex;
    align-items: center;
    opacity: .88;
    transition: opacity .18s ease;
}
.bs-logos__item:hover,
.bs-logos__item:focus-visible { opacity: 1; }
.bs-logos img { display: block; height: 34px; width: auto; }
.bs-logos__note { margin: 14px 0 0; text-align: center; font-size: .82rem; color: var(--bs-muted); }
@media (max-width: 640px) {
    .bs-logos { gap: 2rem; }
    .bs-logos img { height: 27px; }
}

/* --- Store enquiry form (lead capture while ordering is disabled) --- */
.bs-enquiry {
    margin-top: 28px;
    padding: 22px;
    border: 1px solid var(--bs-line);
    border-radius: 16px;
    background: var(--bs-panel);
}
.bs-enquiry__title { font-size: 1.1rem; margin: 0 0 6px; }
.bs-enquiry__form { display: grid; gap: 14px; margin-top: 14px; }
.bs-enquiry__form label { display: grid; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--bs-ink-soft); }
.bs-enquiry__form input,
.bs-enquiry__form textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-weight: 400;
    color: var(--bs-ink);
    background: var(--bs-bg);
    border: 1px solid var(--bs-line);
    border-radius: 10px;
}
.bs-enquiry__form input:focus-visible,
.bs-enquiry__form textarea:focus-visible { outline: 2px solid var(--bs-green); outline-offset: 1px; }
.bs-enquiry__form button { justify-self: start; }
.bs-enquiry__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }