/* ==========================================================================
   Buyinn storefront stylesheet

   Naming: every class is prefixed `bi-` so nothing collides with the Industry
   design system in design-system.css (.btn, .card, .input, .blueprint).

   Convention is BEM:
     .bi-block            the component
     .bi-block__element   a part of it
     .bi-block--modifier  a variant of it
     .is-*  /  .has-*     a state, toggled by JS or by Blade

   `data-*` attributes are behaviour hooks for app.js only. Never style them —
   if it changes how something looks, it belongs in a class.

   Sections below, in order:
     1.  Tokens
     2.  Base
     3.  Layout       shell, section, grids, rails, split
     4.  Typography   eyebrow, title, lede, link-arrow
     5.  Media        cover images, scrims, zoom
     6.  Motion       reveal, float
     7.  Buttons
     8.  Forms
     9.  Surfaces     panel, badge, chip, table, summary, empty
     10. Chrome       promo bar, header, search panel, dept bar, footer
     11. Cards        product, vendor, tile, banner, feature, step
     12. Pages        hero, page header, product detail, cart, account, auth
     13. Feedback     flash
     14. Responsive
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  --color-bg: #FFFDF7;
  --color-surface: #EAF7EF;
  --color-text: #17211B;
  --color-accent: #238A57;
  --color-accent-2: #F6C64B;
  --color-divider: #E3E9E4;

  --color-accent-100: #EAF7EF; --color-accent-200: #CDEBD9; --color-accent-300: #A6DBBE;
  --color-accent-400: #6FC698; --color-accent-500: #32A86B; --color-accent-600: #238A57;
  --color-accent-700: #1B6F46; --color-accent-800: #165B3A; --color-accent-900: #0F3D27;

  --color-accent-2-100: #FFF5CF; --color-accent-2-200: #FDE9A6; --color-accent-2-300: #F9D97A;
  --color-accent-2-400: #F6C64B; --color-accent-2-500: #E5B02F; --color-accent-2-600: #C4941E;
  --color-accent-2-700: #9A7316; --color-accent-2-800: #6F5210; --color-accent-2-900: #3F2E08;

  /* Secondary ink for meta text, and the body ink used in long copy. */
  /* The hero's ground: a deep slate that lets the green ramp read as
     the accent rather than as the background. */
  --hero-ground: #10222F;

  --ink-2: #667068;
  --ink-body: #3E4A42;

  --color-danger: #B3261E;
  --color-danger-bg: #FDF1F0;
  --color-danger-border: #E7B4B0;

  --shell-max: 1360px;
  --shell-pad: 32px;
  --shell-pad-sm: 18px;

  --section-y: 76px;
  --section-y-sm: 52px;

  /* Ink on a dark green ground — the footer, discovery band and card scrims. */
  --on-dark: #FFFDF7;
  --on-dark-70: rgba(255, 253, 247, .7);
  --on-dark-78: rgba(255, 253, 247, .78);
  --on-dark-85: rgba(255, 253, 247, .85);
  --on-dark-line: rgba(255, 253, 247, .22);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-500); }
img { display: block; max-width: 100%; }

/* The `hidden` attribute must beat any component `display`, or a panel that
   sets `display:grid` would stay on screen while marked hidden. */
[hidden] { display: none !important; }

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

/* ==========================================================================
   3. Layout
   ========================================================================== */

/* Centred page gutter. Everything full-width sits inside one of these. */
.bi-shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-left: var(--shell-pad);
  padding-right: var(--shell-pad);
}

.bi-section { padding-top: var(--section-y); padding-bottom: var(--section-y); }

/* The homepage runs tighter than the rest of the site.

   Elsewhere a section is usually the whole page and wants room around it; on
   the homepage they are bands stacked one after another, and 76px of air
   between each made the page feel half-empty however much was in it. Scoped to
   .bi-reveal, which only the homepage bands carry. */
.bi-reveal > .bi-section { padding-top: 44px; padding-bottom: 44px; }
.bi-reveal + .bi-reveal > .bi-section { padding-top: 0; }
/* Except where the ground changes colour: a tinted band butted straight
   against the one above reads as a mistake rather than a section. */
.bi-reveal.bi-section--surface > .bi-section { padding-top: 44px; }

/* The closing banner sits nearer the band above it than a full section,
   but not against it. */
.bi-cta { padding: 22px 0 34px; }
.bi-section--tight { padding-top: 48px; padding-bottom: 48px; }
.bi-section--flush-bottom { padding-bottom: 30px; }

/* Tinted section grounds. */
.bi-section--surface { background: var(--color-accent-100); }
.bi-section--paper { background: #fff; }
.bi-section--warm { background: var(--color-accent-2-100); }
.bi-section--deep { background: var(--color-accent-800); color: var(--on-dark); }
.bi-section--rule-top { border-top: 1px solid var(--color-divider); }
.bi-section--rule-bottom { border-bottom: 1px solid var(--color-divider); }

/* Heading on the left, "see all" link or rail arrows on the right. */
.bi-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 30px;
}
.bi-section-head--tight { margin-bottom: 22px; }
/* Heading over its own standfirst, rather than a heading with something else
   pushed to the far end of the row. */
.bi-section-head--stack { display: block; }
.bi-section-head--stack .bi-lede { margin: 8px 0 0; max-width: 56ch; }
.bi-section-head__actions { display: flex; align-items: center; gap: 10px; }

/* Product and card grids. */
.bi-grid { display: grid; gap: 18px; }
.bi-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bi-grid--auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.bi-grid--auto-wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bi-grid--auto-narrow { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* The homepage category mosaic: tiles set their own span. */
.bi-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* Two-column editorial split (image + copy). */
.bi-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.bi-split--wide-left { grid-template-columns: 1.1fr 1fr; }
.bi-split--wide-right { grid-template-columns: 1fr 1.05fr; }

/* Content column with a sticky sidebar (listing filters, cart summary, account nav). */
.bi-sidebar-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
.bi-sidebar-layout--right { grid-template-columns: minmax(0, 1fr) 360px; }
.bi-sidebar-layout--right-wide { grid-template-columns: minmax(0, 1fr) 380px; }
.bi-sticky { position: sticky; top: 96px; }

/* Horizontal scroller with snap points; scrollbar hidden, arrows drive it. */
.bi-rail {
  display: flex; gap: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 6px 2px 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.bi-rail::-webkit-scrollbar { display: none; }
.bi-rail > * { scroll-snap-align: start; flex: none; }

.bi-rail-btn {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--color-divider); background: #fff;
  color: var(--color-text); cursor: pointer;
}
.bi-rail-btn:hover { background: var(--color-accent-100); border-color: var(--color-accent-300); }

.bi-stack { display: flex; flex-direction: column; gap: 9px; }
.bi-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bi-row--tight { gap: 8px; }
.bi-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   4. Typography
   ========================================================================== */

.bi-eyebrow {
  margin: 0 0 8px; font-family: var(--font-heading); font-weight: 600;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.bi-eyebrow--on-dark { color: var(--color-accent-2-300); }

.bi-title { margin: 0; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.015em; }
.bi-title--sm { font-size: clamp(24px, 2.6vw, 32px); }
.bi-title--lg { font-size: clamp(32px, 4vw, 52px); line-height: 1.04; letter-spacing: -.02em; }
.bi-title--page { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.02em; line-height: 1.05; }

.bi-lede {
  margin: 14px 0 0; font-size: 16px; line-height: 1.55;
  color: var(--ink-2); max-width: 56ch; text-wrap: pretty;
}
.bi-prose { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-body); text-wrap: pretty; }
.bi-meta { font-size: 12.5px; color: var(--ink-2); }

.bi-link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--color-accent-800);
  border-bottom: 1px solid var(--color-accent-300); padding-bottom: 4px;
}

/* ==========================================================================
   5. Media
   ========================================================================== */

/* Fills its positioned parent with a cropped image. */
.bi-media { position: absolute; inset: 0; overflow: hidden; display: block; }
.bi-media__img,
.bi-cover { width: 100%; height: 100%; object-fit: cover; }

/* Readability wash under text laid over a photo. */
.bi-scrim { position: absolute; inset: 0; pointer-events: none; }
.bi-scrim--bottom { background: linear-gradient(to top, rgba(15,61,39,.72) 0%, rgba(15,61,39,.06) 58%); }
.bi-scrim--bottom-strong { background: linear-gradient(to top, rgba(15,61,39,.82) 0%, rgba(15,61,39,.12) 52%, rgba(15,61,39,0) 74%); }
.bi-scrim--bottom-soft { background: linear-gradient(to top, rgba(15,61,39,.55) 0%, rgba(15,61,39,0) 60%); }

/* Decorative radial glows behind the hero and spotlight. */
.bi-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.bi-glow--gold { background: radial-gradient(circle, rgba(246,198,75,.42) 0%, rgba(246,198,75,0) 68%); }
.bi-glow--green { background: radial-gradient(circle, rgba(50,168,107,.20) 0%, rgba(50,168,107,0) 70%); }
.bi-glow--white { background: radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 70%); }

/* ==========================================================================
   6. Motion
   ========================================================================== */

@keyframes bi-drift-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bi-drift-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes bi-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.bi-float { animation: bi-drift-up 6s ease-in-out infinite; }
.bi-float--alt { animation: bi-drift-down 7.5s ease-in-out infinite; }

/* Fades in when scrolled into view; app.js adds .is-visible. */
.bi-reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1);
}
.bi-reveal.is-visible { opacity: 1; transform: none; }

/* Slow zoom on the image inside a hovered card. */
.bi-zoom { transition: transform .55s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bi-reveal { opacity: 1; transform: none; transition: none; }
  .bi-float, .bi-float--alt { animation: none; }
  .bi-zoom { transition: none; }
}

/* ==========================================================================
   7. Buttons
   ========================================================================== */

.bi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  letter-spacing: .05em; text-transform: uppercase; border-radius: 0;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.bi-btn--solid { background: var(--color-accent-600); border-color: var(--color-accent-700); color: var(--on-dark); }
.bi-btn--solid:hover { background: var(--color-accent-500); color: var(--on-dark); }
.bi-btn--dark { background: var(--color-accent-800); border-color: var(--color-accent-900); color: var(--on-dark); }
.bi-btn--dark:hover { background: var(--color-accent-600); color: var(--on-dark); }
.bi-btn--outline { border-color: var(--color-accent-800); color: var(--color-accent-800); background: transparent; }
.bi-btn--outline:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
.bi-btn--quiet { border-color: var(--color-divider); background: #fff; color: var(--color-text); }
.bi-btn--quiet:hover { border-color: var(--color-accent-400); color: var(--color-text); }
.bi-btn--gold { background: var(--color-accent-2-400); border-color: var(--color-accent-2-500); color: var(--color-accent-2-900); }
.bi-btn--gold:hover { background: var(--color-accent-2-300); color: var(--color-accent-2-900); }

.bi-btn--lg { height: 52px; padding: 0 26px; font-size: 15px; }
.bi-btn--sm { height: 38px; padding: 0 14px; font-size: 12.5px; }
.bi-btn--block { width: 100%; }
.bi-btn--grow { flex: 1; min-width: 200px; }
.bi-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Square icon-only control (rail arrows, remove, quick view). */
.bi-icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--color-divider); background: rgba(255, 253, 247, .95);
  color: var(--color-text); cursor: pointer; padding: 0;
}
.bi-icon-btn:hover { border-color: var(--color-accent-500); color: var(--color-text); }
.bi-icon-btn--sm { width: 36px; height: 36px; }

/* ==========================================================================
   8. Forms
   ========================================================================== */

.bi-field { display: block; margin-bottom: 16px; }
.bi-field--full { grid-column: 1 / -1; }

.bi-label {
  display: block; font-size: 12.5px; margin-bottom: 6px; color: #4C5A50;
  font-family: var(--font-heading); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}

.bi-input {
  width: 100%; height: 48px; padding: 0 14px; font: inherit; font-size: 15px;
  color: var(--color-text); background: #fff; border: 1px solid var(--color-divider);
  border-radius: 0; outline: none;
}
textarea.bi-input { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; }
select.bi-input { appearance: none; background-image: none; cursor: pointer; }
.bi-input:focus { border-color: var(--color-accent-500); box-shadow: 0 0 0 3px var(--color-accent-100); }
.bi-input.is-invalid { border-color: var(--color-danger); }
.bi-input--sm { height: 44px; }
.bi-input--auto { width: auto; height: 42px; }

.bi-error { display: block; margin-top: 6px; font-size: 12.5px; color: var(--color-danger); }
.bi-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }

.bi-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; margin-bottom: 14px; }
.bi-check input[type="checkbox"],
.bi-check input[type="radio"] { margin-top: 3px; accent-color: var(--color-accent-600); width: 16px; height: 16px; }

/* Boxed radio row — delivery and payment choices. */
.bi-check--boxed { border: 1px solid var(--color-divider); padding: 14px; margin-bottom: 10px; align-items: center; }
.bi-check--boxed:hover { border-color: var(--color-accent-400); }
.bi-check__body { flex: 1; }
.bi-check__title { display: block; font-weight: 500; }
.bi-check__note { display: block; font-size: 13px; color: var(--ink-2); }
.bi-check__price { font-family: var(--font-heading); font-weight: 600; font-size: 16px; }

.bi-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.bi-form-row { display: flex; align-items: center; gap: 10px; }

/* Swatch/option picker on the product page. */
.bi-option {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--color-divider); background: #fff;
  padding: 9px 13px; font-size: 13.5px;
}
.bi-option:hover { border-color: var(--color-accent-400); }
.bi-option__swatch { width: 14px; height: 14px; display: block; border: 1px solid rgba(23,33,27,.18); }
.bi-option__note { color: var(--ink-2); font-size: 12px; }

/* Quantity stepper. */
.bi-qty { display: flex; align-items: center; border: 1px solid var(--color-divider); background: #fff; height: 52px; }
.bi-qty--sm { height: 44px; width: 132px; }
.bi-qty__btn {
  width: 44px; height: 100%; border: 0; background: transparent;
  cursor: pointer; display: grid; place-items: center; color: inherit;
}
.bi-qty--sm .bi-qty__btn { width: 38px; }
.bi-qty__input {
  width: 52px; height: 100%; border: 0; text-align: center;
  font: inherit; font-size: 15px; outline: none; background: transparent;
}
.bi-qty--sm .bi-qty__input { font-size: 14px; }

/* ==========================================================================
   9. Surfaces
   ========================================================================== */

.bi-panel { background: #fff; border: 1px solid var(--color-divider); padding: 24px; }
.bi-panel--soft { background: var(--color-accent-100); border-color: var(--color-accent-200); }
.bi-panel--translucent { background: rgba(255, 253, 247, .7); border: 0; padding: 24px 20px; }
.bi-panel + .bi-panel { margin-top: 22px; }
.bi-panel__title {
  margin: 0 0 16px; font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-800);
}

.bi-badge {
  display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; padding: 4px 9px;
  background: var(--color-accent-2-100); border: 1px solid var(--color-accent-2-300);
  color: var(--color-accent-2-800);
}
.bi-badge--new { background: var(--color-accent-100); border-color: var(--color-accent-300); color: var(--color-accent-800); }
.bi-badge--alert { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); }
.bi-badge--gold { background: var(--color-accent-2-300); border-color: var(--color-accent-2-500); color: var(--color-accent-2-900); }
.bi-badge--dark { background: var(--color-accent-800); border-color: var(--color-accent-900); color: var(--on-dark); }
/* Anchored inside a card's media area. */
.bi-badge--pinned { position: absolute; top: 12px; left: 12px; z-index: 1; }

.bi-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px;
  border: 1px solid var(--color-divider); background: transparent; color: var(--color-text);
  font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap;
}
.bi-chip:hover { border-color: var(--color-accent-500); color: var(--color-text); }
.bi-chip.is-active { background: var(--color-accent-800); border-color: var(--color-accent-800); color: var(--on-dark); }

.bi-chip--soft {
  height: auto; padding: 5px 10px; font-size: 12.5px; cursor: default;
  background: var(--color-accent-2-100); border-color: var(--color-accent-2-300);
  color: var(--color-accent-2-800);
}
.bi-chip--soft:hover { color: var(--color-accent-2-800); }

.bi-stars { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.bi-stars__value { color: var(--color-text); font-weight: 500; }

.bi-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bi-table th {
  text-align: left; font-family: var(--font-heading); font-weight: 600; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  padding: 0 0 10px; border-bottom: 1px solid var(--color-divider);
}
.bi-table td { padding: 16px 0; border-bottom: 1px solid var(--color-divider); vertical-align: top; }

/* Order/basket money breakdown. */
.bi-sum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14.5px; padding: 7px 0; }
.bi-sum__row--saving { color: var(--color-accent-700); }
.bi-sum__row--total {
  border-top: 1px solid var(--color-divider); margin-top: 8px; padding-top: 14px;
  font-family: var(--font-heading); font-weight: 600; font-size: 20px;
}

.bi-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-bottom: 22px; }
.bi-crumbs a { color: var(--ink-2); }
.bi-crumbs a:hover { color: var(--color-accent-700); }
.bi-crumbs__current { color: var(--color-text); }

.bi-pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 40px; }
.bi-pagination a,
.bi-pagination span {
  min-width: 42px; height: 42px; padding: 0 12px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--color-divider); background: #fff;
  color: var(--color-text); font-size: 14px;
}
.bi-pagination a:hover { border-color: var(--color-accent-400); color: var(--color-text); }
.bi-pagination .is-current { background: var(--color-accent-800); border-color: var(--color-accent-800); color: var(--on-dark); }
.bi-pagination .is-disabled { opacity: .4; }

.bi-empty { text-align: center; padding: 70px 20px; border: 1px dashed var(--color-divider); background: #fff; }
.bi-empty__title { margin: 0 0 8px; font-size: 26px; }
.bi-empty__text { margin: 0 0 22px; color: var(--ink-2); }

/* Small square image, used in summaries and order lines. */
.bi-thumb {
  position: relative; display: block; flex: none;
  border: 1px solid var(--color-divider); background: var(--color-accent-100);
}
/* The image is clipped, not the box — a count badge sitting proud of the
   corner must not be cut off by the thumbnail's own overflow. */
.bi-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.bi-thumb--xs { width: 38px; height: 38px; }
.bi-thumb--sm { width: 54px; height: 54px; }
.bi-thumb--md { width: 62px; height: 62px; }
.bi-thumb--lg { width: 84px; height: 84px; }
/* Quantity badge on a thumbnail. A ring in the page background separates it
   from whatever photo sits underneath, so it stays legible on a dark image;
   inset-inline-end keeps it on the outer corner in Arabic too. */
.bi-thumb__count {
  position: absolute; top: -3px; inset-inline-end: -6px; z-index: 2;
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent-600); color: var(--on-dark);
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
  box-shadow: 0 0 0 2px var(--color-bg), 0 1px 3px rgba(23, 33, 27, .28);
}

/* Square monogram standing in for a seller logo. */
.bi-avatar {
  display: grid; place-items: center; flex: none;
  background: var(--color-accent-800); color: var(--on-dark);
  font-family: var(--font-heading); font-weight: 600; line-height: 1;
}
/* A logo fills the mark edge to edge; a monogram keeps the solid ground. */
.bi-avatar--photo { background: #fff; overflow: hidden; }
.bi-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bi-avatar--xs { width: 24px; height: 24px; font-size: 13px; }
.bi-avatar--sm { width: 32px; height: 32px; font-size: 15px; }
.bi-avatar--md { width: 50px; height: 50px; font-size: 22px; }
.bi-avatar--lg { width: 54px; height: 54px; font-size: 24px; border: 2px solid #fff; }
.bi-avatar--xl { width: 96px; height: 96px; font-size: 42px; border: 3px solid var(--on-dark); }

/* ==========================================================================
   10. Chrome
   ========================================================================== */

/* --- announcement bar --- */
/* The masthead sits on the same navy as the hero and the footer, so the page
   is bookended by one colour instead of three. Everything in it is restated
   for a dark ground below rather than left to inherit ink on paper. */
.bi-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--hero-ground);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
}
.bi-header .bi-logo,
.bi-header .bi-logo:hover,
.bi-header .bi-tool { color: #fff; }
.bi-header .bi-tool:hover { color: var(--color-accent-300); }
.bi-header .bi-logo__word { color: #fff; }
.bi-header .bi-logo__accent { color: var(--color-accent-400); }
.bi-header .bi-catmenu__btn { border-color: rgba(255, 255, 255, .22); color: #fff; }
.bi-header .bi-catmenu__btn:hover,
.bi-header .bi-catmenu[open] .bi-catmenu__btn { border-color: var(--color-accent-400); background: rgba(255, 255, 255, .06); }
/* The search box keeps its white ground: it is the one thing on the bar you
   type into, and it has to look like a field rather than part of the band. */
.bi-header .bi-searchbar { background: #fff; border-color: transparent; }
.bi-burger { color: #fff; }
.bi-header__inner { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; gap: 16px; }
.bi-header__search { position: relative; flex: 1; min-width: 0; max-width: 560px; }
/* Pushed to the shell's right edge.
   The search box is capped at 620px, so once the nav came out of the row the
   leftover width was landing after the tools and leaving them floating short
   of the edge — the header no longer lined up with the page beneath it. The
   auto margin gives that space to the gap instead, so the logo sits on the
   left rule and the cart on the right one. */
/* The tools get their own room: a wider gap so the language, account and
   basket read as three controls rather than one clump, and little padding on
   the edge nearest the search — the auto margin already holds them apart, so
   the old spacing only pushed the cart off the page's right rule. */
.bi-header__tools {
  display: flex; align-items: center; gap: 12px; flex: none;
  margin-inline-start: auto; padding-inline-start: 4px;
}

.bi-logo { display: flex; align-items: center; gap: 10px; flex: none; color: var(--color-text); }
.bi-logo:hover { color: var(--color-text); }
.bi-logo__mark {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--color-accent-800); color: var(--on-dark);
  font-family: var(--font-heading); font-weight: 600; font-size: 19px; line-height: 1;
}
.bi-logo__word {
  font-family: var(--font-heading); font-weight: 600; font-size: 23px;
  letter-spacing: .06em; text-transform: uppercase;
}
/* "buyINN" — the tail in brand green. */
.bi-logo__accent { color: var(--color-accent-600); }

.bi-searchbar {
  display: flex; align-items: center; gap: 10px; height: 46px;
  border: 1px solid var(--color-divider); background: #fff; padding: 0 6px 0 12px;
}
.bi-searchbar:focus-within { border-color: var(--color-accent-400); }
.bi-searchbar__input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 14.5px; color: var(--color-text);
}
.bi-searchbar__submit { height: 34px; padding: 0 16px; font-size: 13.5px; letter-spacing: .06em; }

.bi-nav { display: flex; align-items: center; gap: 20px; flex: none; font-size: 14px; }
.bi-nav__link { color: var(--color-text); }
.bi-nav__link:hover { color: var(--color-accent-600); }
.bi-nav__link--accent { color: var(--color-accent-700); font-weight: 500; }

/* Header icon with a count bubble. */
.bi-tool { position: relative; width: 42px; height: 42px; display: grid; place-items: center; color: var(--color-text); }
.bi-tool:hover { color: var(--color-accent-600); }
.bi-tool__count {
  position: absolute; top: 6px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 600;
  background: var(--color-accent-600); color: var(--on-dark);
}
.bi-tool__count--gold { background: var(--color-accent-2-400); color: var(--color-accent-2-900); }

/* Account dropdown. Anchored to the trigger and mirrored under RTL via logical
   inset properties, so it never hangs off the edge in Arabic. */
.bi-menu { position: relative; }
.bi-menu__trigger { border: 0; background: none; font: inherit; }
.bi-menu__panel {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 80;
  min-width: 232px; padding: 6px;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  box-shadow: 0 12px 30px rgba(23, 33, 27, .13);
}
.bi-menu__panel[hidden] { display: none; }

.bi-menu__head { padding: 10px 12px 11px; border-bottom: 1px solid var(--color-divider); margin-bottom: 5px; }
.bi-menu__name { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; }
.bi-menu__meta { display: block; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }

.bi-menu__link {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--color-text); text-align: start;
}
.bi-menu__link:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.bi-menu__link--danger { color: var(--color-danger); }
.bi-menu__link--danger:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.bi-menu__count {
  margin-inline-start: auto; min-width: 20px; padding: 1px 6px;
  background: var(--color-accent-600); color: var(--on-dark);
  font-size: 11.5px; font-weight: 600; text-align: center;
}

/* Basket preview. Opens on hover and on keyboard focus, with a small bridge
   above the panel so the pointer can travel from tool to panel without the
   gap closing it. Suppressed on touch, where hover has no meaning and the
   trigger's own link to the basket is the right behaviour. */
.bi-cartmenu { position: relative; }
.bi-cartmenu__panel {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 80;
  width: 340px; max-width: calc(100vw - 32px); padding: 6px;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  box-shadow: 0 12px 30px rgba(23, 33, 27, .13);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.bi-cartmenu__panel::before { content: ""; position: absolute; inset-inline: 0; top: -8px; height: 8px; }

@media (hover: hover) {
  .bi-cartmenu:hover .bi-cartmenu__panel,
  .bi-cartmenu:focus-within .bi-cartmenu__panel { opacity: 1; visibility: visible; transform: none; }
}
.bi-cartmenu:focus-within .bi-cartmenu__panel { opacity: 1; visibility: visible; transform: none; }

.bi-cartmenu__head {
  margin: 0; padding: 9px 11px; font-size: 12.5px; color: var(--ink-2);
  border-bottom: 1px solid var(--color-divider);
}
.bi-cartmenu__list { list-style: none; margin: 0; padding: 4px; max-height: 292px; overflow-y: auto; }
.bi-cartmenu__item { display: flex; align-items: center; gap: 10px; padding: 8px 7px; }
.bi-cartmenu__item + .bi-cartmenu__item { border-top: 1px solid var(--color-divider); }
.bi-cartmenu__thumb {
  width: 46px; height: 46px; flex: none; overflow: hidden;
  background: #fff; border: 1px solid var(--color-divider);
}
.bi-cartmenu__detail { min-width: 0; flex: 1; }
.bi-cartmenu__name {
  display: block; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bi-cartmenu__name:hover { color: var(--color-accent-700); }
.bi-cartmenu__meta { display: block; font-size: 12px; color: var(--ink-2); }
.bi-cartmenu__line { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.bi-cartmenu__more { margin: 0; padding: 0 11px 8px; font-size: 12px; color: var(--ink-2); }

.bi-cartmenu__foot { padding: 11px; border-top: 1px solid var(--color-divider); display: grid; gap: 7px; }
.bi-cartmenu__total { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 3px; }

.bi-cartmenu__empty { padding: 26px 16px; text-align: center; color: var(--ink-2); display: grid; gap: 9px; justify-items: center; }
.bi-cartmenu__empty p { margin: 0; font-size: 14px; }

/* Language switch: names the language it will take you to, in that language's
   own script. Borderless like its icon siblings — the header tools read as a
   row of controls, not a row of boxes. No uppercasing, because Arabic has no
   case and forcing it only distorts the letterforms. */
/* A tool that carries a word rather than only a glyph. */
/* .bi-tool is a centred grid, which stacked the word under the glyph. A row
   is what was asked for, so the modifier says so rather than inheriting it. */
.bi-tool--labelled {
  width: auto; display: inline-flex; align-items: center;
  padding-inline: 6px 10px; gap: 7px;
}
.bi-tool__label { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; letter-spacing: 0; }

.bi-tool--lang {
  width: auto; min-width: 0; padding-inline: 6px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.bi-tool--lang:hover { color: var(--color-accent-600); }

.bi-burger {
  display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--color-text); cursor: pointer;
}

/* --- search discovery panel --- */
.bi-search-panel {
  position: absolute; top: 52px; left: 0; right: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px;
  padding: 18px 20px 20px;
  background: #fff; border: 1px solid var(--color-divider); box-shadow: var(--shadow-md);
}
.bi-search-panel__heading {
  margin: 0 0 9px; font-family: var(--font-heading); font-weight: 600; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.bi-search-panel__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bi-search-panel__list { display: flex; flex-direction: column; gap: 7px; }
.bi-search-panel__item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--color-text); }
.bi-search-panel__item--split {
  justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--color-divider); padding-bottom: 5px;
}
.bi-search-panel__products { display: flex; flex-direction: column; gap: 10px; }
.bi-search-panel__product { display: flex; align-items: center; gap: 10px; color: var(--color-text); }
.bi-search-panel__name { display: block; font-size: 13px; line-height: 1.25; }
.bi-search-panel__meta { display: block; font-size: 11.5px; color: var(--ink-2); }
.bi-search-panel__empty { font-size: 13px; color: var(--ink-2); }

/* --- mobile menu --- */
.bi-mobile-menu { border-top: 1px solid var(--color-divider); background: #fff; }
.bi-mobile-menu__inner { padding-top: 12px; padding-bottom: 16px; display: flex; flex-direction: column; }
.bi-mobile-menu__link {
  padding: 11px 0; border-bottom: 1px solid var(--color-divider);
  font-size: 15px; color: var(--color-text);
}
.bi-mobile-menu__link--accent { color: var(--color-accent-700); border-bottom: 0; }

/* --- department bar --- */

/* --- footer --- */
.bi-footer { background: var(--hero-ground); color: var(--on-dark-78); }
.bi-footer__inner { padding-top: 64px; padding-bottom: 30px; }
.bi-footer__grid { display: grid; gap: 34px 26px; }
.bi-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bi-footer__mark {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--color-accent-2-400); color: var(--color-accent-2-900);
  font-family: var(--font-heading); font-weight: 600; font-size: 18px;
}
.bi-footer__word {
  font-family: var(--font-heading); font-weight: 600; font-size: 21px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark);
}
.bi-footer__blurb { margin: 0 0 18px; font-size: 13.8px; line-height: 1.55; max-width: 30ch; }
.bi-footer__col-title {
  margin: 0 0 12px; font-family: var(--font-heading); font-weight: 600; font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark);
}
.bi-footer__link { font-size: 13.8px; color: var(--on-dark-78); }
.bi-footer__link:hover { color: var(--color-accent-2-300); }
.bi-footer__socials { display: flex; gap: 9px; }
.bi-footer__social {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .1);
  color: #fff; font-size: 13px; font-weight: 600;
}
.bi-footer__social:hover { background: var(--color-accent-600); color: #fff; }
.bi-footer__pays { display: flex; flex-wrap: wrap; gap: 8px; }

.bi-footer__bar {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255, 253, 247, .16);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
/* The marks sit on white tiles: every one of these networks is drawn for a
   light ground, and on the dark footer they would otherwise disappear. */
.bi-pay {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; min-width: 46px; padding: 0 8px;
  background: #fff; border-radius: 5px;
}
.bi-pay--art { height: 30px; width: auto; padding: 4px 8px; }
.bi-pay--text { font-size: 11.5px; font-weight: 600; color: #1d1f20; letter-spacing: .02em; }
.bi-footer__legal { margin: 0; font-size: 12.5px; color: rgba(255, 253, 247, .55); }
.bi-footer__legal a { color: rgba(255, 253, 247, .55); }
.bi-footer__legal a:hover { color: var(--color-accent-2-300); }

/* ==========================================================================
   11. Cards
   ========================================================================== */

/* --- product card --- */


/* Wishlist heart, top-right of the media area. */
/* The saved-state pulse belongs to the compact icon button only. Applied to a
   full-width button — as on the product page — scaling the whole element makes
   it visibly grow and shift the column, so there the icon alone reacts. */
.bi-icon-btn.bi-wish-btn { transition: transform .2s ease; transform: scale(1); }
.bi-icon-btn.bi-wish-btn.is-saved { transform: scale(1.12); }

.bi-btn.bi-wish-btn svg { transition: transform .2s ease; }
.bi-btn.bi-wish-btn.is-saved svg { transform: scale(1.15); }

/* Quick-add strip, revealed on hover; always visible on touch. */

/* Footer row of a card: who supplies this product. A link, so it doubles as a
   route into the seller's storefront. */
.bi-price-was { font-size: 13.5px; color: var(--ink-2); text-decoration: line-through; }

@media (hover: none) {
}

/* --- vendor card --- */
/* Fluid by default so a grid of sellers fills the row; the horizontal rails
   pin it to a fixed width because a scroller needs a predictable step. */
/* No photograph: a quiet panel of its own rather than the empty frame of a
   missing one. Two flat tones on the diagonal, in the brand's colours. */
/* The logo straddles the cover's lower edge.
   It used to do that with a -42px margin on a flex child inside an
   align-items:center row, which is two rules pulling the same box in
   opposite directions — the mark's height fed back into the row's height and
   the name never sat where it looked like it should. Taking it out of flow
   makes the position a fact rather than an outcome. */

/* Compact seller row on the vendors index and search results. */
.bi-vendor-row { display: flex; gap: 14px; padding: 20px; background: #fff; color: var(--color-text); }
.bi-vendor-row:hover { color: var(--color-text); }
.bi-vendor-row__name { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1.2; }
.bi-vendor-row__place { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.bi-vendor-row__stat { display: block; font-size: 12.5px; color: var(--color-accent-700); margin-top: 8px; }
.bi-vendor-row--compact { padding: 10px 14px; align-items: center; gap: 10px; border: 1px solid var(--color-divider); }

/* --- image tile (categories, collections) --- */
.bi-tile { position: relative; display: block; overflow: hidden; background: #fff; color: var(--color-text); }
.bi-tile:hover { color: var(--color-text); }
.bi-tile:hover .bi-zoom { transform: scale(1.07); }
.bi-tile__body {
  position: absolute; left: 18px; right: 18px; bottom: 16px; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.bi-tile__name {
  display: block; font-family: var(--font-heading); font-weight: 600;
  color: var(--on-dark); line-height: 1.1;
}
.bi-tile__count { display: block; font-size: 12.5px; color: var(--on-dark-78); margin-top: 3px; }
.bi-tile__cta {
  flex: none; display: flex; align-items: center; gap: 6px;
  background: rgba(255, 253, 247, .94); color: var(--color-accent-800);
  font-family: var(--font-heading); font-weight: 600; font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px;
}

/* --- promotional banner --- */
.bi-banner { position: relative; display: block; overflow: hidden; background: #fff; }
.bi-banner:hover .bi-zoom { transform: scale(1.04); }
.bi-banner--primary { min-height: 430px; color: var(--color-text); }
.bi-banner--secondary { min-height: 206px; }
.bi-banner__body { position: absolute; pointer-events: none; }
.bi-banner--primary .bi-banner__body { left: 34px; top: 34px; right: 34px; max-width: 330px; }
.bi-banner--secondary .bi-banner__body { left: 26px; right: 26px; bottom: 24px; }
/* Half-bleed variant: art on the right, copy on the left. */
.bi-banner__media--half { inset: 0 0 0 auto; width: 48%; }
.bi-banner--split .bi-banner__body { top: 26px; bottom: auto; right: auto; max-width: 50%; }
.bi-banner__eyebrow {
  display: inline-flex; margin-bottom: 16px; padding: 5px 10px;
  background: var(--color-accent-2-300); color: var(--color-accent-2-900);
  font-family: var(--font-heading); font-weight: 600; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
}
.bi-banner--secondary .bi-banner__eyebrow {
  margin-bottom: 10px; padding: 4px 9px; font-size: 10.5px; letter-spacing: .11em;
  background: var(--color-accent-100); border: 1px solid var(--color-accent-300);
  color: var(--color-accent-800);
}
.bi-banner__title {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(30px, 3.2vw, 42px); line-height: 1.04;
  letter-spacing: -.015em; margin-bottom: 12px;
}
.bi-banner--secondary .bi-banner__title { font-size: 27px; line-height: 1.06; margin-bottom: 7px; }
.bi-banner__text { display: block; font-size: 15px; color: var(--ink-2); margin-bottom: 22px; max-width: 32ch; }
.bi-banner--secondary .bi-banner__text { font-size: 13.5px; color: inherit; opacity: .85; margin-bottom: 12px; }
.bi-banner__cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-heading); font-weight: 600; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
/* Cards laid over dark photography flip their type to paper. */
.bi-on-dark { color: var(--on-dark); }
.bi-on-dark .bi-banner__text { color: var(--on-dark-78); }

/* --- icon feature (trust bar, confidence grid) --- */
.bi-feature { display: flex; align-items: flex-start; gap: 12px; }
.bi-feature__icon { flex: none; margin-top: 1px; }
.bi-feature__title { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: 1.2; }
.bi-feature__note { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }

.bi-feature--stacked { display: block; padding: 24px 20px; }
.bi-feature--stacked .bi-feature__icon { display: block; margin: 0 0 12px; }
.bi-feature--stacked .bi-feature__title { font-size: 17px; margin-bottom: 6px; }
.bi-feature--stacked .bi-feature__note { font-size: 13.8px; line-height: 1.5; margin-top: 0; }

/* --- numbered step (seller benefits) --- */
.bi-step { display: flex; gap: 12px; border-left: 1px solid var(--color-accent-300); padding-left: 14px; }
.bi-step__num {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: .1em; color: var(--color-accent-600);
}
.bi-step__title { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 16.5px; margin: 2px 0 3px; }
.bi-step__note { display: block; font-size: 13.2px; color: var(--ink-2); }
.bi-step--boxed { display: block; border-left: 0; padding: 24px 20px; background: #fff; }
.bi-step--boxed .bi-step__num { margin-bottom: 8px; }
.bi-step--boxed .bi-step__title { font-size: 18px; margin: 0 0 6px; }
.bi-step--boxed .bi-step__note { font-size: 13.8px; line-height: 1.5; }

/* ==========================================================================
   12. Pages
   ========================================================================== */

/* --- homepage hero --- */
.bi-hero {
  position: relative; overflow: hidden;
  background: var(--hero-ground);
  color: #fff;
}
.bi-hero__inner {
  position: relative; display: grid; gap: 48px; align-items: center;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  padding-top: 0; padding-bottom: 0;
}
.bi-hero__copy { padding: 60px 0 64px; min-width: 0; }
.bi-hero__title {
  margin: 0 0 18px; color: #fff;
  font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -.01em;
  text-wrap: balance;
}
.bi-hero__title-accent { display: block; color: var(--color-accent-400); }
.bi-hero__text {
  margin: 0 0 30px; max-width: 46ch;
  font-size: 16.5px; line-height: 1.65; color: rgba(255, 255, 255, .74);
  text-wrap: pretty;
}

/* Three proofs, side by side on a wide screen and stacked below it. */
.bi-hero__points {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px 34px;
}
.bi-hero__point { display: flex; align-items: center; gap: 10px; }
.bi-hero__point-icon {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .09);
}
.bi-hero__point-title { display: block; font-size: 14px; font-weight: 600; color: #fff; }
.bi-hero__point-note { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .58); }

/* The photograph runs to the edge of the window rather than stopping at the
   shell, so the hero reads as one band instead of a picture in a box. */
.bi-hero__art { position: relative; align-self: stretch; min-height: 420px; margin-inline-end: calc(50% - 50vw); }
.bi-hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The ground washes over the near edge of the photograph and lets go across
   it, so the two halves of the band meet in a fade rather than on a hard
   vertical seam. Drawn with the ground's own colour, and mirrored in rtl.css
   for the Arabic layout, where the picture sits on the other side. */
.bi-hero__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgb(16, 34, 47) 0%, rgba(16, 34, 47, .82) 14%, rgba(16, 34, 47, .32) 42%, rgba(16, 34, 47, 0) 72%),
    linear-gradient(to bottom, rgba(16, 34, 47, .34) 0%, rgba(16, 34, 47, 0) 26%, rgba(16, 34, 47, .34) 100%);
}

@media (max-width: 900px) {
  .bi-hero__inner { grid-template-columns: 1fr; gap: 0; }
  .bi-hero__copy { padding: 52px 0 40px; order: 2; }
  .bi-hero__art {
    order: 1; min-height: 260px; margin-inline: calc(50% - 50vw);
  }
}
.bi-discovery__collage { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 120px; gap: 12px; }
.bi-discovery__cell {
  position: relative; display: block; overflow: hidden;
  border: 1px solid rgba(255, 253, 247, .25);
}
.bi-discovery__cell--lead { grid-column: span 2; grid-row: span 2; }
.bi-stat-row { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 34px; }
.bi-stat__value { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 30px; }
.bi-stat__label { font-size: 13px; color: var(--on-dark-70); }

/* --- new-arrivals mosaic --- */
.bi-arrivals { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(0, auto); gap: 18px; }
.bi-arrivals__lead {
  grid-column: span 2; grid-row: span 2; position: relative; display: block;
  min-height: 100%; overflow: hidden; background: var(--color-accent-100); color: var(--color-text);
}
.bi-arrivals__lead:hover .bi-zoom { transform: scale(1.04); }
.bi-arrivals__body { position: absolute; left: 24px; right: 24px; bottom: 22px; color: var(--on-dark); pointer-events: none; }
.bi-arrivals__vendor {
  display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent-2-300); margin-bottom: 6px;
}
.bi-arrivals__name {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.06; margin-bottom: 8px;
}
.bi-arrivals__price { font-family: var(--font-heading); font-weight: 600; font-size: 24px; }
.bi-arrivals__note { font-size: 13px; color: rgba(255, 253, 247, .8); }

/* --- spotlight --- */
.bi-spotlight { position: relative; overflow: hidden; }
.bi-spotlight__art { position: relative; min-height: 470px; background: #fff; }
.bi-spotlight__flag {
  position: absolute; top: -1px; left: -1px; padding: 8px 14px;
  background: var(--color-accent-800); color: var(--on-dark);
  font-family: var(--font-heading); font-weight: 600; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase;
}
.bi-spotlight__title { margin: 0 0 6px; font-size: clamp(30px, 3.3vw, 42px); line-height: 1.04; letter-spacing: -.015em; }
.bi-spotlight__byline { margin: 0 0 18px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-800); }
.bi-spotlight__byline a { color: var(--color-accent-800); border-bottom: 1px solid var(--color-accent-300); }
.bi-spotlight__story { margin: 0 0 22px; font-size: 16.5px; line-height: 1.6; color: var(--ink-body); max-width: 46ch; text-wrap: pretty; }
.bi-spotlight__pricing { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.bi-spotlight__price { font-family: var(--font-heading); font-weight: 600; font-size: 32px; }
.bi-spotlight__was { font-size: 15px; color: var(--ink-2); text-decoration: line-through; }
.bi-spotlight__label {
  margin: 0 0 10px; font-family: var(--font-heading); font-weight: 600; font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-800);
}
.bi-spotlight__variants { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.bi-swatch-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--color-divider); background: #fff; padding: 7px 12px; font-size: 13px;
}

/* --- sell section --- */
.bi-sell__art { position: relative; min-height: 470px; background: var(--color-accent-100); margin: 0; }
.bi-sell__title { margin: 0 0 16px; font-size: clamp(30px, 3.5vw, 46px); line-height: 1.04; letter-spacing: -.02em; max-width: 22ch; }
.bi-sell__text { margin: 0 0 30px; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 48ch; text-wrap: pretty; }

/* --- inner page header --- */
.bi-page-header {
  background: linear-gradient(170deg, #EAF7EF 0%, #FFFDF7 70%);
  border-bottom: 1px solid var(--color-divider);
}
.bi-page-header__inner { padding-top: 34px; padding-bottom: 42px; }
.bi-page-header__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.bi-page-header__copy { flex: 1 1 460px; min-width: 0; }
.bi-page-header__art { flex: none; width: 220px; height: 130px; position: relative; background: #fff; overflow: hidden; }

/* --- product detail --- */
.bi-product__gallery { position: relative; background: #fff; aspect-ratio: 1; overflow: hidden; }
.bi-product__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.bi-product__thumb {
  width: 76px; height: 76px; padding: 0; overflow: hidden; cursor: pointer;
  background: #fff; border: 1px solid var(--color-divider);
}
.bi-product__thumb.is-active { border-color: var(--color-accent-600); }
.bi-product__vendor-link {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-700);
}
.bi-product__title { margin: 0 0 12px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.06; letter-spacing: -.02em; }
.bi-product__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.bi-product__pricing { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.bi-product__pack {
  margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--color-text);
}
.bi-product__saving {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 22px; font-size: 14.5px; font-weight: 600;
  color: var(--color-accent-700);
}
.bi-product__saving::before {
  content: ""; width: 7px; height: 7px; flex: none;
  background: var(--color-accent-400); border-radius: 50%;
}
.bi-product__price { font-family: var(--font-heading); font-weight: 600; font-size: 36px; }
.bi-product__was { font-size: 16px; color: var(--ink-2); text-decoration: line-through; }
.bi-product__desc { margin: 0 0 26px; font-size: 16px; line-height: 1.62; color: var(--ink-body); max-width: 56ch; text-wrap: pretty; }
.bi-product__buy { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.bi-product__assurances { display: grid; gap: 12px; }
.bi-product__assurance { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }

/* --- reviews --- */
.bi-reviews__score { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.bi-reviews__average { font-family: var(--font-heading); font-weight: 600; font-size: 44px; }
.bi-reviews__bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 12.5px; }
.bi-reviews__bar-label { width: 34px; color: var(--ink-2); }
.bi-reviews__bar { flex: 1; height: 6px; background: var(--color-divider); display: block; }
.bi-reviews__bar-fill { display: block; height: 100%; background: var(--color-accent-2-400); }
.bi-reviews__bar-count { width: 34px; text-align: right; color: var(--ink-2); }
.bi-review { padding: 20px 0; border-bottom: 1px solid var(--color-divider); }
.bi-review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bi-review__title { font-family: var(--font-heading); font-weight: 600; font-size: 15px; }
.bi-review__body { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-body); }
.bi-review__by { margin: 0; font-size: 12.5px; color: var(--ink-2); }

/* --- basket & checkout --- */
.bi-line { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.bi-line__body { flex: 1; min-width: 0; }
.bi-line__vendor { display: block; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-accent-700); }
.bi-line__name { display: block; font-size: 14.5px; font-weight: 500; color: var(--color-text); }
.bi-line__meta { display: block; font-size: 12.5px; color: var(--ink-2); }
.bi-line__total { font-family: var(--font-heading); font-weight: 600; font-size: 17px; }

.bi-cart-line__name { display: block; font-size: 15px; font-weight: 500; color: var(--color-text); line-height: 1.3; }
.bi-cart-line__variant { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.bi-cart-line__unit { display: block; font-size: 13px; color: var(--ink-2); margin-top: 5px; }

.bi-review-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; max-height: 340px; overflow-y: auto; }
.bi-review-line { display: flex; gap: 12px; align-items: flex-start; }
.bi-review-line__thumb { position: relative; }
.bi-review-line__body { flex: 1; min-width: 0; }
.bi-review-line__name { display: block; font-size: 13.5px; line-height: 1.3; }
.bi-review-line__variant { display: block; font-size: 12px; color: var(--ink-2); }
.bi-review-line__price { font-size: 14px; font-weight: 500; white-space: nowrap; }

.bi-confirm { max-width: 760px; margin: 0 auto; }
.bi-confirm__head { text-align: center; margin-bottom: 38px; }
.bi-confirm__seal {
  width: 64px; height: 64px; margin: 0 auto 20px; display: grid; place-items: center;
  background: var(--color-accent-100); border: 1px solid var(--color-accent-300);
}
.bi-confirm__title { margin: 0 0 12px; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.02em; }
.bi-confirm__text { margin: 0; font-size: 16px; color: var(--ink-2); }
.bi-facts { display: flex; gap: 26px; flex-wrap: wrap; justify-content: space-between; }
.bi-fact__value { font-family: var(--font-heading); font-weight: 600; font-size: 20px; }
.bi-address { margin: 0; font-size: 14.5px; line-height: 1.6; }

/* --- account --- */
.bi-account-nav { display: flex; flex-direction: column; border: 1px solid var(--color-divider); background: #fff; }
.bi-account-nav__link { padding: 13px 16px; font-size: 14px; color: var(--color-text); border-bottom: 1px solid var(--color-divider); }
.bi-account-nav__link:last-child { border-bottom: 0; }
.bi-account-nav__link:hover { background: var(--color-accent-100); color: var(--color-text); }
.bi-account-nav__link.is-current {
  background: var(--color-accent-800); color: var(--on-dark);
  font-family: var(--font-heading); font-weight: 600; letter-spacing: .04em;
}
.bi-account-nav__signout {
  width: 100%; text-align: left; padding: 13px 16px; font: inherit; font-size: 14px;
  color: var(--ink-2); background: none; border: 0;
  border-top: 1px solid var(--color-divider); cursor: pointer;
}
.bi-account-nav__signout:hover { background: var(--color-accent-100); }

.bi-stat-card__value { font-family: var(--font-heading); font-weight: 600; font-size: 34px; }
.bi-stat-card__text { display: block; font-size: 14px; line-height: 1.5; margin-top: 4px; }

.bi-order-card { margin-bottom: 14px; }
.bi-order-card__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.bi-order-card__total { font-family: var(--font-heading); font-weight: 600; font-size: 20px; }
.bi-order-card__thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.bi-order-card__more {
  width: 54px; height: 54px; display: grid; place-items: center;
  border: 1px solid var(--color-divider); font-size: 13px; color: var(--ink-2);
}

/* Order progress tracker. */
.bi-progress { display: flex; gap: 6px; flex-wrap: wrap; }
/* Six steps, not four: the old 110px floor pushed the last two onto a second
   row on every laptop. */
.bi-progress__step { flex: 1; min-width: 92px; }
.bi-progress__bar { display: block; height: 5px; background: var(--color-divider); margin-bottom: 8px; }
.bi-progress__step.is-done .bi-progress__bar { background: var(--color-accent-600); }
.bi-progress__label { font-size: 12.5px; color: var(--ink-2); }
.bi-progress__step.is-done .bi-progress__label { color: var(--color-accent-800); font-weight: 600; }
/* Where the order is *now*, as opposed to everywhere it has been. With six
   steps the block of green alone no longer makes that obvious. */
.bi-progress__step[aria-current="step"] .bi-progress__bar { background: var(--color-accent-800); }
.bi-progress__step[aria-current="step"] .bi-progress__label { color: var(--ink-1); }

/* An order that has stepped off the line explains itself in words instead. */
.bi-order__notice {
  margin: 18px 0 0; padding: 12px 14px; border-radius: 10px;
  background: var(--color-surface-2, #f6f8f6); border: 1px solid var(--color-divider);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}

/* --- auth --- */
.bi-auth { max-width: 460px; margin: 0 auto; }
.bi-auth__title { margin: 0 0 10px; font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -.02em; }
.bi-auth__text { margin: 0 0 28px; color: var(--ink-2); font-size: 15px; }
.bi-auth__options { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.bi-auth__small { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-2); }

/* ==========================================================================
   13. Feedback
   ========================================================================== */

/* Bottom centre, not top right: feedback follows the button that caused it,
   and the thumb reaches it on a phone. Centred with translate rather than
   `left: 0; right: 0` so the stack shrink-wraps its widest toast instead of
   spanning the viewport and catching clicks across the whole strip. */
.bi-flash-stack {
  position: fixed; inset-block-end: 26px;

  /*
   * `left`, not `inset-inline-start`.
   *
   * Centring is direction-agnostic, but this pair was not: inset-inline-start
   * FLIPS in RTL (it becomes `right`) while translateX does NOT — it is always
   * along the physical X axis. In Arabic the two therefore pulled the same way
   * instead of cancelling, and a 320px toast landed 320px left of centre — its
   * own full width. Physical `left: 50%` with `translateX(-50%)` centres
   * correctly in both directions, which is why the pairing is conventional.
   */
  left: 50%; transform: translateX(-50%);
  z-index: 200;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: max-content; max-width: min(440px, calc(100vw - 32px));
  pointer-events: none;   /* the page underneath stays usable… */
}
.bi-flash { pointer-events: auto; }  /* …but the toast itself is clickable */

.bi-flash {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px 13px 13px;
  font-size: 14.5px; line-height: 1.45;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 34, 24, .16), 0 2px 6px rgba(16, 34, 24, .07);
  animation: bi-toast-in .32s cubic-bezier(.16, 1, .3, 1) both;
}

/* The tone lives in a coloured chip, not in the whole panel: the message stays
   on white so it is legible at any length, and the chip carries the meaning. */
.bi-flash__icon {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
}
.bi-flash--success .bi-flash__icon { background: var(--color-accent-100); color: var(--color-accent-700); }
.bi-flash--error .bi-flash__icon { background: var(--color-danger-bg); color: var(--color-danger); }

.bi-flash--success { border-color: var(--color-accent-300); }
.bi-flash--error { border-color: var(--color-danger-border); }

.bi-flash__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.bi-flash__close {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-2); opacity: .7;
  transition: background .14s ease, opacity .14s ease;
}
.bi-flash__close:hover { opacity: 1; background: var(--color-surface-2, #f2f5f3); }

/* A thin bar counting down the auto-dismiss, so a toast that vanishes never
   feels like it disappeared for no reason. */
.bi-flash__timer {
  position: absolute; inset-inline: 10px; inset-block-end: 4px; height: 2px;
  border-radius: 2px; background: currentColor; opacity: .28;
  /* Drains from the reading edge: left in English, right in Arabic. */
  transform-origin: left center;
  animation: bi-toast-timer 6s linear both;
}
.bi-flash { position: relative; overflow: hidden; }
.bi-flash.is-leaving { animation: bi-toast-out .22s ease both; }
.bi-flash:hover .bi-flash__timer { animation-play-state: paused; }

@keyframes bi-toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bi-toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes bi-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .bi-flash, .bi-flash.is-leaving { animation: none; }
  .bi-flash__timer { animation-duration: 6s; }
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */

/* Shown only above / below the 1000px breakpoint. */
.bi-desktop-only { display: flex; }
.bi-mobile-only { display: none; }

@media (max-width: 1100px) {
  .bi-sidebar-layout,
  .bi-sidebar-layout--right,
  .bi-sidebar-layout--right-wide { grid-template-columns: 1fr; gap: 26px; }
  .bi-sticky { position: static; }
}

@media (max-width: 1000px) {
  .bi-desktop-only { display: none !important; }
  .bi-mobile-only { display: flex !important; }
  .bi-burger { display: flex; }

  .bi-hero__inner { flex-direction: column; }
  .bi-hero__art { width: 100%; min-width: 0; }

  .bi-split,
  .bi-split--wide-left,
  .bi-split--wide-right { grid-template-columns: 1fr; }

  .bi-mosaic { grid-template-columns: repeat(2, 1fr); }
  .bi-grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .bi-arrivals { grid-template-columns: repeat(2, 1fr); }
  .bi-arrivals__lead { grid-column: span 2; grid-row: auto; min-height: 360px; }

  .bi-banner__media--half { inset: 0; width: 100%; }
  .bi-banner--split .bi-banner__body { max-width: none; }
}

@media (max-width: 820px) {
  .bi-grid--products,
  .bi-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bi-form-grid { grid-template-columns: 1fr; }
  .bi-section { padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm); }
  .bi-search-panel,
  .bi-search-panel__browse { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .bi-shell { padding-left: var(--shell-pad-sm); padding-right: var(--shell-pad-sm); }
  .bi-arrivals { grid-template-columns: 1fr; }
  .bi-arrivals__lead { grid-column: span 1; }
  /* Tiles carry their own span; at one column that would leave a phantom second. */
  .bi-mosaic { grid-template-columns: 1fr; }
  .bi-mosaic > .bi-tile { grid-column: span 1 !important; }
  .bi-hero__art { min-width: 0; }
}

@media (max-width: 460px) {
  .bi-grid--products,
  .bi-grid--3,
  .bi-grid--2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Product tabs — description / reviews
   ==========================================================================
   Panels are visible by default. app.js adds `is-ready`, which is what turns
   the block into a real tab set; without JavaScript both panels simply stack
   and nothing becomes unreachable. */
.bi-tabs__list {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--color-divider); margin-bottom: 26px;
}
.bi-tabs__tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: 15px;
  letter-spacing: .04em; color: var(--ink-2);
}
.bi-tabs__tab:hover { color: var(--color-text); }
.bi-tabs__tab[aria-selected="true"] { color: var(--color-accent-700); border-bottom-color: var(--color-accent-600); }
.bi-tabs__tab:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: -2px; }
.bi-tabs__count {
  min-width: 22px; padding: 1px 7px; border-radius: 20px;
  background: var(--color-surface); color: var(--color-accent-800);
  font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0;
}

.bi-tabs__panel + .bi-tabs__panel { margin-top: 34px; }
.bi-tabs.is-ready .bi-tabs__panel { display: none; }
.bi-tabs.is-ready .bi-tabs__panel.is-active { display: block; margin-top: 0; }

/* --- Review form --------------------------------------------------------- */
.bi-review-form {
  padding: 20px; margin-bottom: 28px;
  background: var(--color-surface); border: 1px solid var(--color-divider);
}
.bi-review-form__title {
  margin: 0 0 14px; font-family: var(--font-heading); font-weight: 600; font-size: 17px;
}

.bi-review-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; margin-bottom: 28px;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  font-size: 14px; color: var(--ink-body);
}
.bi-review-note svg { flex: none; margin-top: 1px; color: var(--color-accent-700); }
.bi-review-note a { color: var(--color-accent-700); font-weight: 600; text-decoration: underline; }
.bi-review-note em { font-style: normal; color: var(--ink-2); }

/* Star picker. The inputs are ordered 5→1 in the markup so a plain sibling
   selector can light up the chosen star and everything after it, which keeps
   this working without a line of JavaScript. */
.bi-rating-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.bi-rating-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.bi-rating-input label {
  font-size: 27px; line-height: 1; cursor: pointer;
  color: var(--color-divider); transition: color .12s ease;
}
.bi-rating-input input:checked ~ label,
.bi-rating-input label:hover,
.bi-rating-input label:hover ~ label { color: var(--color-accent-2-400); }
.bi-rating-input input:focus-visible + label { outline: 2px solid var(--color-accent-600); outline-offset: 2px; }

/* Borderless icon button — used where the control sits inside another framed
   surface (a basket row), so a second box would only add noise. */
.bi-icon-btn--bare { border-color: transparent; background: transparent; }
.bi-icon-btn--bare:hover { border-color: transparent; background: var(--color-surface); color: var(--color-danger); }

/* The quantity stepper supplies its own + and − controls, so the browser's
   native spinner is a duplicate sitting on top of the number. */
.bi-qty__input { -moz-appearance: textfield; appearance: textfield; }
.bi-qty__input::-webkit-outer-spin-button,
.bi-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

/* Short orientation blurb in the buy box. */
.bi-product__about {
  padding: 14px 16px; margin: 18px 0 22px;
  background: var(--color-surface); border-inline-start: 3px solid var(--color-accent-400);
}
.bi-product__about-title {
  margin: 0 0 4px; font-family: var(--font-heading); font-weight: 600;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700);
}
.bi-product__about-body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-body); }

/* ==========================================================================
   Checkout — saved addresses and the delivery pin
   ========================================================================== */
.bi-addr-picker {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px; margin-bottom: 24px;
}
.bi-addr-card {
  display: flex; gap: 10px; padding: 13px 14px; cursor: pointer;
  background: #fff; border: 1px solid var(--color-divider);
  transition: border-color .12s ease, background .12s ease;
}
.bi-addr-card:hover { border-color: var(--color-accent-400); }
.bi-addr-card input { margin: 2px 0 0; accent-color: var(--color-accent-600); flex: none; }
.bi-addr-card:has(input:checked) { border-color: var(--color-accent-600); background: var(--color-accent-100); }
.bi-addr-card__body { min-width: 0; }
.bi-addr-card__head {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-weight: 600; font-size: 14px; margin-bottom: 3px;
}
.bi-addr-card__lines { display: block; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.bi-addr-card--new { border-style: dashed; }

.bi-map { margin-top: 22px; }
.bi-map__head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.bi-map__head > div { flex: 1; min-width: 200px; }
.bi-map__canvas {
  height: 300px; width: 100%;
  border: 1px solid var(--color-divider); background: var(--color-surface);
  z-index: 0; /* keep Leaflet panes under the header dropdowns */
}
.bi-map__readout {
  margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; direction: ltr;
}

/* ==========================================================================
   Checkout — card details
   ========================================================================== */
.bi-cardbox {
  padding: 18px; margin: 4px 0 18px;
  background: var(--color-surface); border: 1px solid var(--color-divider);
}
.bi-cardbox[hidden] { display: none; }
.bi-cardbox__saved { display: grid; gap: 8px; margin-bottom: 16px; }
.bi-cardbox__form[hidden] { display: none; }

.bi-cardpick {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer;
  background: #fff; border: 1px solid var(--color-divider);
}
.bi-cardpick:hover { border-color: var(--color-accent-400); }
.bi-cardpick:has(input:checked) { border-color: var(--color-accent-600); background: var(--color-accent-100); }
.bi-cardpick input { accent-color: var(--color-accent-600); flex: none; }
.bi-cardpick__label { display: block; font-weight: 600; font-size: 14px; }
.bi-cardpick__meta { display: block; font-size: 12.5px; color: var(--ink-2); }
.bi-cardpick--new { border-style: dashed; }

.bi-cardbox__note {
  display: flex; align-items: center; gap: 7px; margin: 14px 0 0;
  font-size: 12.5px; color: var(--ink-2);
}
.bi-cardbox__note svg { flex: none; color: var(--color-accent-700); }

/* A row saving in the background dims rather than jumping. */
[data-autosubmit].is-saving { opacity: .55; transition: opacity .12s ease; }

/* ==========================================================================
   Basket rows — column alignment
   ==========================================================================
   The table mixes pictures, wrapping names, a stepper and figures. Fixing the
   vertical rhythm to the middle and right-aligning the numeric columns keeps
   the eye on one line across the row. */
.bi-cart-table td, .bi-cart-table th { vertical-align: middle; }
.bi-cart-table td.bi-line__total, .bi-cart-table th.bi-num { text-align: end; }
.bi-cart-table .bi-qty { margin: 0; }
.bi-cart-line__name { display: block; font-weight: 500; line-height: 1.35; }
.bi-cart-line__unit, .bi-cart-line__variant { display: block; font-size: 12.5px; color: var(--ink-2); }
.bi-line__total { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

/* ==========================================================================
   Single order
   ==========================================================================
   Facts across the top on one baseline, then the progress rail, then the
   lines. Every figure is tabular so the column reads straight down. */
.bi-order__summary { margin-bottom: 18px; }
.bi-order__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px; align-items: start;
}
.bi-order__fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bi-order__fact--end { align-items: flex-end; text-align: end; }
.bi-order__fact-label {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
}
.bi-order__fact-value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bi-order__fact-value--lg { font-family: var(--font-heading); font-size: 24px; line-height: 1.1; }

.bi-order__progress { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-divider); }

.bi-order__items { display: grid; }
.bi-order__item {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: 13px 0; border-bottom: 1px solid var(--color-divider);
}
.bi-order__item:last-of-type { border-bottom: 0; }
.bi-order__item-thumb { position: relative; }
.bi-order__item-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bi-order__item-unit {
  font-size: 13px; color: var(--ink-2); white-space: nowrap;
  font-variant-numeric: tabular-nums; text-align: end;
}
.bi-order__item-total {
  font-size: 15px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-align: end; min-width: 88px;
}

.bi-order__dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin: 0; font-size: 14px; }
.bi-order__dl dt { color: var(--ink-2); }
.bi-order__dl dd { margin: 0; font-weight: 500; }

@media (max-width: 620px) {
  .bi-order__item { grid-template-columns: auto minmax(0, 1fr); }
  .bi-order__item-unit, .bi-order__item-total { grid-column: 2; text-align: start; }
}

/* --- Map search ---------------------------------------------------------- */
.bi-mapsearch { position: relative; margin-bottom: 10px; }
.bi-mapsearch__icon {
  position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-2); pointer-events: none; display: grid;
}
.bi-mapsearch__input { padding-inline-start: 38px; padding-inline-end: 38px; }
.bi-mapsearch__input::-webkit-search-cancel-button { display: none; }
.bi-mapsearch__clear {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--ink-2);
}
.bi-mapsearch__clear:hover { color: var(--color-text); }

.bi-mapsearch__results {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 20;
  margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow-y: auto;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  box-shadow: 0 10px 26px rgba(23, 33, 27, .14);
}
.bi-mapsearch__results[hidden] { display: none; }
.bi-mapsearch__result { padding: 9px 11px; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.bi-mapsearch__result:hover, .bi-mapsearch__result:focus-visible {
  background: var(--color-accent-100); color: var(--color-accent-800); outline: none;
}
.bi-mapsearch__empty { padding: 11px; font-size: 13.5px; color: var(--ink-2); }

/* --- Saved cards --------------------------------------------------------- */
.bi-cardtile__brand {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; color: var(--color-accent-700);
}
.bi-cardtile__number {
  margin: 0 0 10px; font-size: 18px; letter-spacing: .08em;
  font-variant-numeric: tabular-nums; direction: ltr; text-align: start;
}
.bi-cardtile__meta { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.bi-cardtile__expired { color: var(--color-danger); font-weight: 600; }
.bi-cardtile.is-expired { border-color: var(--color-danger-border); background: var(--color-danger-bg); }

/* --- Labelled address -----------------------------------------------------
   A fixed label column so rows line up down the page and across the two
   panels sitting side by side — the delivery and billing addresses read as
   one table, not two unrelated blocks. */
.bi-addrlist {
  display: grid; grid-template-columns: 108px minmax(0, 1fr);
  gap: 8px 14px; margin: 0; font-size: 14px; align-items: baseline;
}
.bi-addrlist dt { color: var(--ink-2); font-size: 12.5px; }
.bi-addrlist dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .bi-addrlist { grid-template-columns: 92px minmax(0, 1fr); gap: 7px 10px; }
}

/* The order's detail panels share a baseline and stretch to the tallest, so
   the row of cards has one top and one bottom edge. */
/* Panels laid out in a grid sit side by side, so the stacking margin from
   `.bi-panel + .bi-panel` does not apply — left in place it pushes every panel
   after the first down the row, which both misaligns their tops and leaves
   them shorter than their neighbour. */
.bi-grid > .bi-panel + .bi-panel { margin-top: 0; }

/* Equal height across the row, and the content column fills the panel so two
   cards with different amounts to say still end on the same line. */
.bi-order__panels { align-items: stretch; }
.bi-order__panels > .bi-panel { display: flex; flex-direction: column; }
.bi-order__panels > .bi-panel > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Cards in a grid
   ==========================================================================
   A grid already gives every card in a row the same height. What it does not
   do is align what is *inside* them, so a card with a short address ended up
   with its buttons floating halfway up while its neighbour's sat at the foot.

   Making each card a column and pushing the action row down with `margin-top:
   auto` puts every set of buttons on one line, whatever the copy above it
   does. The same trick lines up the figures on the dashboard tiles. */
.bi-grid > .bi-panel { display: flex; flex-direction: column; }

.bi-panel__actions { margin-top: auto; padding-top: 14px; }

/* A submit button ending a card in a grid — the profile forms — drops to the
   foot for the same reason, so the two panels finish on one line even when one
   form asks for more than the other. */
.bi-grid > .bi-panel > .bi-btn:last-child { margin-top: auto; }

/* Stat tiles: label at the top, figure on a shared baseline at the foot. */
.bi-grid--auto-narrow > .bi-panel .bi-stat-card__value,
.bi-grid--auto-narrow > .bi-panel .bi-stat-card__text { margin-top: auto; }

/* ==========================================================================
   Saved address card
   ==========================================================================
   Type chip and default flag on one line, the building as the heading, the
   full address beneath, then the map pin — the part a driver actually uses —
   on a row of its own rather than buried in the text. Actions last, pinned to
   the foot so every card in the row ends level.

   Rendered in the storefront's own green rather than the reference's red: the
   rest of this account area is green, and a second accent colour would read as
   a different product bolted on. */
.bi-addrcard {
  position: relative; display: flex; flex-direction: column;
  padding: 18px; background: #fff;
  border: 1px solid var(--color-divider);
}
.bi-addrcard.is-default { border-inline-start: 3px solid var(--color-accent-600); }

.bi-addrcard__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.bi-addrcard__type {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--color-surface); color: var(--color-text);
  font-size: 12.5px; font-weight: 600;
}
.bi-addrcard__type svg { color: var(--color-accent-700); flex: none; }

.bi-addrcard__flag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-inline-start: auto; padding: 5px 10px; border-radius: 999px;
  background: var(--color-accent-100); color: var(--color-accent-700);
  border: 1px solid var(--color-accent-400);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}

.bi-addrcard__title {
  margin: 0 0 6px; font-family: var(--font-heading);
  font-size: 19px; font-weight: 600; line-height: 1.25;
}
.bi-addrcard__lines { flex: 1; margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-body); }

.bi-addrcard__map {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 14px;
  background: var(--color-accent-100); border: 1px solid var(--color-accent-400);
}
.bi-addrcard__map.is-empty { background: var(--color-surface); border-color: var(--color-divider); }
.bi-addrcard__map-icon {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: 50%; background: #fff; color: var(--color-accent-700);
}
.bi-addrcard__map.is-empty .bi-addrcard__map-icon { color: var(--ink-2); }
.bi-addrcard__map-text { font-size: 13.5px; font-weight: 500; }
.bi-addrcard__map-link {
  display: inline-flex; align-items: center; gap: 5px;
  margin-inline-start: auto; font-size: 12.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--color-accent-700);
  white-space: nowrap;
}
.bi-addrcard__map-link:hover { text-decoration: underline; }

/* Edit and Default share a line; Remove takes the one below.

   The forms are `display: contents`, so the grid items are the buttons inside
   them — a span set on the form itself would apply to a box that is never
   generated. The span therefore belongs on the button. */
.bi-addrcard__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: auto;
}
.bi-addrcard__actions > form { display: contents; }
.bi-addrcard__remove .bi-addrcard__btn { grid-column: 1 / -1; }

.bi-addrcard__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 42px; padding: 0 12px; cursor: pointer;
  background: #fff; border: 1px solid var(--color-divider); color: var(--color-text);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.bi-addrcard__btn:hover { background: var(--color-surface); border-color: var(--color-accent-400); }
.bi-addrcard__btn--edit {
  background: var(--color-accent-100); border-color: var(--color-accent-400);
  color: var(--color-accent-700);
}
.bi-addrcard__btn--edit:hover { background: var(--color-accent-100); border-color: var(--color-accent-600); }
.bi-addrcard__remove .bi-addrcard__btn:hover { color: var(--color-danger); border-color: var(--color-danger-border); background: var(--color-danger-bg); }

/* A default card has no "make default" button, so Edit spans the row. */
.bi-addrcard.is-default .bi-addrcard__actions > .bi-addrcard__btn--edit { grid-column: 1 / -1; }

/* --- Live search results -------------------------------------------------
   The four browse lists used to be direct children of the panel's own grid,
   which laid them out two across: trending beside recent, categories beside
   suggested. Wrapping them so the live results could replace them made the
   whole set a single grid item, collapsing it into one column — so the
   wrapper carries the same two-column grid the panel had. */
.bi-search-panel__results,
.bi-search-panel__browse { grid-column: 1 / -1; }

.bi-search-panel__browse {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; align-items: start;
}

.bi-search-panel__results { display: grid; gap: 6px; }
.bi-search-panel__results[hidden], .bi-search-panel__browse[hidden] { display: none; }
.bi-search-panel__all {
  display: block; margin-top: 6px; padding: 10px; text-align: center;
  background: var(--color-surface); color: var(--color-accent-700);
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
}
.bi-search-panel__all:hover { background: var(--color-accent-100); }

/* ==========================================================================
   Spend dashboard
   ========================================================================== */
.bi-spend__filters { display: grid; gap: 14px; margin-bottom: 18px; }
.bi-spend__ranges { display: flex; flex-wrap: wrap; gap: 7px; }
.bi-spend__range {
  padding: 7px 14px; font-size: 13.5px; font-weight: 500;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid transparent;
}
.bi-spend__range:hover { border-color: var(--color-accent-400); }
.bi-spend__range.is-current {
  background: var(--color-accent-600); color: var(--on-dark); border-color: var(--color-accent-600);
}
.bi-spend__custom { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.bi-spend__custom .bi-field { margin: 0; }

.bi-spend__stats { margin-bottom: 18px; }
.bi-spend__stat { display: flex; flex-direction: column; gap: 6px; }
.bi-spend__figure {
  font-family: var(--font-heading); font-weight: 600; font-size: 27px; line-height: 1.1;
  font-variant-numeric: tabular-nums; margin-top: auto;
}

/* Bar chart. Inline SVG so it needs no library and prints cleanly; the
   timeline reads left to right in both languages, as timelines do. */
.bi-chart { overflow-x: auto; direction: ltr; }
.bi-chart__svg { width: 100%; min-width: 520px; height: 236px; display: block; }
.bi-chart__track { fill: var(--color-surface); }
.bi-chart__bar { fill: var(--color-accent-600); }
.bi-chart__svg g:hover .bi-chart__bar { fill: var(--color-accent-700); }
.bi-chart__label {
  fill: var(--ink-2); font-size: 12px; font-family: var(--font-body); text-anchor: middle;
}
.bi-chart__value {
  fill: var(--color-text); font-size: 11.5px; font-weight: 600;
  font-family: var(--font-body); text-anchor: middle;
}

/* Breakdown bars — supplier and department share one treatment so the two
   panels can be read against each other. */
.bi-breakdown { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin-bottom: 15px; }
.bi-breakdown:last-child { margin-bottom: 0; }
.bi-breakdown__head { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; }
.bi-breakdown__label { font-size: 14px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.bi-breakdown__value { font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bi-breakdown__track { height: 8px; background: var(--color-surface); display: block; }
.bi-breakdown__fill { height: 100%; background: var(--color-accent-600); display: block; }
.bi-breakdown__fill--alt { background: var(--color-accent-2-400); }
.bi-breakdown__share { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* --- Invoices ------------------------------------------------------------ */
.bi-invoice-table td, .bi-invoice-table th { vertical-align: middle; }
.bi-invoice__number { display: block; font-weight: 600; font-size: 14px; }
.bi-invoice__meta { display: block; font-size: 12.5px; color: var(--ink-2); }

/* ==========================================================================
   Share button + product carousel
   ========================================================================== */

/* Wishlist takes the room it needs for a long label; share sizes to its own. */
.bi-product__secondary { display: flex; gap: 10px; margin-bottom: 26px; }
.bi-product__secondary > form { flex: 1 1 auto; min-width: 0; }
.bi-share { flex: 0 0 auto; }
.bi-share.is-copied { border-color: var(--color-accent-500); color: var(--color-accent-700); }

@media (max-width: 560px) {
  .bi-product__secondary { flex-direction: column; }
  .bi-share { width: 100%; }
}

/* --- Carousel -------------------------------------------------------------
   A native scroll container, not a transform-driven slider: it keeps keyboard
   scrolling, touch momentum, and the scrollbar for anyone who wants it. The
   arrows scroll by exactly one page. */
.bi-carousel { position: relative; }
.bi-carousel__nav { display: flex; gap: 8px; }

.bi-carousel__btn {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: #fff; color: var(--color-text);
  border: 1px solid var(--color-divider); border-radius: 50%;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.bi-carousel__btn:hover:not(:disabled) { border-color: var(--color-accent-500); background: var(--color-accent-100); }
.bi-carousel__btn:disabled { opacity: .32; cursor: default; }

.bi-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 22px) / 4);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Room for the card's own focus ring and hover lift, which would otherwise
     be clipped by the scroll container. */
  padding: 4px 2px 10px;
  margin: -4px -2px -10px;
  scrollbar-width: thin;
}
.bi-carousel__track::-webkit-scrollbar { height: 6px; }
.bi-carousel__track::-webkit-scrollbar-thumb { background: var(--color-divider); border-radius: 6px; }
.bi-carousel__track:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 3px; }

.bi-carousel__item { scroll-snap-align: start; min-width: 0; }

@media (max-width: 1000px) { .bi-carousel__track { grid-auto-columns: calc((100% - 2 * 18px) / 3); gap: 18px; } }
@media (max-width: 760px)  { .bi-carousel__track { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; } }
@media (max-width: 520px)  { .bi-carousel__track { grid-auto-columns: 78%; gap: 14px; } }

@media (prefers-reduced-motion: reduce) { .bi-carousel__track { scroll-behavior: auto; } }

/* Arrows only earn their space when there is something to scroll to. */
.bi-carousel:not(.has-overflow) .bi-carousel__nav { display: none; }

/* ==========================================================================
   Phone field with dialling-code picker
   ========================================================================== */

.bi-phone {
  position: relative;
  display: flex; align-items: stretch;
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: 12px;
}
.bi-phone:focus-within { border-color: var(--color-accent-500); box-shadow: 0 0 0 3px rgba(35, 138, 87, .13); }
.bi-phone.is-invalid { border-color: var(--color-danger-border); }

.bi-phone__prefix { position: relative; flex: none; display: flex; }

/* Before app.js runs, this IS the control — so it must look like one. */
.bi-phone__native {
  appearance: none;
  max-width: 168px;
  padding: 0 30px 0 14px;
  font: inherit; font-size: 15px; color: var(--color-text);
  background: var(--color-surface-2, #f6f8f7) no-repeat right 10px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23566058' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  border: 0; border-inline-end: 1px solid var(--color-divider);
  border-start-start-radius: 11px; border-end-start-radius: 11px;
  cursor: pointer;
}
.bi-phone__native:focus { outline: none; }
/* Enhanced: the select still submits, it just stops taking up room. */
/* Enhanced away completely. opacity:0 alone left it focusable, so Tab landed
   on an invisible 1px control — with its focus ring removed — that silently
   changed the submitted country. `display: none` takes it out of the tab order
   and the accessibility tree while it still submits with the form. */
.bi-phone.is-enhanced .bi-phone__native { display: none; }

.bi-phone__toggle {
  display: flex; align-items: center; gap: 7px;
  min-width: 92px; padding: 0 12px 0 16px;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--color-text);
  background: var(--color-surface-2, #f6f8f7);
  border: 0; border-inline-end: 1px solid var(--color-divider);
  border-start-start-radius: 11px; border-end-start-radius: 11px;
  cursor: pointer;
}
.bi-phone__toggle:hover { background: var(--color-accent-100); }
.bi-phone__toggle[aria-expanded="true"] .bi-icon--chevron-down { transform: rotate(180deg); }
.bi-phone__toggle .bi-icon { transition: transform .16s ease; color: var(--ink-2); }

.bi-phone__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; border-radius: 0;
  background: transparent;
}
.bi-phone__input:focus { outline: none; box-shadow: none; }

/* --- The picker ----------------------------------------------------------- */
.bi-phone__panel {
  position: absolute; z-index: 60; inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  width: min(370px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  background: #fff;
  border: 1px solid var(--color-divider); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(16, 34, 24, .17);
  overflow: hidden;
}
.bi-phone__search { grid-column: 1 / -1; padding: 10px; border-bottom: 1px solid var(--color-divider); }
.bi-phone__searchinput {
  width: 100%; padding: 9px 12px;
  font: inherit; font-size: 14.5px; color: var(--color-text);
  background: var(--color-surface-2, #f6f8f7);
  border: 1px solid transparent; border-radius: 8px;
}
.bi-phone__searchinput:focus { outline: none; border-color: var(--color-accent-500); background: #fff; }

/* One height governs both columns, so the rail can never be taller or shorter
   than the list it indexes. */
.bi-phone__panel { --phone-list-h: 292px; }

.bi-phone__list {
  margin: 0; padding: 6px; list-style: none;
  /* max-height, not height: a search that matches two countries should be two
     rows tall, not a 292px box with the results stranded at the top. The rail
     keeps its fixed height so the alphabet stays whole either way. */
  max-height: var(--phone-list-h); overflow-y: auto; scrollbar-width: thin;
}
.bi-phone__option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 8px;
  font-size: 14.5px; cursor: pointer;
}
.bi-phone__option:hover { background: var(--color-surface-2, #f6f8f7); }
.bi-phone__option:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: -2px; }
.bi-phone__option.is-selected { background: var(--color-accent-100); font-weight: 500; }
.bi-phone__country { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-phone__code { flex: none; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bi-phone__option.is-selected .bi-phone__code { color: var(--color-accent-700); }

/* A–Z rail: a thin column of jump targets, exactly as tall as the list. */
/* The rail is exactly as tall as the list and spreads the whole alphabet over
   that height — space-between rather than a fixed gap, so 26 Latin letters and
   28 Arabic ones both fill it evenly without either being clipped.
   min-height: 0 stops the rail's own content from growing the grid row: the
   list decides the height, the rail follows. */
.bi-phone__rail {
  display: flex; flex-direction: column; align-items: stretch;
  justify-content: space-between;
  height: var(--phone-list-h); min-height: 0;
  padding: 4px;
  border-inline-start: 1px solid var(--color-divider);
  overflow: hidden;
}

.bi-phone__railbtn {
  flex: 0 0 auto;
  padding: 0 3px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 10px; font-weight: 600; line-height: 1;
  color: var(--ink-2);
  border-radius: 3px;
  text-align: center;
  transition: color .12s ease, background .12s ease;
}
.bi-phone__railbtn:hover:not(:disabled) { color: var(--color-accent-700); background: var(--color-accent-100); }

/* A letter no country starts with. Kept in place so the alphabet reads as a
   whole, but visibly and actually inert. */
.bi-phone__railbtn.is-empty { color: var(--color-divider); cursor: default; }
.bi-phone__railbtn.is-empty:hover { background: none; }

/* 28 letters instead of 26, and descenders on ج ح خ — a touch smaller so the
   alphabet still clears the same height without clipping. */
.bi-phone__rail--ar .bi-phone__railbtn { font-size: 9px; line-height: 1.05; }

.bi-phone__empty { grid-column: 1 / -1; margin: 0; padding: 18px; text-align: center; font-size: 14px; color: var(--ink-2); }

@media (max-width: 420px) {
  .bi-phone__toggle { min-width: 82px; padding-inline: 12px 10px; }
  .bi-phone__rail { display: none; }
  .bi-phone__panel { grid-template-columns: minmax(0, 1fr); }
}

/* The rail letter you are at. Colour alone is not the only cue — the pill gives
   it a shape, so it reads at a glance on a column of 10px characters. */
.bi-phone__railbtn.is-active {
  color: #fff; background: var(--color-accent-600);
  border-radius: 4px; font-weight: 700;
}
.bi-phone__railbtn:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 1px; border-radius: 4px; }

/* --- Fixed dialling prefix -------------------------------------------------
   Replaces the country picker: one market, so the prefix is shown, not asked.
   Styled as part of the field rather than as a button, because nothing here is
   pressable. */
.bi-phone__fixed {
  display: flex; align-items: center; gap: 7px;
  flex: none; padding: 0 14px;
  background: var(--color-surface-2, #f6f8f7);
  border-inline-end: 1px solid var(--color-divider);
  border-start-start-radius: 11px; border-end-start-radius: 11px;
  font-size: 15px; font-weight: 500; color: var(--color-text);
  user-select: none;
}
/* A real image, so it looks the same on every operating system. The hairline
   border keeps a light flag from dissolving into the field behind it. */
.bi-phone__flag {
  display: block; width: 22px; height: 15px; flex: none;
  object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(16, 34, 24, .12);
}
/* The code is always Latin digits, even in an Arabic sentence. */
.bi-phone__dial { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* --- Choice chips (address type) -------------------------------------------
   A radio group that reads as buttons. Built on real radios so it works with
   the keyboard, submits without JavaScript, and announces as a group. */
/* A fieldset carries browser margins and a border of its own, which is what
   this clears. Longhands, not `margin: 0`: the shorthand also wiped the
   16px that .bi-field puts under every other control, so the chips sat flush
   against whatever followed while the rest of the form breathed. */
.bi-choices {
  border: 0; padding: 0; min-width: 0;
  margin-top: 0; margin-inline: 0;
}
.bi-choices__row { display: flex; flex-wrap: wrap; gap: 10px; }

.bi-choice { position: relative; }
.bi-choice input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.bi-choice__body {
  display: block; padding: 10px 18px;
  border: 1px solid var(--color-divider); border-radius: 999px;
  background: #fff; font-size: 14.5px; color: var(--color-text);
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.bi-choice input:hover + .bi-choice__body { border-color: var(--color-accent-500); }
.bi-choice input:checked + .bi-choice__body {
  border-color: var(--color-accent-600);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-weight: 500;
}
/* The ring must follow the real radio, which is the thing actually focused. */
.bi-choice input:focus-visible + .bi-choice__body {
  outline: 2px solid var(--color-accent-600); outline-offset: 2px;
}

/* --- Supplier mark on a product card ---------------------------------------
   A white tile straddling the bottom edge of the photo, the way marketplace
   apps show a merchant. Half over the image, half over the body, so it reads
   as belonging to both. */


/* The tile hangs below the media, so the media may no longer clip its overflow
   and the body needs room for the half that lands on it. */

/* Quick-add would otherwise slide out underneath the tile. */


/* Address-book card: what the place is, and its Saudi Post short code. */
.bi-addrcard__type {
  display: inline-block; margin-inline-start: 8px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--color-accent-100); color: var(--color-accent-800);
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; vertical-align: middle;
}
.bi-addrcard__short {
  margin: 2px 0 6px; font-family: var(--font-heading); font-size: 13px;
  font-weight: 600; letter-spacing: .08em; color: var(--color-accent-700);
  direction: ltr; unicode-bidi: isolate;
}

/* --- "Filtered by" notice ---------------------------------------------------
   Sits above a narrowed list to explain why it is short, and to offer one click
   back to the whole thing. */
.bi-filter-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 20px;
  background: var(--color-accent-100);
  border: 1px solid var(--color-accent-300); border-radius: 10px;
  font-size: 14px; color: var(--color-accent-900);
}
.bi-filter-note__text { flex: 1; min-width: 0; }
.bi-filter-note__clear {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--color-accent-700);
}
.bi-filter-note__clear:hover { text-decoration: underline; }

/* --- Selling: application status, details, message thread ---------------- */
/* Hidden from people, completed by bots. Off-screen rather than display:none,
   which some form fillers skip. */
.bi-honeypot {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.bi-auth--wide { max-width: 620px; }
.bi-form-legend {
  margin: 22px 0 12px; padding-top: 16px; border-top: 1px solid var(--color-divider);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
}
.bi-form-legend:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.bi-form-note { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.bi-optional { font-weight: 400; font-size: 12px; color: var(--ink-2); }
.bi-hint { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-2); }

.bi-vendor__status-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bi-vendor__note { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }

.bi-deflist { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 8px 18px; margin: 14px 0 0; }
.bi-deflist dt { font-size: 13px; color: var(--ink-2); }
.bi-deflist dd { margin: 0; font-size: 14px; }

.bi-thread { display: grid; gap: 14px; margin-top: 12px; }
.bi-thread__item { padding: 14px; border: 1px solid var(--color-divider); border-radius: 10px; }
.bi-thread__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bi-thread__subject { font-weight: 600; }
.bi-thread__body { margin: 8px 0 0; font-size: 14px; line-height: 1.65; white-space: pre-line; }
.bi-thread__reply {
  margin-top: 12px; padding: 11px 13px; border-radius: 8px;
  background: var(--color-accent-100); border-inline-start: 3px solid var(--color-accent-600);
}
.bi-thread__from { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-accent-800); }
.bi-thread__pending { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }

/* Closing call to action on the sell page. */
.bi-cta-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; padding: 32px;
  background: var(--color-accent-100);
}
.bi-cta-band__text { margin-top: 8px; max-width: 52ch; color: var(--ink-2); line-height: 1.65; }

/* --- Quantity price brackets -------------------------------------------- */
.bi-tiers {
  margin-top: 16px; padding: 14px 16px;
  border: 1px solid var(--color-divider); border-radius: 10px;
  background: var(--color-accent-100);
}
.bi-tiers__title {
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--color-accent-800);
}
.bi-tiers__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bi-tiers__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-size: 14px;
}
.bi-tiers__row strong { font-variant-numeric: tabular-nums; }
.bi-tiers__note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); }

/* In the basket: how far off the next bracket is. */
.bi-cart-line__tier {
  display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600;
  color: var(--color-accent-800);
}

/* Derived product badges. One per card, coloured by what it means. */
.bi-badge--sale { background: var(--color-accent-2-100); border-color: var(--color-accent-2-300); color: var(--color-accent-2-900); }
.bi-badge--out {
  background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger);
}

/* What a seller sent with the application they are waiting on. */
.bi-vendor__sent {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--color-surface-2, #f6f8f6); border: 1px solid var(--color-divider);
}
.bi-vendor__sent-label {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
}
.bi-vendor__sent-subject { margin: 6px 0 0; font-weight: 600; }
.bi-vendor__sent-body { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); white-space: pre-line; }

/* --- supplier shop page ----------------------------------------------------
   A banner, an identity block and an About card side by side, then the
   supplier's own shelves as tabs. The cover contains the photograph rather
   than cropping it: these are product shots, and a wide crop of a product shot
   is usually a close-up of the background. */
.bi-shop { border-bottom: 1px solid var(--color-divider); }
.bi-shop__cover {
  height: 190px; background: var(--color-surface-2, #f4f4f4); overflow: hidden;
}
/* Full width, cropped to the band. object-position centres the crop, so a
   photograph taller than the strip loses its top and bottom evenly rather than
   keeping the top and cutting everything below it. */
.bi-shop__cover img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}

/*
 * Identity across the top, the About panel underneath it.
 *
 * These were two columns side by side, which works only while the two are a
 * similar height. A supplier who writes three paragraphs left the identity
 * column stranded above a band of dead space taller than the banner itself.
 * A row cannot be outgrown by the thing beside it when nothing is beside it.
 */
.bi-shop__head { padding-bottom: 26px; }
.bi-shop__identity {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 24px;
  min-width: 0;
}
/* Name and meta travel together; the button is pushed to the far end, so the
   row reads identity-then-action at any width. */
.bi-shop__ident-text { flex: 1 1 320px; min-width: 0; }
.bi-shop__avatar { display: block; margin-top: -46px; margin-bottom: 14px; position: relative; }

.bi-shop__name {
  margin: 0 0 8px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700;
  line-height: 1.15; color: var(--color-text);
}
.bi-shop__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: 13.5px; color: var(--ink-2);
}
/* Separators drawn rather than typed, so they never end up orphaned at the
   start of a wrapped line. */
.bi-shop__meta > * + *::before { content: '·'; margin-inline-end: 14px; color: var(--color-divider); }
.bi-shop__badge,
.bi-shop__rating { display: inline-flex; align-items: center; gap: 6px; }
.bi-shop__badge { font-weight: 600; color: var(--color-text); }

.bi-shop__eta { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); }
.bi-shop__cta { flex: none; margin-inline-start: auto; gap: 8px; }

.bi-shop__about {
  margin-top: 22px; padding: 20px 22px;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 34px;
}
/* With scores to show and room to show them, they sit beside the description
   rather than under it — which is what keeps a short description from leaving
   a wide empty band, and a long one from pushing them off the fold. */
@media (min-width: 900px) {
  .bi-shop__about--split { grid-template-columns: minmax(0, 1fr) minmax(230px, 290px); }
}
.bi-shop__about-title { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--color-text); }
.bi-shop__about-text {
  margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2);
  white-space: pre-line;
  /* A readable measure. Run full width, a long description becomes one long
     line the eye loses its place in. */
  max-width: 76ch;
}

.bi-shop__pills,
.bi-suppliers__pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 0; border-top: 1px solid var(--color-divider);
}
.bi-shop__pill,
.bi-suppliers__pill {
  padding: 7px 15px; border-radius: 999px; white-space: nowrap;
  font-size: 13.5px; color: var(--color-text);
  background: var(--color-surface-2, #f4f4f4);
  border: 1px solid transparent;
}
.bi-shop__pill:hover,
.bi-suppliers__pill:hover { border-color: var(--color-divider); background: var(--color-bg); }
.bi-shop__pill.is-current,
.bi-suppliers__pill.is-current {
  background: var(--color-accent-700); border-color: var(--color-accent-700);
  color: #fff; font-weight: 600;
}

@media (max-width: 900px) {
  .bi-shop__cover { height: 140px; }
}

/* --- shop filter panel -----------------------------------------------------
   The sticky rail beside the results. It was a plain box of three controls and
   an Apply button; the work here is telling you what is already on and letting
   you take one thing off without starting again. */
.bi-filters { padding: 0; }
.bi-filters__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--color-divider);
}
.bi-filters__head .bi-panel__title { margin: 0; }
.bi-filters__clear { font-size: 12.5px; color: var(--ink-2); text-decoration: underline; }
.bi-filters__clear:hover { color: var(--color-accent-700); }

.bi-filters__chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 14px 20px; border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface-2, #f6f8f7);
}
.bi-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  font-size: 12.5px; color: var(--color-text); line-height: 1.4;
}
.bi-chip:hover { border-color: var(--color-accent-600); color: var(--color-accent-800); }
.bi-chip__x { font-size: 14px; line-height: 1; color: var(--ink-2); }
.bi-chip:hover .bi-chip__x { color: var(--color-accent-700); }

/* The controls themselves, each in its own band so the panel reads as a list
   of questions rather than one dense block. */
.bi-filters > .bi-field { display: block; padding: 16px 20px 0; margin: 0; }
.bi-filters > .bi-field:last-of-type { padding-bottom: 4px; }

.bi-filters__range { display: flex; align-items: center; gap: 8px; }
.bi-filters__range .bi-input { min-width: 0; }
.bi-filters__dash { flex: none; color: var(--ink-2); }

.bi-filters__foot { padding: 16px 20px 20px; }

/* Sticky, but never taller than the screen: a panel that runs past the bottom
   traps its own Apply button where no amount of scrolling reaches it. */
@media (min-width: 981px) {
  .bi-filters.bi-sticky { max-height: calc(100vh - 112px); overflow-y: auto; }
}

/* --- numbered flow ---------------------------------------------------------
   "How selling works": stages in a sequence, not four cards that happen to be
   near each other. A rule runs behind the markers and joins them, so the eye
   follows the order instead of reading the boxes as alternatives. */
.bi-flow {
  --bi-flow-dot: 34px;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 28px;
  counter-reset: bi-flow;
}
.bi-flow__step { position: relative; counter-increment: bi-flow; }

.bi-flow__marker {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: var(--bi-flow-dot); height: var(--bi-flow-dot); border-radius: 50%;
  background: var(--color-accent-700); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
/* The number is the list's own count, so nothing has to be typed or kept in
   step when a stage is added in the middle. */
.bi-flow__marker::before { content: counter(bi-flow, decimal-leading-zero); }

.bi-flow__title {
  margin: 0 0 5px; font-family: var(--font-heading);
  font-size: 17px; font-weight: 600; color: var(--color-text);
}
.bi-flow__note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* Stacked on a narrow screen: marker at the start, rule dropping to the next.
   Logical properties throughout, so the whole thing mirrors in Arabic without
   a single RTL override. */
.bi-flow__step { display: grid; grid-template-columns: var(--bi-flow-dot) minmax(0, 1fr); gap: 16px; align-items: start; }
.bi-flow__step:not(:last-child)::after {
  content: ''; position: absolute;
  inset-inline-start: calc(var(--bi-flow-dot) / 2 - 1px);
  top: var(--bi-flow-dot); bottom: -28px; width: 2px;
  background: var(--color-accent-200);
}

@media (min-width: 860px) {
  .bi-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .bi-flow__step { display: block; }
  .bi-flow__body { margin-top: 14px; }

  /* The connector becomes horizontal and runs to the next marker. It stops at
     the last step rather than trailing off the end of the row. */
  .bi-flow__step:not(:last-child)::after {
    inset-inline-start: var(--bi-flow-dot);
    inset-inline-end: calc(-24px - var(--bi-flow-dot) / 2);
    top: calc(var(--bi-flow-dot) / 2 - 1px); bottom: auto; width: auto; height: 2px;
  }
}

/* A file input styled as a field rather than as the browser's bare button, so
   it sits in a form beside text inputs without looking like an afterthought. */
.bi-file { padding: 9px 11px; line-height: 1.4; cursor: pointer; }
.bi-file::file-selector-button {
  margin-inline-end: 10px; padding: 6px 12px; cursor: pointer;
  font: inherit; font-size: 13px;
  color: var(--color-accent-800); background: var(--color-accent-100);
  border: 1px solid var(--color-accent-200); border-radius: 8px;
}
.bi-file::file-selector-button:hover { background: var(--color-accent-200); }

/* The delivery estimate in the basket and checkout summaries. Tinted rather
   than another grey line, because it is the one thing in that panel a buyer
   is looking for and everything around it is money. */
.bi-eta {
  display: flex; align-items: flex-start; gap: 9px;
  /* Space under it as well as over: it sits between the totals and whatever
     comes next in each panel, and flush against the following block it read
     as part of it. Margins collapse with the next sibling's own, so this
     never doubles up. */
  margin: 14px 0 16px; padding: 10px 12px;
  background: var(--color-accent-100); border: 1px solid var(--color-accent-200);
  border-radius: 10px;
  font-size: 13.5px; line-height: 1.45; color: var(--color-accent-800);
}
.bi-eta svg { flex: none; margin-top: 1px; }

/* --- rating a supplier -----------------------------------------------------
   Real radios, styled. The control works with the keyboard, submits without
   JavaScript and announces itself as a group — none of which a row of divs
   with click handlers does. */
/* Each supplier is a closed row until asked for. */
.bi-rate {
  border: 1px solid var(--color-divider); border-radius: 12px;
  padding: 0 16px; margin-top: 10px; background: var(--color-bg);
}
.bi-rate[open] { border-color: var(--color-accent-300); }

.bi-rate__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0; cursor: pointer; list-style: none;
}
/* Both spellings: WebKit still uses the pseudo-element, everyone else honours
   list-style. Left in, the browser draws its own triangle beside ours. */
.bi-rate__head::-webkit-details-marker { display: none; }
.bi-rate__head::marker { content: ''; }
.bi-rate__head:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 2px; border-radius: 8px; }

.bi-rate__cue { margin-inline-start: auto; font-size: 13px; color: var(--color-accent-700); }
.bi-rate[open] .bi-rate__cue { display: none; }

/* Drawn rather than an icon, so it can rotate on open without a second asset. */
.bi-rate__chev {
  flex: none; width: 8px; height: 8px; margin-inline-start: 4px; margin-bottom: 3px;
  border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2);
  transform: rotate(45deg); transition: transform .15s ease;
}
.bi-rate[open] .bi-rate__chev { transform: rotate(-135deg); margin-bottom: -2px; }

.bi-rate > form { padding-bottom: 16px; }
.bi-rate__name { font-weight: 600; }
.bi-rate__done {
  display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto;
  font-size: 13px; color: var(--color-accent-700);
}

.bi-rate__row { border: 0; margin: 0 0 12px; padding: 0; }
.bi-rate__label { display: flex; align-items: baseline; gap: 8px; padding: 0; margin-bottom: 4px; font-size: 14px; }

/* Laid out in reverse so that CSS can light up a star and everything before
   it — ~ only ever looks forward, so the markup counts down from 5 and the
   row is flipped back visually. */
.bi-rate__stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.bi-rate__input { position: absolute; opacity: 0; width: 0; height: 0; }
.bi-rate__star { cursor: pointer; color: var(--color-divider); line-height: 0; padding: 2px; }
.bi-rate__star:hover,
.bi-rate__star:hover ~ .bi-rate__star,
.bi-rate__input:checked ~ .bi-rate__star { color: #E8A33D; }
.bi-rate__input:checked + .bi-rate__star { color: #E8A33D; }
.bi-rate__star svg { fill: currentColor; }
/* Keyboard users get a visible focus ring the mouse never shows. */
.bi-rate__input:focus-visible + .bi-rate__star { outline: 2px solid var(--color-accent-600); outline-offset: 2px; border-radius: 4px; }

/* --- the breakdown on a supplier's shop page --- */
.bi-ratings { margin-top: 18px; }
.bi-ratings__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin-bottom: 10px; }
.bi-ratings__label { font-size: 13.5px; color: var(--color-text); }
.bi-ratings__score { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bi-ratings__track { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--color-accent-100); overflow: hidden; }
.bi-ratings__fill { display: block; height: 100%; background: #E8A33D; border-radius: 999px; }

/* A standing notice inside a form — currently the development warning on the
   password reset screen. Amber rather than red: nothing has gone wrong, but
   the reader needs to know the ground they are standing on. */
.bi-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 18px; padding: 12px 14px;
  border-radius: 10px; font-size: 13.5px; line-height: 1.5;
}
.bi-note svg { flex: none; margin-top: 1px; }
.bi-note--warn {
  background: #FFF6E3; border: 1px solid #F0DCAE; color: #7A5A12;
}
.bi-note--warn svg { color: #B4791A; }

/* Two groups on the order page: what still needs rating, and what is done. */
.bi-rate__group {
  margin: 22px 0 12px; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.bi-rate__group:first-of-type { margin-top: 4px; }
.bi-rate__group--done { padding-top: 18px; border-top: 1px solid var(--color-divider); }
/* A finished one is a receipt, not a task — it recedes. */
.bi-rate--done { background: var(--color-surface-2, #f6f8f7); }
.bi-rate--done .bi-rate__head { cursor: default; }

/* --- application steps -----------------------------------------------------
   The rail above the form, and the controls under it. Both are inert without
   the script: the rail reads as a summary of what will be asked, and every
   pane stays on screen. */
.bi-steps {
  display: flex; flex-wrap: wrap; gap: 8px 6px;
  list-style: none; margin: 0 0 18px; padding: 0; counter-reset: none;
}
.bi-steps__item {
  display: flex; align-items: center; gap: 9px;
  flex: 1 1 200px; min-width: 0; padding: 11px 14px;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  border-radius: 10px; font-size: 13.5px; color: var(--ink-2);
}
.bi-steps__num {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-divider); color: var(--color-text);
  font-size: 12.5px; font-weight: 700;
}
.bi-steps__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bi-steps__item.is-current {
  border-color: var(--color-accent-600); color: var(--color-text); font-weight: 600;
}
.bi-steps__item.is-current .bi-steps__num { background: var(--color-accent-700); color: #fff; }

.bi-steps__item.is-done { border-color: var(--color-accent-200); }
.bi-steps__item.is-done .bi-steps__num { background: var(--color-accent-200); color: var(--color-accent-800); }
/* A tick replaces the number once the step is behind you. */
.bi-steps__item.is-done .bi-steps__num { font-size: 0; }
.bi-steps__item.is-done .bi-steps__num::after {
  content: ''; width: 5px; height: 9px; margin-top: -2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.bi-stepnav {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-divider);
}
.bi-stepnav__count { margin-inline-start: auto; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* Continue and Send occupy the same slot; only one is ever shown. */
.bi-stepnav [data-step-next],
.bi-stepnav [data-step-submit] { flex: none; }

@media (max-width: 620px) {
  .bi-steps__item { flex: 1 1 100%; }
}

/* --- "which account is this?" ----------------------------------------------
   Shown where a step would have been. Tinted rather than bordered-grey: it is
   the one thing on the page the reader has not chosen to read, and it changes
   what their account becomes. */
.bi-whoami {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 0 22px; padding: 16px 18px;
  background: var(--color-accent-100); border: 1px solid var(--color-accent-200);
  border-radius: 12px;
}
.bi-whoami__avatar {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-accent-700); color: #fff;
  font-weight: 700; font-size: 17px;
}
.bi-whoami__body { min-width: 0; }
.bi-whoami__q { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--color-accent-800); }
.bi-whoami__who {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 0 0 8px; font-size: 14px; color: var(--color-text);
}
.bi-whoami__who .bi-ltr { color: var(--ink-2); }
.bi-whoami__note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.bi-whoami__alt { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }

/* A button that has to look like a link, because it posts a form — an anchor
   cannot sign anyone out without a GET that changes state. */
.bi-linkbtn {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: inherit; color: var(--color-accent-800);
  text-decoration: underline;
}
.bi-linkbtn:hover { color: var(--color-accent-700); }

/* --- top-rated supplier band -----------------------------------------------
   One supplier, earned: their cover large on one side, who they are on the
   other. Logical properties throughout, so Arabic mirrors it for free. */
.bi-topsupplier {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px; align-items: center;
}
.bi-topsupplier__media {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 14px; background: var(--color-accent-100);
  border: 1px solid var(--color-divider);
}
.bi-topsupplier__mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-heading); font-size: 96px; font-weight: 700;
  color: var(--color-accent-300);
}
.bi-topsupplier__body { min-width: 0; }
.bi-topsupplier__rating {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 12px 0 0; font-size: 13.5px; color: var(--ink-2);
}
.bi-topsupplier__text { margin: 14px 0 20px; font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 52ch; }

@media (max-width: 860px) {
  .bi-topsupplier { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* The bracket row the chosen quantity falls in. */
.bi-tiers__row.is-active { background: var(--bi-mist, #f2f7f6); }
.bi-tiers__row.is-active span:last-child { color: var(--bi-primary, #00796a); font-weight: 700; }

/* The specification fold under About. */
.bi-product__more { margin-top: 10px; }
.bi-product__more > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--bi-primary, #00796a);
  list-style: none;
}
.bi-product__more > summary::-webkit-details-marker { display: none; }
.bi-product__more > summary::after { content: "▾"; font-size: 11px; transition: transform .15s ease; }
.bi-product__more[open] > summary::after { transform: rotate(180deg); }
.bi-product__more-body { margin-top: 8px; font-size: 14px; color: var(--bi-ink-soft, #4b5563); }
.bi-product__more-body ul, .bi-product__more-body ol { padding-inline-start: 20px; margin: 6px 0; }

/* The suppliers band. Its pills borrow the shop's, above rather than below a
   rule, and a filtered-out card has to lose the flex display it was given. */
.bi-suppliers__pills { border-top: 0; padding: 0 0 20px; }

/* An arrow with nothing to slide past. */
.bi-rail-btn:disabled { opacity: .4; cursor: default; }
.bi-rail-btn:disabled:hover { background: #fff; border-color: var(--color-divider); }

/* --- search results, grouped by supplier -----------------------------------
   Each section is one shop: who they are, then what they have for the term. */
.bi-hits { margin-bottom: 44px; }
.bi-hits__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--color-divider);
}
.bi-hits__shop { display: flex; align-items: center; gap: 13px; color: var(--color-text); }
.bi-hits__shop:hover .bi-hits__name { color: var(--color-accent-700); }
.bi-hits__id { display: block; }
.bi-hits__name {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 19px; line-height: 1.25;
}
.bi-hits__meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--color-text-soft); }
.bi-hits__more { display: inline-flex; margin-top: 18px; }
.bi-shopmatch { margin-bottom: 40px; }
@media (max-width: 640px) {
  .bi-hits__head { align-items: flex-start; }
  .bi-hits__name { font-size: 17px; }
}

/* The hero sits on dark, so its outline button needs a light edge rather
   than the ink one the light-ground version uses. */
.bi-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 30px; }
.bi-btn--ghost {
  border: 1px solid rgba(255, 255, 255, .34); background: transparent; color: #fff;
}
.bi-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

/* --- shop by category ------------------------------------------------------
   One row of departments. Six across on a desktop, folding to three and then
   two rather than shrinking the pictures to stamps. */
.bi-section-head__sub { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); }
.bi-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bi-cat {
  display: block; padding: 0 0 16px; text-align: center; overflow: hidden;
  background: #fff; border: 1px solid var(--color-divider); border-radius: 12px;
  color: var(--color-text); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.bi-cat:hover {
  border-color: var(--color-accent-400); transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(16, 34, 47, .07); color: var(--color-text);
}
/* Edge to edge, and up to the card's own rounding: the card carries the
   radius and clips it, so the picture needs none of its own. */
.bi-cat__art {
  position: relative; display: block; height: 116px; margin-bottom: 12px;
  background: var(--color-accent-100);
}
.bi-cat__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bi-cat__name {
  display: block; padding-inline: 12px;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 15px; line-height: 1.25; text-wrap: balance;
}
.bi-cat__count {
  display: block; margin-top: 6px; padding-inline: 12px;
  font-size: 12.5px; color: var(--color-accent-700);
}

@media (max-width: 1080px) { .bi-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .bi-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* --- business essentials ---------------------------------------------------
   Five across, then three, then two. The card is a fixed stack so a long
   product name cannot push the button out of line with its neighbours. */
/* Five to a screen, the rest a nudge away. A fixed card width rather than a
   fraction of the rail: the sixth card has to peek past the edge, or nothing
   says the row continues. */
.bi-rail--essentials { gap: 16px; }

/* --- supplier card ---------------------------------------------------------
   Centred: the logo is the thing being recognised, so it leads, and the terms
   sit in a strip along the bottom where they can be compared card to card. */
.bi-rail--suppliers > .bi-supplier { width: 268px; }
.bi-supplier {
  display: flex; flex-direction: column; padding: 24px 18px 18px; text-align: center;
  background: #fff; border: 1px solid var(--color-divider); border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bi-supplier:hover { border-color: var(--color-accent-400); box-shadow: 0 10px 26px rgba(16, 34, 47, .08); }
.bi-supplier__head { display: block; color: var(--color-text); }
.bi-supplier__head:hover .bi-supplier__name { color: var(--color-accent-700); }
.bi-supplier__head .bi-avatar { margin: 0 auto 12px; }
.bi-supplier__name {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 17px; line-height: 1.25;
  /* One line so every card's terms strip starts at the same height. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bi-supplier__cat { display: block; margin-top: 3px; font-size: 12.5px; color: var(--color-accent-700); }
.bi-supplier__where {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin: 10px 0 16px; min-height: 1.2em; font-size: 12.5px; color: var(--ink-2);
}
.bi-supplier__terms {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin: auto 0 0; padding-top: 15px;
  border-top: 1px solid var(--color-divider);
}
.bi-supplier__terms dt { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.bi-supplier__terms dd { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--color-text); }
/* --- why buyinn ------------------------------------------------------------ */
.bi-section-head--stacked { display: block; margin-bottom: 30px; }
.bi-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.bi-why__item { padding: 20px; background: #fff; border: 1px solid var(--color-divider); border-radius: 12px; }
.bi-why__icon {
  width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 13px;
  border-radius: 11px; background: var(--color-accent-100);
}
.bi-why__title { margin: 0 0 6px; font-family: var(--font-heading); font-weight: 600; font-size: 16px; line-height: 1.25; }
.bi-why__text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

@media (max-width: 980px) { .bi-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bi-why { grid-template-columns: 1fr; } }

/* --- header: departments menu and search scope ----------------------------- */
.bi-catmenu { position: relative; flex: none; }
.bi-catmenu__btn {
  display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  padding: 10px 14px; border: 1px solid var(--color-divider); border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--color-text); white-space: nowrap;
}
.bi-catmenu__btn::-webkit-details-marker { display: none; }
.bi-catmenu__btn:hover { border-color: var(--color-accent-400); }
.bi-catmenu[open] .bi-catmenu__btn { border-color: var(--color-accent-600); }
.bi-catmenu__panel {
  position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-start: 0;
  width: min(760px, 78vw); padding: 18px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 22px;
  background: #fff; border: 1px solid var(--color-divider); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(16, 34, 47, .14);
}
.bi-catmenu__dept {
  display: block; margin-bottom: 6px; font-family: var(--font-heading);
  font-weight: 600; font-size: 14.5px; color: var(--color-text);
}
.bi-catmenu__dept:hover { color: var(--color-accent-700); }
.bi-catmenu__child { display: block; padding: 3px 0; font-size: 13px; color: var(--ink-2); }
.bi-catmenu__child:hover { color: var(--color-accent-700); }
.bi-catmenu__all {
  grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px;
  padding-top: 12px; border-top: 1px solid var(--color-divider);
  font-size: 13.5px; font-weight: 600; color: var(--color-accent-700);
}

/* --- closing call to action ------------------------------------------------
   Two halves of one dark panel, split by a hairline on a wide screen and
   stacked with the rule between them on a narrow one. */
.bi-cta { padding: 8px 0 40px; }
.bi-cta__panel {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--hero-ground); border-radius: 14px; overflow: hidden;
}
.bi-cta__half { display: flex; align-items: flex-start; gap: 18px; padding: 30px 34px; }
.bi-cta__half + .bi-cta__half { border-inline-start: 1px solid rgba(255, 255, 255, .12); }
.bi-cta__icon {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--color-accent-600);
}
.bi-cta__body { min-width: 0; }
.bi-cta__title { margin: 0 0 6px; font-size: 20px; line-height: 1.25; color: #fff; }
.bi-cta__text { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .7); }
.bi-cta__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.bi-cta__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: #fff; text-decoration: underline;
  text-underline-offset: 4px;
}
.bi-cta__link:hover { color: var(--color-accent-300); }
/* The supplier side is the second choice on the panel, so its button is drawn
   as an outline of the same green rather than a second solid block. */
.bi-btn--ghost-accent {
  border: 1px solid var(--color-accent-500); background: transparent; color: var(--color-accent-300);
}
.bi-btn--ghost-accent:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; }

@media (max-width: 860px) {
  .bi-cta__panel { grid-template-columns: 1fr; }
  .bi-cta__half { padding: 26px 24px; }
  .bi-cta__half + .bi-cta__half { border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
}

/* --- supplier directory ----------------------------------------------------
   Filters down one side, rows down the other. The rows are the page: each one
   is a business a buyer might open an order with. */
.bi-dir { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 26px; padding-block: 22px 56px; align-items: start; }

/* The rail is taller than the window once a department is open, and being
   sticky it could not be reached: the page scrolled underneath it while the
   filters below the fold stayed below the fold. It scrolls on its own now,
   bounded by the viewport, with room kept on the inner edge so the bar never
   sits on top of a count. */
.bi-dir__side {
  position: sticky; top: 84px;
  max-height: calc(100vh - 104px); overflow-y: auto;
  padding-inline-end: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-300) transparent;
  overscroll-behavior: contain;
}
.bi-dir__side::-webkit-scrollbar { width: 8px; }
.bi-dir__side::-webkit-scrollbar-track { background: transparent; }
.bi-dir__side::-webkit-scrollbar-thumb {
  background: var(--color-neutral-300); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}
.bi-dir__side:hover::-webkit-scrollbar-thumb { background: var(--color-neutral-400); background-clip: content-box; }
.bi-filters { padding: 16px; background: #fff; border: 1px solid var(--color-divider); border-radius: 12px; }
.bi-filters__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.bi-filters__title { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 16px; }
.bi-filters__clear { font-size: 12.5px; color: var(--color-accent-700); }
.bi-filters__group { margin: 0 0 16px; padding: 14px 0 0; border: 0; border-top: 1px solid var(--color-divider); }
.bi-filters__legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.bi-filters__row { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; font-size: 13.5px; }
.bi-filters__label { flex: 1; min-width: 0; color: var(--ink-body); }
.bi-filters__count { font-size: 12px; color: var(--ink-2); }
.bi-filters__note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }

.bi-dir__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.bi-dir__title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: clamp(23px, 2.4vw, 30px); }
.bi-dir__chip {
  padding: 4px 10px; border-radius: 999px; font-family: var(--font-body);
  font-size: 12px; font-weight: 600; color: var(--color-accent-800); background: var(--color-accent-100);
}
.bi-dir__blurb { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }

/* One supplier. */
.bi-srow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 232px; gap: 18px;
  padding: 18px; margin-bottom: 14px;
  background: #fff; border: 1px solid var(--color-divider); border-radius: 12px;
}
.bi-srow:hover { border-color: var(--color-accent-300); }
.bi-srow__name { margin: 0 0 5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bi-srow__name a { font-family: var(--font-heading); font-weight: 600; font-size: 19px; color: var(--color-text); }
.bi-srow__name a:hover { color: var(--color-accent-700); }
.bi-srow__verified {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--color-accent-800); background: var(--color-accent-100);
}
.bi-srow__meta { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; font-size: 12.5px; color: var(--ink-2); }
.bi-srow__sep { color: var(--color-divider); }
.bi-srow__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; }
.bi-srow__tag {
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  background: var(--color-surface-2, #f4f4f4); color: var(--ink-body);
}
.bi-srow__tag:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
.bi-srow__count { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2); }
.bi-srow__terms { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding-top: 12px; border-top: 1px solid var(--color-divider); }
.bi-srow__terms dt { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); }
.bi-srow__terms dd { margin: 3px 0 0; font-size: 14.5px; font-weight: 700; }
.bi-srow__rating { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.bi-srow__rating span { font-weight: 400; color: var(--ink-2); }

.bi-srow__side { display: flex; flex-direction: column; gap: 10px; }
.bi-srow__basket {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border: 1px solid var(--color-divider); border-radius: 9px;
  font-size: 13px; color: var(--ink-2);
}
.bi-srow__basket.is-open { border-color: var(--color-accent-400); background: var(--color-accent-100); color: var(--color-accent-800); }
.bi-srow__basket-line { display: block; }
.bi-srow__basket-total { display: block; font-size: 14px; }
.bi-srow__cta { justify-content: center; }

.bi-dir__ask {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 22px; padding: 20px 22px;
  background: var(--color-accent-100); border: 1px solid var(--color-accent-200); border-radius: 12px;
}
.bi-dir__ask-title { margin: 0 0 3px; font-family: var(--font-heading); font-weight: 600; font-size: 16px; }
.bi-dir__ask-text { margin: 0; font-size: 13.5px; color: var(--ink-2); }

.bi-dir__assure { border-block: 1px solid var(--color-divider); background: #fff; }
.bi-dir__assure-inner { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 15px 0; font-size: 13px; color: var(--ink-2); }
.bi-dir__assure-inner strong { color: var(--color-text); }

@media (max-width: 1000px) {
  .bi-dir { grid-template-columns: 1fr; }
  .bi-dir__side { position: static; max-height: none; overflow: visible; padding-inline-end: 0; }
  .bi-srow { grid-template-columns: auto minmax(0, 1fr); }
  .bi-srow__side { grid-column: 1 / -1; flex-direction: row; }
  .bi-srow__side > * { flex: 1; }
}
@media (max-width: 560px) {
  .bi-srow { grid-template-columns: 1fr; }
  .bi-srow__side { flex-direction: column; }
}

/* --- the shop's category tree ---------------------------------------------
   Departments fold; the one you are standing in is open. Every row is a real
   link to a real page, so the address bar and the breadcrumb agree with it. */
.bi-tree { display: block; margin-bottom: 16px; }
.bi-tree__all, .bi-tree__link, .bi-tree__dept {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 7px;
  font-size: 13.5px; color: var(--ink-body);
}
.bi-tree__all { font-weight: 600; color: var(--color-text); }
.bi-tree__dept { cursor: pointer; list-style: none; font-weight: 600; color: var(--color-text); }
.bi-tree__dept::-webkit-details-marker { display: none; }
.bi-tree__all:hover, .bi-tree__link:hover, .bi-tree__dept:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
.bi-tree__all.is-current, .bi-tree__link.is-current, .bi-tree__dept.is-current {
  background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 600;
}
.bi-tree__label { flex: 1; min-width: 0; }
.bi-tree__count { font-size: 11.5px; color: var(--ink-2); }
.bi-tree__chevron { width: 12px; flex: none; font-size: 15px; color: var(--ink-2); transition: transform .15s ease; }
.bi-tree__branch[open] > .bi-tree__dept .bi-tree__chevron { transform: rotate(90deg); }
.bi-tree__branch > .bi-tree__link { padding-inline-start: 28px; }
/* A shelf nobody stocks: still walkable, visibly quieter. */
.bi-tree__link.is-empty { color: var(--ink-2); opacity: .65; }

/* How many suppliers a pill would return. */
.bi-suppliers__pill-count { margin-inline-start: 6px; font-size: 11.5px; opacity: .72; }

/* --- labelled filter groups ------------------------------------------------
   Each question folds under its own label, so the rail reads as a list of
   things you can decide rather than an undivided column of controls. */
.bi-fgroup { border-top: 1px solid var(--color-divider); }
.bi-fgroup__head {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  padding: 12px 0 10px; list-style: none;
  font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--color-text);
}
.bi-fgroup__head::-webkit-details-marker { display: none; }
.bi-fgroup__head::after { content: "⌄"; font-size: 14px; color: var(--ink-2); transition: transform .15s ease; }
.bi-fgroup[open] > .bi-fgroup__head::after { transform: rotate(180deg); }
.bi-fgroup__body { padding-bottom: 12px; }
.bi-fgroup__note { display: block; margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }
/* The category you are standing in, and the way out of it. */
.bi-fchip {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 6px 6px 0;
  padding: 6px 11px; border-radius: 999px;
  background: var(--color-accent-100); color: var(--color-accent-800);
  font-size: 12.5px; font-weight: 600;
}
.bi-fchip:hover { background: var(--color-accent-200); color: var(--color-accent-900); }
.bi-fchip span { font-size: 14px; opacity: .7; }
.bi-frange { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bi-filters__row .bi-stars { display: inline-flex; vertical-align: middle; }

/* --- search results: a supplier, then their matches ------------------------ */
.bi-hits { margin-bottom: 22px; background: #fff; border: 1px solid var(--color-divider); border-radius: 12px; overflow: hidden; }
.bi-hits__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 18px; border-bottom: 1px solid var(--color-divider);
}
.bi-hits__shop { display: flex; align-items: flex-start; gap: 14px; color: var(--color-text); }
.bi-hits__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-heading); font-weight: 600; font-size: 19px; line-height: 1.2; }
.bi-hits__meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12.5px; color: var(--ink-2); }
.bi-hits__terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.bi-hits__term {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: var(--color-surface-2, #f4f4f4); font-size: 11.5px; color: var(--ink-body);
}
.bi-hits__side { display: flex; align-items: center; gap: 10px; }
.bi-hits__band { padding: 14px 18px 18px; }
.bi-hits__label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink-body); }
.bi-hits__rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--color-neutral-300) transparent; }
.bi-hits__rail::-webkit-scrollbar { height: 7px; }
.bi-hits__rail::-webkit-scrollbar-thumb { background: var(--color-neutral-300); border-radius: 99px; }

.bi-fmore__btn {
  margin-top: 6px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--color-accent-700);
}
.bi-fmore__btn:hover { text-decoration: underline; }

/* --- supplier shop front ---------------------------------------------------
   Identity and terms on the left, what is already open with them on the
   right. The terms strip is the row a buyer compares shop to shop. */
.bi-front {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding: 22px; margin-bottom: 22px;
  background: #fff; border: 1px solid var(--color-divider); border-radius: 14px;
}
.bi-front__id { display: flex; align-items: flex-start; gap: 18px; min-width: 0; flex: 1; }
.bi-front__name {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 7px;
  font-size: clamp(23px, 2.4vw, 30px); line-height: 1.15;
}
.bi-front__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.bi-front__line { margin: 0 0 16px; max-width: 60ch; font-size: 14px; color: var(--ink-body); }
.bi-front__terms { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 0; padding-top: 15px; border-top: 1px solid var(--color-divider); }
.bi-front__terms dt { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.bi-front__terms dd { margin: 4px 0 0; font-size: 14.5px; font-weight: 700; }
.bi-front__supplies { font-size: 13px !important; font-weight: 500 !important; max-width: 34ch; }
.bi-front__side { display: flex; flex-direction: column; gap: 10px; width: 232px; flex: none; }

/* The shelves and the in-store search share one line. */
.bi-store__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.bi-store__bar .bi-suppliers__pills { padding: 0; border: 0; flex: 1; }
.bi-store__search {
  display: flex; align-items: center; gap: 8px; width: 232px; flex: none;
  padding: 0 12px; height: 40px;
  background: #fff; border: 1px solid var(--color-divider); border-radius: 9px;
}
.bi-store__search:focus-within { border-color: var(--color-accent-400); }
.bi-store__search-input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 13.5px; }
.bi-store__search-input:focus { outline: none; }

.bi-qty--sm { height: 34px; }
.bi-qty--sm .bi-qty__input { width: 34px; font-size: 13px; }
.bi-store__about { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--color-divider); }

@media (max-width: 1180px) { .bi-store__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .bi-store__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bi-front__side { width: 100%; } }

/* --- product page ----------------------------------------------------------
   Supplier strip, then gallery / facts / buy box, with the open order for that
   supplier held in a rail down the side. */
.bi-front--slim { align-items: center; padding: 16px 20px; }
.bi-front--slim .bi-front__id { flex: 0 1 auto; }
.bi-front__terms--inline { padding-top: 0; border-top: 0; gap: 12px 28px; }

.bi-pdp { padding-bottom: 40px; }
.bi-pdp__main { min-width: 0; }
.bi-pdp__top {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 268px; gap: 24px;
  padding: 20px; background: #fff; border: 1px solid var(--color-divider); border-radius: 14px;
}

.bi-pdp__gallery { display: flex; gap: 12px; min-width: 0; }
.bi-pdp__thumbs { display: flex; flex-direction: column; gap: 8px; flex: none; }
.bi-pdp__thumb {
  width: 56px; height: 56px; padding: 0; cursor: pointer; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: 8px; background: #fff;
}
.bi-pdp__thumb.is-active { border-color: var(--color-accent-600); }
.bi-pdp__stage { position: relative; flex: 1; min-width: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--color-accent-100); }

.bi-pdp__chip {
  display: inline-block; margin-bottom: 9px; padding: 4px 10px; border-radius: 999px;
  background: var(--color-accent-100); color: var(--color-accent-800); font-size: 11.5px; font-weight: 600;
}
.bi-pdp__title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 0 12px; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; }
.bi-pdp__save button {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--color-divider); border-radius: 50%; background: #fff; color: var(--ink-2);
}
.bi-pdp__save button.is-saved { color: var(--color-accent-700); border-color: var(--color-accent-400); }
.bi-pdp__pricing { margin-bottom: 10px; }
.bi-pdp__price { font-size: 27px; }
.bi-pdp__vat { margin-inline-start: 8px; font-size: 12px; color: var(--ink-2); }
.bi-pdp__pack { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.bi-pdp__stock { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.bi-pdp__about { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-body); }
.bi-spec { display: grid; gap: 9px; margin: 0 0 14px; padding-top: 14px; border-top: 1px solid var(--color-divider); }
.bi-spec > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 13px; }
.bi-spec dt { display: flex; align-items: center; gap: 7px; color: var(--ink-2); }
.bi-spec dd { margin: 0; font-weight: 600; text-align: end; }

.bi-pdp__buy { padding: 16px; background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: 12px; }
.bi-pdp__buy-label { margin: 0 0 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.bi-pdp__qty { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bi-pdp__unit { font-size: 12.5px; color: var(--ink-2); }
.bi-pdp__tiers { margin-bottom: 14px; }
.bi-pdp__add { margin-bottom: 8px; justify-content: center; }
.bi-assure { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--color-divider); display: grid; gap: 12px; }
.bi-assure__row { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; }
.bi-assure__row strong { display: block; color: var(--color-text); }
.bi-assure__row span span { color: var(--ink-2); line-height: 1.5; }

.bi-alongside { margin-top: 16px; padding: 18px 20px; background: #fff; border: 1px solid var(--color-divider); border-radius: 14px; }
.bi-alongside__title { margin: 0 0 14px; font-family: var(--font-heading); font-weight: 600; font-size: 16px; }
.bi-alongside__rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.bi-alongside__item { display: flex; align-items: center; gap: 10px; flex: none; width: 268px; padding: 10px; border: 1px solid var(--color-divider); border-radius: 10px; }
.bi-alongside__thumb { width: 52px; height: 52px; flex: none; border-radius: 8px; overflow: hidden; background: var(--color-accent-100); }
.bi-alongside__body { flex: 1; min-width: 0; }
.bi-alongside__name { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-alongside__price { font-size: 12.5px; color: var(--ink-2); }

/* The open order with this supplier. */
.bi-pdp__rail { position: sticky; top: 84px; }
.bi-orderbox { padding: 14px; background: #fff; border: 1px solid var(--color-divider); border-radius: 14px; }
.bi-orderbox__head { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 9px; border: 1px solid var(--color-divider); color: var(--ink-2); font-size: 13px; }
.bi-orderbox__head.is-open { border-color: var(--color-accent-400); background: var(--color-accent-100); color: var(--color-accent-800); }
.bi-orderbox__empty, .bi-orderbox__label { margin: 12px 0 8px; font-size: 12.5px; color: var(--ink-2); }
.bi-orderbox__list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.bi-orderbox__item { display: flex; align-items: center; gap: 9px; }
.bi-orderbox__thumb { width: 42px; height: 42px; flex: none; border-radius: 7px; overflow: hidden; background: var(--color-accent-100); }
.bi-orderbox__body { flex: 1; min-width: 0; }
.bi-orderbox__name { display: block; font-size: 12.5px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-orderbox__qty { font-size: 11.5px; color: var(--ink-2); }
.bi-orderbox__line { font-size: 12.5px; font-weight: 700; }
.bi-orderbox__drop { border: 0; background: none; cursor: pointer; color: var(--ink-2); padding: 4px; }
.bi-orderbox__drop:hover { color: var(--color-danger, #b3261e); }
.bi-orderbox__totals { margin: 0 0 12px; padding-top: 12px; border-top: 1px solid var(--color-divider); display: grid; gap: 7px; }
.bi-orderbox__totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.bi-orderbox__totals dt { color: var(--ink-2); }
.bi-orderbox__totals dd { margin: 0; font-weight: 600; }
.bi-orderbox__grand { padding-top: 8px; border-top: 1px solid var(--color-divider); font-size: 15px !important; }
.bi-orderbox__grand dd { font-weight: 800; }

.bi-pdp__promises { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; padding: 15px 0; }
.bi-pdp__promise { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); }
.bi-pdp__promise strong { color: var(--color-text); }

@media (max-width: 1180px) {
  .bi-pdp { grid-template-columns: 1fr; }
  .bi-pdp__rail { position: static; }
  .bi-pdp__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bi-pdp__buy { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .bi-pdp__top { grid-template-columns: 1fr; }
  .bi-pdp__gallery { flex-direction: column-reverse; }
  .bi-pdp__thumbs { flex-direction: row; overflow-x: auto; }
}

/* --- basket: one card per supplier -----------------------------------------
   Each card is an order in its own right — its own delivery, its own total,
   and its own decision about whether it goes through this checkout. */
.bi-cartpage { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; padding-block: 20px 56px; }
.bi-cartpage__main { min-width: 0; }
.bi-cartpage__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.bi-cartpage__title { margin: 0; font-size: clamp(24px, 2.5vw, 32px); }
.bi-cartpage__note {
  display: flex; align-items: flex-start; gap: 10px; max-width: 46ch; margin: 0;
  padding: 12px 14px; border-radius: 10px;
  background: var(--color-accent-100); font-size: 12.5px; line-height: 1.55; color: var(--ink-body);
}
.bi-cartpage__note strong { display: block; color: var(--color-text); }

.bi-basket { margin-bottom: 16px; background: #fff; border: 1px solid var(--color-divider); border-radius: 14px; overflow: hidden; }
.bi-basket.is-off { background: var(--color-bg); }
.bi-basket.is-off .bi-basket__table { opacity: .72; }
.bi-basket__head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--color-divider); }
/* A tick that is a button: the choice lives on the server, so the control
   posts rather than pretending locally. */
.bi-basket__tick {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center; cursor: pointer;
  border: 1.5px solid var(--color-divider); border-radius: 6px; background: #fff;
}
.bi-basket__tick[aria-pressed="true"] { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.bi-basket__shop { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; color: var(--color-text); }
.bi-basket__name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-family: var(--font-heading); font-weight: 600; font-size: 16px; }
.bi-basket__terms { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-2); }
.bi-basket__terms strong { color: var(--color-text); }

.bi-basket__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bi-basket__table th {
  padding: 9px 18px; text-align: start; font-size: 11.5px; font-weight: 600;
  color: var(--ink-2); background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
}
.bi-basket__table td { padding: 12px 18px; border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.bi-num { text-align: end; }
.bi-basket__product { display: flex; align-items: center; gap: 11px; }
.bi-basket__thumb { width: 48px; height: 48px; flex: none; border-radius: 8px; overflow: hidden; background: var(--color-accent-100); }
.bi-basket__product-name { display: block; font-weight: 600; color: var(--color-text); }
.bi-basket__product-meta { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-2); }
.bi-basket__unit { display: block; font-weight: 600; }
.bi-basket__apply { margin-top: 6px; border: 0; background: none; cursor: pointer; font-size: 11.5px; color: var(--color-accent-700); text-decoration: underline; }

.bi-basket__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 13px 18px; background: var(--color-bg); }
.bi-basket__count { font-size: 12.5px; color: var(--ink-2); }
.bi-basket__sums { display: flex; gap: 26px; margin: 0; }
.bi-basket__sums dt { font-size: 11.5px; color: var(--ink-2); }
.bi-basket__sums dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; }
.bi-basket__total { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.bi-basket__total span { font-size: 12px; color: var(--ink-2); }
.bi-basket__total strong { font-size: 18px; }
.bi-basket__held {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 18px; background: var(--color-warn-soft, #fdf6e3); border-top: 1px solid var(--color-divider);
}
.bi-basket__held p { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 12.5px; color: var(--ink-body); }
.bi-basket__held strong { display: block; color: var(--color-text); }

.bi-cartpage__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
.bi-cartpage__secure { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 12.5px; color: var(--ink-2); }
.bi-cartpage__secure strong { display: block; color: var(--color-text); }

.bi-cartpage__rail { position: sticky; top: 84px; display: grid; gap: 14px; }
.bi-sumbox { padding: 16px; background: #fff; border: 1px solid var(--color-divider); border-radius: 14px; }
.bi-sumbox__title { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 600; font-size: 17px; }
.bi-sumbox__label { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2); }
.bi-sumbox__list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 11px; }
.bi-sumbox__list li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.bi-sumbox__list li > span { flex: 1; min-width: 0; }
.bi-sumbox__name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-sumbox__items { font-size: 11.5px; color: var(--ink-2); }
.bi-sumbox__note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 1000px) {
  .bi-cartpage { grid-template-columns: 1fr; }
  .bi-cartpage__rail { position: static; }
}
@media (max-width: 640px) {
  .bi-basket__table thead { display: none; }
  .bi-basket__table td { display: block; border: 0; padding: 6px 16px; }
  .bi-basket__table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
  .bi-num { text-align: start; }
}

/* --- the product card -----------------------------------------------------
   One card, two sizes. Default for grids and shop fronts — brackets, a
   quantity and a real add button; compact for the rails on the homepage and
   the search results, where the job is to compare rather than to order. */
.bi-pcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--color-divider); border-radius: 12px;
  overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease;
}
.bi-pcard:hover { border-color: var(--color-accent-400); box-shadow: 0 8px 22px rgba(16, 34, 47, .07); }
.bi-pcard__media { position: relative; display: block; aspect-ratio: 4 / 3; flex: none; background: var(--color-accent-100); }
/* The picture's own link fills the frame. Said by class rather than as
   "any anchor in here" — the supplier badge is an anchor in here too, and it
   was being stretched over the whole photograph. */
.bi-pcard__link { position: absolute; inset: 0; }
.bi-pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bi-pcard__save { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; }
.bi-pcard__save button {
  width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--color-divider); border-radius: 50%; background: #fff; color: var(--ink-2);
}
.bi-pcard__save button.is-saved { color: var(--color-accent-600); border-color: var(--color-accent-400); }
/* Hangs off the bottom edge of the picture, so the body starts below it. */
/* The supplier's mark, hanging off the bottom edge of the picture. Sized to
   its content and clipped round, so a square monogram reads as a badge. */
.bi-pcard__supplier {
  position: absolute; inset-block-end: -17px; inset-inline-start: 12px; z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden;
  border: 2px solid #fff; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgba(16, 34, 47, .14);
}
.bi-pcard__supplier .bi-avatar { width: 100%; height: 100%; border: 0; border-radius: 50%; font-size: 15px; }
.bi-pcard__supplier img { width: 100%; height: 100%; object-fit: cover; }
.bi-pcard__body { display: flex; flex-direction: column; flex: 1; padding: 24px 13px 13px; }
.bi-pcard--compact .bi-pcard__body { padding: 12px 12px 13px; }
.bi-pcard__name { margin: 0 0 3px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
/* Two lines, always: cards whose buttons sit at different heights read as
   broken, and product names vary wildly in length. */
.bi-pcard__name a {
  color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em;
}
.bi-pcard__name a:hover { color: var(--color-accent-700); }
.bi-pcard__vendor {
  display: block; margin-bottom: 7px; font-size: 11.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bi-pcard__vendor:hover { color: var(--color-accent-700); }
.bi-pcard__price { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; color: var(--color-text); }
.bi-pcard__price span { font-size: 11.5px; font-weight: 400; color: var(--ink-2); }
.bi-pcard__tiers { width: 100%; margin: 0 0 9px; border-collapse: collapse; font-size: 11.5px; }
.bi-pcard__tiers th, .bi-pcard__tiers td { padding: 3px 6px; text-align: start; border: 1px solid var(--color-divider); }
.bi-pcard__tiers th { font-weight: 600; color: var(--ink-2); background: var(--color-surface-2, #f7f7f7); }
.bi-pcard__tiers td:last-child { font-weight: 600; }
.bi-pcard__stock { display: flex; align-items: center; gap: 6px; margin: 0 0 11px; font-size: 12px; color: var(--color-accent-700); }
.bi-pcard__stock.is-out { color: var(--ink-2); }
.bi-pcard__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Pinned, so every button in a row shares a baseline. */
.bi-pcard__buy { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.bi-pcard__add { flex: 1; justify-content: center; padding-inline: 10px; font-size: 12.5px; }
.bi-pcard--compact .bi-pcard__buy { justify-content: space-between; }
.bi-pcard__add--icon {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--color-accent-400); border-radius: 8px; background: #fff; color: var(--color-accent-700);
}
.bi-pcard__add--icon:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; }
.bi-pcard__add:disabled { opacity: .5; cursor: not-allowed; }

/* The rails the compact card rides on. */
/* The homepage rail carries the wider card: it is the page's main shelf, and
   at 208px the products read as thumbnails rather than as things to buy. The
   search rail stays small — there the cards are evidence for choosing a
   supplier, not the subject. */
.bi-rail--essentials > .bi-pcard { width: 252px; flex: none; }
.bi-hits__rail > .bi-pcard { width: 208px; flex: none; }

/* At that width the compact card can afford the fuller type of the default. */
.bi-rail--essentials > .bi-pcard .bi-pcard__name { font-size: 14.5px; }
.bi-rail--essentials > .bi-pcard .bi-pcard__price { font-size: 17px; }
.bi-rail--essentials > .bi-pcard .bi-pcard__body { padding: 14px; }

/* Three of their products, on the supplier card. */
.bi-supplier__peek { display: flex; gap: 6px; margin: 0 0 14px; }
.bi-supplier__peek-item {
  position: relative; flex: 1; aspect-ratio: 1; border-radius: 8px;
  overflow: hidden; background: var(--color-accent-100);
}
.bi-supplier__peek-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- structure guards ------------------------------------------------------
   Grid and flex children default to min-width:auto, which lets a wide table or
   a long product name push a column past its track instead of scrolling
   inside it. These are the columns that hold such things. */
.bi-dir__main, .bi-pdp__facts, .bi-srow__body { min-width: 0; }
.bi-srow__mark { flex: none; }
.bi-essentials__note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-2); }

/* One supplier's part of an order, in the checkout rail. */
.bi-cosupplier { padding: 11px 0; border-top: 1px solid var(--color-divider); }
.bi-cosupplier__head { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; font-size: 13px; }
.bi-cosupplier__head > span { flex: 1; min-width: 0; }
.bi-cosupplier__lines { list-style: none; margin: 0; padding: 0 0 0 30px; display: grid; gap: 4px; }
.bi-cosupplier__lines li { display: flex; gap: 8px; font-size: 12px; color: var(--ink-2); }
.bi-cosupplier__qty { flex: none; }
.bi-cosupplier__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The checkout's step cards, in the same material as the basket's. */
.bi-cartpage__main > .bi-panel {
  padding: 18px; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--color-divider); border-radius: 14px;
}
.bi-cartpage__main > .bi-panel > .bi-panel__title {
  margin: 0 0 14px; font-family: var(--font-heading); font-weight: 600; font-size: 17px;
}

/* --- checkout ---------------------------------------------------------------
   The basket's material, with a progress bar and the promises along the
   bottom. */
.bi-cohead { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.bi-steps { list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.bi-steps__step { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.bi-steps__step + .bi-steps__step::before { content: ""; width: 26px; height: 1px; background: var(--color-divider); }
.bi-steps__step span {
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: var(--color-surface-2, #eee); font-size: 11.5px; font-weight: 700;
}
.bi-steps__step.is-current { color: var(--color-text); font-weight: 600; }
.bi-steps__step.is-current span { background: var(--color-accent-600); color: #fff; }

.bi-copromises {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  margin: 16px 0 0; padding: 16px 18px;
  background: #fff; border: 1px solid var(--color-divider); border-radius: 14px;
}
.bi-copromises li { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--ink-2); }
.bi-copromises strong { display: block; color: var(--color-text); }
@media (max-width: 860px) { .bi-copromises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- order placed ---------------------------------------------------------- */
.bi-done {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px;
  padding: 22px; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--color-divider); border-radius: 14px;
}
.bi-done__seal {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: var(--color-accent-600);
}
.bi-done__title { margin: 0 0 6px; font-size: clamp(21px, 2.2vw, 27px); line-height: 1.2; }
.bi-done__text { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-body); max-width: 62ch; }
.bi-done__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.bi-done__next {
  grid-column: 1 / -1; list-style: none; display: grid; gap: 8px;
  margin: 4px 0 0; padding: 14px 16px;
  background: var(--color-accent-100); border-radius: 10px;
}
.bi-done__next li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-body); }

/* One supplier's part of the order. */
.bi-part { border-bottom: 1px solid var(--color-divider); }
.bi-part:last-child { border-bottom: 0; }
.bi-part__head { display: flex; align-items: center; gap: 9px; margin: 0; padding: 12px 18px; background: var(--color-bg); font-size: 13.5px; }
.bi-part__head a, .bi-part__head > span:not(.bi-part__count) { font-weight: 600; color: var(--color-text); }
.bi-part__count { margin-inline-start: auto; font-size: 12px; color: var(--ink-2); }
.bi-part__note { display: flex; align-items: center; gap: 7px; margin: 0; padding: 10px 18px 14px; font-size: 12px; color: var(--ink-2); }
.bi-done__paid { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 0; font-size: 12.5px; color: var(--ink-2); }
.bi-done__paid strong { display: block; color: var(--color-text); }
.bi-done__addr { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-body); }
.bi-done__addr strong, .bi-done__addr span { display: block; color: var(--color-text); }
@media (max-width: 620px) { .bi-done { grid-template-columns: 1fr; } }

/* --- account rail ---------------------------------------------------------- */
.bi-anav { display: grid; gap: 2px; margin-bottom: 12px; }
.bi-anav__link {
  display: block; padding: 8px 10px; border-radius: 8px;
  font-size: 13.5px; color: var(--ink-body);
}
.bi-anav__link:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
.bi-anav__link.is-current { background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 600; }
.bi-anav__signout {
  width: 100%; padding: 9px 10px; cursor: pointer;
  border: 1px solid var(--color-divider); border-radius: 8px; background: none;
  font: inherit; font-size: 13px; color: var(--ink-2);
}
.bi-anav__signout:hover { border-color: var(--color-accent-400); color: var(--color-accent-700); }

/* --- an order, as the buyer follows it -------------------------------------- */
.bi-ocard { margin-bottom: 16px; background: #fff; border: 1px solid var(--color-divider); border-radius: 14px; overflow: hidden; }
.bi-ocard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--color-divider); }
.bi-ocard__number { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 5px; font-family: var(--font-heading); font-weight: 600; font-size: 17px; }
.bi-ocard__flag--warn { background: var(--color-warn-soft, #fdf6e3); color: var(--color-warn, #9a6b00); }
.bi-ocard__meta { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.bi-ocard__meta strong { color: var(--color-text); }
.bi-ocard__aside { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bi-ocard__eta { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ink-2); }
.bi-ocard__exception { display: flex; align-items: center; gap: 9px; margin: 0; padding: 13px 18px; background: var(--color-warn-soft, #fdf6e3); font-size: 13px; color: var(--ink-body); }

/* The tracker. Steps that have happened are filled; the one it is on is
   ringed; the rest are hollow and say so. */
.bi-track { list-style: none; display: flex; margin: 0; padding: 18px; gap: 4px; }
.bi-track__step { position: relative; flex: 1; text-align: center; font-size: 11.5px; color: var(--ink-2); }
.bi-track__step::before {
  content: ""; position: absolute; top: 12px; inset-inline-start: -50%;
  width: 100%; height: 2px; background: var(--color-divider);
}
.bi-track__step:first-child::before { display: none; }
.bi-track__step.is-done::before, .bi-track__step.is-current::before { background: var(--color-accent-500); }
.bi-track__dot {
  position: relative; z-index: 1; width: 24px; height: 24px; margin: 0 auto 7px;
  display: grid; place-items: center; border-radius: 50%;
  background: #fff; border: 2px solid var(--color-divider);
}
.bi-track__step.is-done .bi-track__dot, .bi-track__step.is-current .bi-track__dot {
  background: var(--color-accent-600); border-color: var(--color-accent-600);
}
.bi-track__step.is-current .bi-track__dot { box-shadow: 0 0 0 4px var(--color-accent-100); }
.bi-track__label { display: block; font-weight: 600; color: var(--color-text); }
.bi-track__step:not(.is-done):not(.is-current) .bi-track__label { color: var(--ink-2); font-weight: 500; }
.bi-track__when { display: block; margin-top: 2px; }

.bi-ocard__body { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 0; border-top: 1px solid var(--color-divider); }
.bi-ocard__parts { min-width: 0; }
.bi-ocard__sum { padding: 16px 18px; border-inline-start: 1px solid var(--color-divider); background: var(--color-bg); }
.bi-oitems { list-style: none; margin: 0; padding: 12px 18px; display: grid; gap: 12px; }
.bi-oitems li { display: flex; align-items: center; gap: 11px; font-size: 13px; }
.bi-oitems__body { flex: 1; min-width: 0; }
.bi-ocard__thumbs { display: flex; align-items: center; gap: 8px; padding: 14px 18px; flex-wrap: wrap; }
.bi-ocard__more, .bi-ocard__from { font-size: 12px; color: var(--ink-2); }
.bi-ocard__from { margin-inline-start: auto; }

@media (max-width: 900px) {
  .bi-ocard__body { grid-template-columns: 1fr; }
  .bi-ocard__sum { border-inline-start: 0; border-top: 1px solid var(--color-divider); }
  .bi-track { overflow-x: auto; }
  .bi-track__step { min-width: 96px; }
}

/* "All", inside a tick-box group: a link out of the filter, not a box. */
.bi-filters__row--all { padding-inline-start: 25px; color: var(--ink-body); }
.bi-filters__row--all.is-current { font-weight: 600; color: var(--color-accent-800); }