/* Cyber City · the brands page /brands/ (theme 0.44.0, Rayan 12 Oct 2026: direction B "the aisles"; brief
   09-التصميم/pages/brands/00-brief.md, prototype proto/brands/b.html).
   Each group of brands is an aisle: a dark panel with one product lit like a piece in a gallery, and that group's
   brands in a row that moves sideways. A brand stands in full once, in its home aisle; elsewhere a short card points to
   it. On a wide screen the finder and the aisles stay on a rail at the left, in their own box with the aisles.
   Same rules as the theme's own sheets: tokens only, classes start with ecc-brb (or is-). */


.ecc-brb { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ecc-gap); }
.ecc-brb > * { min-width: 0; }
.ecc-brb__label { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; color: var(--ecc-ink-2); }

/* ===================================================================== the head: the name, then the aisle signs */
.ecc-brb__head { display: grid; gap: var(--ecc-s-6); padding-top: var(--ecc-s-7); overflow: hidden; }
.ecc-brb__headtop { display: grid; gap: var(--ecc-s-5); align-items: end; }
.ecc-brb__words { display: grid; gap: var(--ecc-s-4); max-width: 48em; }
.ecc-brb__title { margin: 0; font-size: var(--ecc-t-display); line-height: var(--ecc-lh-display); letter-spacing: var(--ecc-ls-display); text-wrap: balance; }
.ecc-brb__lead { margin: 0; max-width: 40em; text-wrap: pretty; }
.ecc-brb__total { display: flex; align-items: baseline; gap: var(--ecc-s-3); margin: 0; }
.ecc-brb__tn { font-size: clamp(56px, 6.4vw, 96px); color: var(--ecc-ink); }
.ecc-brb__total .ecc-mono { color: var(--ecc-ink-2); }

/* the signs hang from one line, like the signs over a store's aisles. A phone skips them: the aisle strip under the
   finder does the same job one screen lower. */
.ecc-brb__signs { display: none; }
.ecc-brb__ceiling { --ecc-trace: var(--ecc-line-strong); }
.ecc-brb__signlist { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--ecc-gap); margin: 0; padding: 0; list-style: none; }
.ecc-brb__signlist > li { position: relative; display: flex; padding-top: var(--ecc-s-4); }
.ecc-brb__signlist > li::before { content: ""; position: absolute; top: 0; left: var(--ecc-s-5); width: 1.5px; height: var(--ecc-s-4); background: var(--ecc-line-strong); } /* the wire */
.ecc-brb__sign {
  flex: 1; display: grid; grid-template-rows: auto auto 1fr; gap: var(--ecc-s-2); align-content: start; min-height: calc(var(--ecc-s-9) * 1.35);
  padding: var(--ecc-s-4); color: var(--ecc-ink); text-decoration: none; transition: box-shadow var(--ecc-d-fast) var(--ecc-ease-out);
}
.ecc-brb__sign > * { position: relative; z-index: 1; }
.ecc-brb__sn { font-size: 32px; color: var(--ecc-ink); }
.ecc-brb__sname { font-weight: var(--ecc-fw-strong); font-stretch: var(--ecc-wdth-heading); line-height: 1.2; }
.ecc-brb__smeta { align-self: end; color: var(--ecc-ink-2); }
.ecc-brb__sign:focus-visible { outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset); }
.ecc-brb__sign[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--ecc-spark), 0 0 12px color-mix(in srgb, var(--ecc-lime) 24%, transparent); }
@media (hover: hover) and (pointer: fine) { .ecc-brb__sign:hover { box-shadow: inset 0 0 0 1px var(--ecc-spark); } }
@media (min-width: 761px) {
  .ecc-brb__headtop { grid-template-columns: minmax(0, 1fr) auto; }
  .ecc-brb__signs { display: grid; gap: 0; }
}

/* ===================================================================== the finder and the aisles share one box */
/* The rail (wide screens) and the strip (phones and tablets) stay with the visitor, each inside its own box: they stop
   where the aisles end and never ride over "Not on the list?" (the rule of check-sticky). */
.ecc-brb__main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ecc-gap); align-items: start; }
.ecc-brb__main > * { grid-column: 1 / -1; min-width: 0; }
.ecc-brb__rail { display: grid; gap: var(--ecc-s-4); align-content: start; }
.ecc-brb__rl { margin: 0 0 var(--ecc-s-2); color: var(--ecc-ink-2); }

.ecc-brb__search { display: grid; gap: var(--ecc-s-2); margin: 0; }
.ecc-brb__field { position: relative; }
.ecc-brb__field .ecc-icon { position: absolute; left: 14px; top: 50%; margin-top: -10px; color: var(--ecc-ink); pointer-events: none; }
.ecc-brb__field .ecc-input { min-height: calc(var(--ecc-hit) + var(--ecc-s-2)); padding-left: 44px; font-size: var(--ecc-t-body-lg); }
.ecc-brb__qh { margin: 0; }
.ecc-brb__status { margin: 0; }
/* shell.js puts its arrows a third of the way down a row (over a product photo); here they sit on the name plate */
.ecc-brb .ecc-row__step { top: calc(var(--ecc-s-3) + 54px); }
.ecc-brb__status:empty { display: none; }

.ecc-brb__lts { display: flex; flex-wrap: wrap; gap: var(--ecc-s-1); margin: 0; padding: 0; list-style: none; }
.ecc-brb__lt {
  display: grid; place-items: center; width: var(--ecc-hit); height: var(--ecc-hit);
  border: 1px solid var(--ecc-line-strong); border-radius: var(--ecc-r-sm); background: var(--ecc-field-bg); color: var(--ecc-ink);
  font-family: var(--ecc-f-mono); font-size: var(--ecc-t-label); font-weight: var(--ecc-fw-mono); font-stretch: var(--ecc-wdth-mono); line-height: 1; text-decoration: none;
  transition: background-color var(--ecc-d-fast) var(--ecc-ease-out), border-color var(--ecc-d-fast) var(--ecc-ease-out), color var(--ecc-d-fast) var(--ecc-ease-out), translate var(--ecc-d-press) var(--ecc-ease-out);
}
.ecc-brb__lt:active { translate: 0 var(--ecc-press); }
.ecc-brb__lt[aria-pressed="true"] { background: var(--ecc-selected-bg); color: var(--ecc-selected-fg); border-color: var(--ecc-selected-line); box-shadow: inset 0 -3px 0 var(--ecc-lime); }
.ecc-brb__lt:focus-visible { outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset); }
@media (hover: hover) and (pointer: fine) { .ecc-brb__lt:hover { border-color: var(--ecc-ink); background: var(--ecc-wash); } .ecc-brb__lt[aria-pressed="true"]:hover { background: var(--ecc-selected-bg); } }

/* the aisles on the rail (wide screens only), the way the topics sit on the rail of /faq/ */
.ecc-brb__go { display: none; }
.ecc-brb__golist { display: grid; margin: 0; padding: 0; list-style: none; }
.ecc-brb__golist li[hidden] { display: none; }
.ecc-brb__goto {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ecc-s-3);
  min-height: calc(var(--ecc-hit) + var(--ecc-s-1)); padding: 0 var(--ecc-s-3); border-left: 2px solid var(--ecc-line);
  color: var(--ecc-ink-2); font-weight: var(--ecc-fw-strong); text-decoration: none;
}
.ecc-brb__goto[aria-current="true"] { border-color: var(--ecc-spark); background: var(--ecc-wash); color: var(--ecc-ink); }
.ecc-brb__goto:focus-visible { outline: var(--ecc-focus-ring); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .ecc-brb__goto:hover { color: var(--ecc-ink); } }
.ecc-brb__gonum { font-family: var(--ecc-f-mono); font-size: var(--ecc-t-micro); font-weight: var(--ecc-fw-mono); letter-spacing: var(--ecc-ls-label); color: var(--ecc-ink-2); }
.ecc-brb__gocount { font-size: 24px; font-weight: 900; color: var(--ecc-ink); }

/* the aisles, one under the other */
.ecc-brb__aisles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ecc-gap); }

/* the strip of aisles on a phone or a tablet: it stays at the top of the aisles while they scroll by */
.ecc-brb__strip { position: sticky; top: var(--brb-top, 0); z-index: var(--ecc-z-raised); transition: top var(--ecc-d-base) var(--ecc-ease-out); padding: var(--ecc-s-2) 0; background: var(--ecc-canvas); }
.ecc-brb__striplist { display: flex; gap: var(--ecc-s-2); margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ecc-brb__striplist::-webkit-scrollbar { display: none; }
.ecc-brb__striplist li { flex: none; }
.ecc-brb__striplist li[hidden] { display: none; }
.ecc-brb__sc { white-space: nowrap; text-decoration: none; font-weight: var(--ecc-fw-medium); }
.ecc-brb__sc[aria-current="true"] { background: var(--ecc-selected-bg); color: var(--ecc-selected-fg); border-color: var(--ecc-selected-line); }
.ecc-brb__sc[aria-current="true"]::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--ecc-r-voxel); background: var(--ecc-lime); }
.ecc-brb__sc[aria-current="true"] .ecc-brb__dc { color: inherit; }
@media (hover: hover) and (pointer: fine) { .ecc-brb__sc:hover { border-color: var(--ecc-ink); } }

@media (min-width: 1181px) {
  .ecc-brb__rail { grid-column: 1 / span 3; position: sticky; top: var(--ecc-gap); }
  .ecc-brb__aisles { grid-column: 4 / -1; }
  .ecc-brb__go { display: block; }
  .ecc-brb__strip { display: none; }
}

/* ===================================================================== one aisle: the panel, then the shelf */
.ecc-brb__aisle { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ecc-gap); scroll-margin-top: var(--ecc-s-9); }
.ecc-brb__aisle[hidden] { display: none; }
@media (min-width: 761px) { .ecc-brb__aisle { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; } }
@media (min-width: 1181px) { .ecc-brb__aisle { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); scroll-margin-top: var(--ecc-s-5); } }

.ecc-brb__panel { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--ecc-s-4); padding: var(--ecc-s-5); overflow: hidden; isolation: isolate; }
.ecc-brb__pwords { position: relative; z-index: 2; display: grid; gap: var(--ecc-s-2); }
.ecc-brb__asign { display: flex; align-items: center; justify-content: space-between; gap: var(--ecc-s-3); margin: 0; }
.ecc-brb__al { display: flex; align-items: center; gap: var(--ecc-s-2); color: var(--ecc-ink-2); }
.ecc-brb__an { font-size: 44px; color: var(--ecc-ink); }
.ecc-brb__ah { margin: 0; text-wrap: balance; }
.ecc-brb__am { margin: 0; color: var(--ecc-ink-2); }

/* the product, lit on its dark floor. Its edges melt into the panel (a mask on all four sides), so the photo has no
   frame in Day or in Night. The print (b.js) sits in the same masked box. */
.ecc-brb__photo { position: relative; margin: 0 calc(var(--ecc-s-5) * -1) calc(var(--ecc-s-5) * -1); aspect-ratio: 16 / 10; }
.ecc-brb__pic {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 86%, transparent);
  mask-composite: intersect;
}
.ecc-brb__pic img, .ecc-brb__print { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ecc-brb__pic img { object-fit: cover; object-position: var(--pos, 50% 60%); transition: opacity var(--ecc-d-base) var(--ecc-ease-out); }
.ecc-brb__print { z-index: 1; pointer-events: none; opacity: 0; transition: opacity var(--ecc-d-base) var(--ecc-ease-out); }
.ecc-brb__photo.is-printing .ecc-brb__print { opacity: 1; transition: none; }
.ecc-brb__cap { position: absolute; left: var(--ecc-s-5); bottom: var(--ecc-s-4); z-index: 2; margin: 0; color: var(--ecc-ink-2); }
@media (min-width: 761px) { .ecc-brb__photo { aspect-ratio: auto; min-height: calc(var(--ecc-s-9) * 2.6); } }

/* A wide screen with a mouse, and motion on: the photo prints itself in squares the first time it comes into view
   (b.js). Until then it is hidden from the first paint, so it cannot flash; if b.js never starts, it shows after 3 s. */
@media (min-width: 1181px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.ecc-js:not([data-ecc-motion="paused"]) .ecc-brb__photo:not(.is-shown) img { opacity: 0; }
  html.ecc-js:not([data-ecc-motion="paused"]) .ecc-brb:not([data-brb-armed]) .ecc-brb__photo:not(.is-shown) img { animation: ecc-brb-show 0s 3s forwards; }
}
@keyframes ecc-brb-show { to { opacity: 1; } }

/* the shelf: the brands of this aisle in a row that scrolls sideways inside its own box (the page never does).
   shell.js puts an arrow on each side while there is more that way. One brand fills the shelf; two share it. */
.ecc-brb__shelf { display: grid; min-width: 0; container-type: inline-size; }
.ecc-brb__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--ecc-gap); height: 100%; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.ecc-row:has(> .ecc-brb__track) { height: 100%; }
@container (min-width: 520px) { .ecc-brb__track { grid-auto-columns: calc(var(--ecc-s-9) * 3); } }
.ecc-brb__shelf[data-n="1"] .ecc-brb__track { grid-auto-columns: 100%; }
@container (min-width: 600px) { .ecc-brb__shelf[data-n="2"] .ecc-brb__track { grid-auto-columns: calc(50% - var(--ecc-gap) / 2); } }
.ecc-brb__item { display: flex; min-width: 0; scroll-snap-align: start; }
.ecc-brb__item[hidden] { display: none; }

/* ===================================================================== a brand */
.ecc-brb__card {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: stretch; gap: var(--ecc-s-4); padding: var(--ecc-s-3);
  container-type: inline-size; scroll-margin: var(--ecc-s-9) var(--ecc-s-5); transition: box-shadow var(--ecc-d-fast) var(--ecc-ease-out);
}
.ecc-brb__cmain { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--ecc-s-4); min-width: 0; }
@media (hover: hover) and (pointer: fine) { .ecc-brb__card:hover { box-shadow: var(--ecc-elev-raised); } }
.ecc-brb__card:target { box-shadow: inset 0 0 0 2px var(--ecc-spark); }

/* the name: the brand strip's own word (.ecc-hbrands__name of the front page), in our letters and our colours only.
   A logo the owner adds later takes this plate. Long names shrink to the card and never break inside the word. */
.ecc-brb__plate { display: flex; align-items: center; min-height: calc(var(--ecc-s-9) + var(--ecc-s-3)); padding: 0 var(--ecc-s-4); border-radius: var(--ecc-r-sm); background-color: var(--ecc-surface-2); overflow: hidden; }
.ecc-brb__word {
  margin: 0; color: var(--ecc-ink); white-space: nowrap;
  font-family: var(--ecc-f-text); font-weight: var(--ecc-fw-display); font-stretch: var(--ecc-wdth-display); text-transform: uppercase;
  font-size: clamp(1.375rem, 11.5cqi, 2.5rem); line-height: 1; letter-spacing: -.01em;
}
.ecc-brb__cbody { display: flex; flex-direction: column; gap: var(--ecc-s-4); padding: 0 var(--ecc-s-2) var(--ecc-s-2); min-width: 0; }
.ecc-brb__count { display: flex; align-items: baseline; gap: var(--ecc-s-2); margin: 0; }
.ecc-brb__n { font-size: 32px; color: var(--ecc-ink); }
.ecc-brb__nl { color: var(--ecc-ink-2); }
.ecc-brb__line { margin: 0; color: var(--ecc-ink-2); line-height: 1.5; text-wrap: pretty; }
.ecc-brb__depts { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2); margin: 0; padding: 0; list-style: none; }
.ecc-brb__dept { padding: 0 var(--ecc-s-3); font-size: var(--ecc-t-small); font-weight: var(--ecc-fw-medium); text-decoration: none; }
.ecc-brb__dc { color: var(--ecc-ink-2); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .ecc-brb__dept:hover { border-color: var(--ecc-ink); background: var(--ecc-wash); } }
.ecc-brb__also { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ecc-s-4); margin: 0; }
.ecc-brb__alsol { flex-basis: 100%; color: var(--ecc-ink-2); }
.ecc-brb__alink { font-size: var(--ecc-t-small); font-weight: var(--ecc-fw-medium); }
.ecc-brb__match { margin: 0; padding: var(--ecc-s-2) var(--ecc-s-3); border-left: 2px solid var(--ecc-spark); background: var(--ecc-wash); font-size: var(--ecc-t-small); line-height: 1.45; }
.ecc-brb__match[hidden] { display: none; }
.ecc-brb__foot { display: grid; gap: var(--ecc-s-2); margin-top: auto; }
.ecc-brb__all { margin: 0; color: var(--ecc-ink-2); text-align: center; }

/* one brand in its aisle (Hiboy in Scooters): the shelf is the brand's, so its models are listed beside it */
.ecc-brb__models { display: grid; align-content: start; gap: var(--ecc-s-3); padding: var(--ecc-s-2); min-width: 0; }
.ecc-brb__ml { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; color: var(--ecc-ink-2); }
.ecc-brb__mlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ecc-s-4); margin: 0; padding: 0; list-style: none; }
.ecc-brb__mlist li {
  display: flex; align-items: center; gap: var(--ecc-s-2); min-height: var(--ecc-s-6); border-bottom: 1px solid var(--ecc-line); overflow-wrap: anywhere;
  font-family: var(--ecc-f-mono); font-size: var(--ecc-t-micro); font-weight: var(--ecc-fw-mono); font-stretch: var(--ecc-wdth-mono); letter-spacing: var(--ecc-ls-label); line-height: 1.3; text-transform: uppercase;
}
.ecc-brb__mlist li::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--ecc-trace); }
@container (min-width: 600px) {
  .ecc-brb__card--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ecc-s-5); }
  .ecc-brb__card--wide .ecc-brb__word { font-size: clamp(2rem, 8cqi, 4rem); }
  .ecc-brb__card--wide .ecc-brb__models { padding-top: var(--ecc-s-3); }
}

/* ===================================================================== nothing found */
.ecc-brb__none { display: grid; gap: var(--ecc-s-3); justify-items: start; }
.ecc-brb__none[hidden] { display: none; }
.ecc-brb__none p { margin: 0; }
.ecc-brb__noneacts { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2) var(--ecc-s-3); margin-top: var(--ecc-s-2); }
.ecc-brb__owners { margin: var(--ecc-s-2) var(--ecc-s-2) 0; }
.ecc-brb__owners + .ecc-brb__owners { margin-top: 0; }

/* ===================================================================== not on the list? */
.ecc-brb__end { display: grid; gap: var(--ecc-s-5); }
.ecc-brb__endhead { display: grid; gap: var(--ecc-s-2); }
.ecc-brb__endhead .ecc-h2 { margin: 0; }
.ecc-brb__ways { display: grid; gap: var(--ecc-gap); margin: 0; padding: 0; list-style: none; }
.ecc-brb__way { display: grid; align-content: start; justify-items: start; gap: var(--ecc-s-3); padding: var(--ecc-s-5); border: 1px solid var(--ecc-line); border-radius: var(--ecc-r-sm); }
.ecc-brb__way > .ecc-icon { color: var(--ecc-ink); --ecc-icon-spark: var(--ecc-spark); }
.ecc-brb__way p { margin: 0; max-width: 32em; }
@media (min-width: 761px) { .ecc-brb__ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===================================================================== less motion, print */
@media (prefers-reduced-motion: reduce) {
  .ecc-brb__pic img, .ecc-brb__print, .ecc-brb__card, .ecc-brb__sign { transition: none; }
}
@media print {
  .ecc-brb__strip, .ecc-brb__rail, .ecc-brb__print { display: none !important; }
  .ecc-brb__track { grid-auto-flow: row; overflow: visible; }
}

/* ===================================================================== theme 0.44.0: a logo the owner added, the short card */
/* The brand's own Thumbnail (Products › Brands), when the owner adds one the brand gave or allows: it takes the plate. */
.ecc-brb__word--logo { display: flex; align-items: center; width: 100%; height: 100%; }
.ecc-brb__logo { display: block; width: auto; max-width: 80%; height: auto; max-height: calc(var(--ecc-s-8) + var(--ecc-s-2)); object-fit: contain; }

/* the short card: the brand in an aisle that is not its home. It says how many it has here, its departments here, and
   points to its full card (one Shop button per brand on the page). Lighter than a full card: no fill, a dashed edge. */
.ecc-brb__card--also { background: transparent; box-shadow: inset 0 0 0 1px var(--ecc-line-strong); }
.ecc-brb__card--also .ecc-brb__plate { min-height: var(--ecc-s-8); background-color: transparent; box-shadow: inset 0 0 0 1px var(--ecc-line); }
.ecc-brb__card--also .ecc-brb__word { font-size: clamp(1.125rem, 9cqi, 1.75rem); }
.ecc-brb__card--also .ecc-brb__n { font-size: 24px; }
.ecc-brb__home { gap: var(--ecc-s-2); font-size: var(--ecc-t-small); font-weight: var(--ecc-fw-medium); }
.ecc-brb__home .ecc-icon { rotate: 90deg; }
@media (hover: hover) and (pointer: fine) { .ecc-brb__card--also:hover { box-shadow: inset 0 0 0 1px var(--ecc-ink); } }
.ecc-brb__card:target, .ecc-brb__card.is-target { box-shadow: inset 0 0 0 2px var(--ecc-spark); }

/* the "Authorized dealer" badge on a brand's card (theme 0.49.0, shell.css § 19) */
.ecc-brb__dealer { margin: calc(var(--ecc-s-2) * -1) 0 0; }