/* ==========================================================================
   Cyber City · site shell v0.1 · 2026-10-02 (M2.2)
   The frame of every page: the notice bar (temporary), the header, the department panels, the search, the menu
   drawer of phones and tablets, and the footer. Load order: tokens.css, fonts.css, pixel-kit.css, foundations.css,
   motifs.css, motion.css, then this file. Pairs with js/shell.js; every part works, more plainly, without it.

   Rules of this file
   · Every class starts with ecc-. States are the system's is-* classes. The Day and Night switch and the motion
     switch are the pixel kit's: this file reaches them by their data attributes and writes no pk- class.
   · Every colour, font, radius, duration and space is a token. Private values of a component are --_names set from
     tokens. The few sizes the scale does not have are written once, here, each with its reason:
       140px, 148px, 168px   the header and footer logo (logo rules: the small lockup is drawn 140 to 200 px wide)
       1px                   hairlines
   · One tracking for mono labels: --ecc-ls-label, through .ecc-mono. This file sets no letter-spacing.
   · Movement is translate and opacity, inside (prefers-reduced-motion: no-preference). The shell has almost none:
     the press (foundations), the drawer slide, the fade of a panel, the phone header stepping aside.
   · Nothing here picks a theme: Day is the default, Night is <html data-theme="night">, set by the visitor's switch.

   Widths: 1520 and up, the full header (search field in the bar) · 1181 to 1519, search folds into a button ·
   761 to 1180, the tablet header (logo, search field, cart, menu) · 760 and below, the phone header (64 px).

   Contents
   0 page frame · 1 NOTICE (temporary) · 2 header bar · 3 departments and their panels · 4 search · 5 account, cart,
   switch · 6 the header below 1181 · 7 menu drawer · 8 footer · 9 without JavaScript · 10 reduced motion ·
   11 forced colours · 12 print
   ========================================================================== */

/* ============================================================ 0 · PAGE FRAME */
/* The page behind the open drawer does not scroll. On <html> only: the same rule on <body> would unstick the header.
   Where the scroll bar takes room, shell.js keeps that room as padding while the lock is on, so nothing moves. */
html.ecc-lock { overflow: hidden; }
/* The skip link is the first Tab stop: while it has focus it sits above the header. */
.ecc-skip:focus { z-index: var(--ecc-z-overlay); }
/* The page's own wrap follows the header, which already holds the gap above it. */
.ecc-page { padding-top: 0; padding-inline: max(var(--ecc-gap), env(safe-area-inset-left)) max(var(--ecc-gap), env(safe-area-inset-right)); }
main:focus { outline: none; } /* the target of the skip link takes focus without drawing a ring around the whole page */

/* ================================================================ 1 · NOTICE */
/* TEMPORARY: remove with the notice. The "we are rebuilding" bar above the header: one block of markup (ecc:notice
   in the header template), this block of CSS, and notice() in shell.js. Remove the three together.
   Without a script, with reduced motion, while it is paused by its own button and while the site's motion switch is
   on pause, it is a still line that wraps, so every word can be read. shell.js adds .is-running, and only then does
   it move: one slow loop after another (unlike the hero ticker, which rests after one), because it is a notice that
   has to be seen. That is why it carries its own pause button, holds under the pointer and under keyboard focus,
   and obeys the motion switch. It is a dark panel in Day and in Night (.ecc-ctx-panel). */
.ecc-notice { background: var(--ecc-panel); color: var(--ecc-ink); border-bottom: 1px solid var(--ecc-panel-border); }
.ecc-notice__bar {
  display: flex; align-items: center; gap: var(--ecc-s-2) var(--ecc-s-4); min-height: calc(var(--ecc-hit) + var(--ecc-s-2));
  padding-block: max(var(--ecc-s-2), env(safe-area-inset-top)) var(--ecc-s-2);
  padding-inline: max(var(--ecc-s-4), env(safe-area-inset-left)) max(var(--ecc-s-4), env(safe-area-inset-right));
}
.ecc-notice__label { display: flex; align-items: center; flex: none; gap: var(--ecc-s-2); color: var(--ecc-ink-2); }
.ecc-notice__view { flex: 1; min-width: 0; }
.ecc-notice__text { line-height: 1.4; }
/* the phone number never breaks across two lines, and it keeps a 44px tap height when the sentence stands still and wraps */
.ecc-notice__text .ecc-link { white-space: nowrap; padding-block: var(--ecc-s-3); } /* inline padding: a taller tap area, the same line height */
.ecc-notice__ctl { margin-block: calc(var(--ecc-s-1) * -1); }
.ecc-notice.is-running .ecc-notice__ctl { margin-block: 0; }
/* the ring of the button stays on the dark bar: lime on the light page beside it would be 1.18:1 */
.ecc-notice__ctl:focus-visible { outline-offset: calc(var(--ecc-s-1) * -1); }
.ecc-notice__ctl svg { display: block; }
.ecc-notice__ctl rect { fill: currentColor; shape-rendering: crispEdges; }
.ecc-notice__pause { display: none; }
.ecc-notice.is-running .ecc-notice__pause { display: inline; }
.ecc-notice.is-running .ecc-notice__play { display: none; }
@media (max-width: 760px) {
  /* still, on a phone: the label on its own line, the sentence under it, the button at the top right */
  .ecc-notice:not(.is-running) .ecc-notice__bar { flex-wrap: wrap; align-items: flex-start; padding-block: max(var(--ecc-s-3), env(safe-area-inset-top)) var(--ecc-s-3); }
  .ecc-notice:not(.is-running) .ecc-notice__label { order: 1; flex: 1; min-height: var(--ecc-s-5); }
  .ecc-notice:not(.is-running) .ecc-notice__ctl { order: 2; margin-block: calc(var(--ecc-s-3) * -1 + var(--ecc-s-1)); }
  .ecc-notice:not(.is-running) .ecc-notice__view { order: 3; flex: none; width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .ecc-notice.is-running .ecc-notice__bar { padding-block: env(safe-area-inset-top) 0; }
  .ecc-notice.is-running .ecc-notice__view {
    display: flex; align-items: center; align-self: stretch; overflow: hidden; /* as tall as the bar: the 44px tap area of the phone link is not clipped */
    -webkit-mask-image: linear-gradient(90deg, transparent, black var(--ecc-s-5), black calc(100% - var(--ecc-s-5)), transparent);
    mask-image: linear-gradient(90deg, transparent, black var(--ecc-s-5), black calc(100% - var(--ecc-s-5)), transparent);
  }
  /* the track holds the sentence as many times as the bar needs, twice over, so the end of a loop is its start.
     --_loop is set by shell.js from the width of the track, so the pace is the same on a phone and on a desktop. */
  .ecc-notice.is-running .ecc-notice__track {
    display: flex; width: max-content; white-space: nowrap; will-change: translate;
    animation: ecc-notice-run var(--_loop, var(--ecc-ticker-loop)) linear infinite;
  }
  .ecc-notice.is-running .ecc-notice__text { flex: none; padding-left: var(--ecc-s-6); }
  .ecc-notice.is-running .ecc-notice__text::after { /* the light between two passes of the sentence: a square voxel */
    content: ""; display: inline-block; width: var(--ecc-s-2); height: var(--ecc-s-2); margin-left: var(--ecc-s-6); vertical-align: middle;
    border-radius: var(--ecc-r-voxel); background: var(--ecc-lime);
  }
  .ecc-notice.is-running .ecc-notice__view:focus-within .ecc-notice__track,
  .ecc-notice.is-running.is-away .ecc-notice__track { animation-play-state: paused; }
  @media (hover: hover) and (pointer: fine) {
    .ecc-notice.is-running .ecc-notice__view:hover .ecc-notice__track { animation-play-state: paused; }
  }
}
@keyframes ecc-notice-run { to { translate: -50% 0; } }
/* the site's motion switch: shell.js takes .is-running away; this line holds it for the moment before the script answers */
html[data-ecc-motion="paused"] .ecc-notice__track { animation-play-state: paused; }
/* ============================================================== 1 · /NOTICE */

/* ============================================================ 2 · HEADER BAR */
/* Direction B's header: four modules on the page canvas. --_tile is the height of the modules, --_logo the width of
   the logo. The canvas behind the modules is painted, so the header covers the page when it is stuck to the top. */
.ecc-hdr { --_tile: calc(var(--ecc-s-8) + var(--ecc-s-2)); --_logo: 168px; position: relative; z-index: var(--ecc-z-sticky); background: var(--ecc-canvas); }
.ecc-hdr__bar {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 7fr) minmax(0, 3fr) auto; gap: var(--ecc-gap);
  padding-block: var(--ecc-gap);
  padding-inline: max(var(--ecc-gap), env(safe-area-inset-left)) max(var(--ecc-gap), env(safe-area-inset-right));
}
/* the logo tile: a dark panel in both themes, with the small lockup (never under 140px wide) */
.ecc-hdr__logo { display: flex; align-items: center; min-height: var(--_tile); padding: 0 var(--ecc-s-5); text-decoration: none; }
.ecc-hdr__logo img { flex: none; width: var(--_logo); min-width: 140px; height: auto; }

/* ============================================= 3 · DEPARTMENTS AND THEIR PANELS */
/* Short names in mono capitals (.ecc-mono on the list), the approved look. A department that has sub-departments
   opens a panel: without a script its name is a plain link to the department page; shell.js turns it into a button
   (aria-expanded) and shows the chevron. The underline is motion.css's .ecc-underline. */
.ecc-hdr__nav { display: flex; align-items: center; min-height: var(--_tile); padding: 0 var(--ecc-s-2); }
/* A grid, not a flex row: each name takes the width of its words, and when the row is short of room (a translation,
   a narrow window) the short names keep theirs and the long ones share what is left and wrap at their spaces.
   A word is broken only when it is wider than its whole share. */
.ecc-nav {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, max-content); align-items: center; justify-content: space-between;
  column-gap: var(--ecc-s-1); width: 100%; margin: 0; padding: 0; list-style: none;
}
.ecc-nav__item { display: flex; min-width: 0; }
.ecc-nav__link {
  --u-inset: var(--ecc-s-3);
  display: inline-flex; align-items: center; gap: var(--ecc-s-1); min-width: var(--ecc-hit); min-height: var(--ecc-hit); padding: 0 var(--ecc-s-3);
  border-radius: var(--ecc-r-sm); color: var(--ecc-ink); text-align: center; overflow-wrap: anywhere; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ecc-nav__chev--up, .ecc-nav__link[aria-expanded="true"] .ecc-nav__chev { display: none; }
.ecc-nav__link[aria-expanded="true"] .ecc-nav__chev--up { display: inline-block; }
/* open, or the department the visitor is in: the underline stays drawn */
.ecc-nav__link[aria-expanded="true"]::after, .ecc-nav__link[aria-current]::after { scale: 1 1; }

/* The panel: a graphite module under the departments, as wide as their module and one gap below it. The
   sub-departments with their icons, and one line to the department page. A dark panel in Day too, so it stands
   clear of the light page it covers. */
.ecc-nav__panel {
  position: absolute; top: calc(100% + var(--ecc-gap)); left: 0; right: 0; z-index: var(--ecc-z-overlay);
  padding: var(--ecc-s-4) var(--ecc-s-5) var(--ecc-s-5); box-shadow: var(--ecc-elev-overlay);
}
.ecc-nav__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--ecc-s-5);
  margin-bottom: var(--ecc-s-4); border-bottom: 1px solid var(--ecc-line-strong);
}
.ecc-nav__label { display: flex; align-items: center; gap: var(--ecc-s-2); color: var(--ecc-ink-2); }
.ecc-nav__subs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ecc-gap); margin: 0; padding: 0; list-style: none; }
.ecc-nav__sub {
  display: flex; align-items: center; gap: var(--ecc-s-3); min-height: var(--ecc-s-8); padding: var(--ecc-s-2) var(--ecc-s-4);
  border-radius: var(--ecc-r-sm); box-shadow: inset 0 0 0 1px var(--ecc-line); color: var(--ecc-ink); text-decoration: none; overflow-wrap: anywhere;
  transition: background-color var(--ecc-d-fast) var(--ecc-ease-out), box-shadow var(--ecc-d-fast) var(--ecc-ease-out);
}
/* the one spark of a department icon lights on the one under the pointer or the focus, never on a row of them */
@media (hover: hover) and (pointer: fine) {
  .ecc-nav__sub:hover { background: var(--ecc-wash); box-shadow: inset 0 0 0 1px var(--ecc-line-strong); --ecc-icon-spark: var(--ecc-spark); }
}
.ecc-nav__sub:focus-visible { --ecc-icon-spark: var(--ecc-spark); }
.ecc-nav__sub:active { background: var(--ecc-wash-strong); }
@media (prefers-reduced-motion: no-preference) {
  .ecc-nav__panel:not([hidden]) { animation: ecc-shell-in var(--ecc-d-fast) var(--ecc-ease-out); }
}
@keyframes ecc-shell-in { from { opacity: 0; translate: 0 var(--ecc-rise); } }

/* ================================================================ 4 · SEARCH */
/* One form. In the bar it is a field (Enter sends it). Where the bar has no room it folds away: the search button
   of the header opens it as a panel under the bar, with its own Search button. */
.ecc-hdr__search { display: flex; align-items: center; min-height: var(--_tile); padding: 0 var(--ecc-s-3); }
.ecc-hdr__form { display: flex; align-items: center; gap: var(--ecc-s-2); width: 100%; }
.ecc-hdr__form .ecc-input { flex: 1; min-width: 0; }
.ecc-hdr__go, .ecc-hdr__search-btn { display: none; }

/* =============================================== 5 · ACCOUNT, CART, DAY AND NIGHT */
.ecc-hdr__util { display: flex; align-items: center; justify-content: flex-end; gap: var(--ecc-s-1); min-height: var(--_tile); padding: 0 var(--ecc-s-2); }
.ecc-hdr__util .ecc-iconbtn { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ecc-hdr__menu-btn { display: none; }
/* the cart count: a small square on the corner of the bag. A real number from the cart, never a decoration.
   Ink by day, lime at night (the primary button's pair), and hidden while the cart is empty. */
.ecc-hdr__count {
  position: absolute; top: calc(var(--ecc-s-1) * -1); right: calc(var(--ecc-s-1) * -1); display: grid; place-items: center;
  min-width: calc(var(--ecc-s-4) + var(--ecc-s-1)); height: calc(var(--ecc-s-4) + var(--ecc-s-1)); padding: 0 var(--ecc-s-1);
  border-radius: var(--ecc-r-voxel); background: var(--ecc-btn-bg); color: var(--ecc-btn-fg); box-shadow: 0 0 0 2px var(--ecc-surface);
  font-family: var(--ecc-f-mono); font-size: var(--ecc-t-micro); font-weight: var(--ecc-fw-mono); font-stretch: var(--ecc-wdth-mono); line-height: 1;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
/* The Day and Night switch is the system's, with its markup unchanged. Where the bar is short of room its words
   "Night mode" leave the row and show as a small label under the switch, on hover and on keyboard focus.
   The words stay in the markup, so the switch keeps its name. */
@media (max-width: 1699px) {
  .ecc-hdr__util [data-pk-theme-toggle] { position: relative; justify-content: center; gap: 0; padding: 0 var(--ecc-s-1); }
  .ecc-hdr__util [data-pk-theme-toggle] > span:last-child {
    position: absolute; top: calc(100% + var(--ecc-s-2)); right: 0; z-index: var(--ecc-z-overlay); padding: var(--ecc-s-2) var(--ecc-s-3);
    border-radius: var(--ecc-r-sm); background: var(--ecc-panel-2); color: var(--ecc-on-panel); box-shadow: var(--ecc-elev-overlay);
    white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden;
  }
  .ecc-hdr__util [data-pk-theme-toggle]:focus-visible > span:last-child { opacity: 1; visibility: visible; }
  @media (hover: hover) and (pointer: fine) {
    .ecc-hdr__util [data-pk-theme-toggle]:hover > span:last-child { opacity: 1; visibility: visible; }
  }
}

/* ============================================== 6 · THE HEADER BELOW 1181 PX */
/* 1181 to 1519: the search field leaves the bar and the search button takes its place. */
@media (min-width: 1181px) and (max-width: 1519px) {
  .ecc-hdr__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ecc-hdr__logo { padding: 0 var(--ecc-s-4); }
}
/* The folded search (760 and below, and 1181 to 1519). Without a script it is a row of its own under the bar.
   With one it is a panel under the bar that the search button opens. */
@media (max-width: 760px), (min-width: 1181px) and (max-width: 1519px) {
  .ecc-hdr__search { grid-column: 1 / -1; grid-row: 2; min-height: 0; padding: var(--ecc-s-2); }
  .ecc-hdr__go, .ecc-hdr__search-btn { display: inline-flex; }
  .ecc-hdr__search-btn { display: grid; }
  .ecc-js .ecc-hdr__search {
    position: absolute; top: 100%; z-index: var(--ecc-z-overlay);
    left: max(var(--ecc-gap), env(safe-area-inset-left)); right: max(var(--ecc-gap), env(safe-area-inset-right));
    box-shadow: var(--ecc-elev-overlay); opacity: 0; visibility: hidden;
  }
  .ecc-js .ecc-hdr__search.is-open { opacity: 1; visibility: visible; }
}
@media (min-width: 1181px) and (max-width: 1519px) {
  .ecc-js .ecc-hdr__search { left: auto; width: min(100% - var(--ecc-gap) * 2, 30em); }
}
/* 1180 and below: phones and tablets. The departments move into the menu drawer, and the header stays with the
   visitor: stuck to the top, it steps aside on the way down the page and comes back on the way up (.is-hidden,
   from shell.js). It moves by translate, so nothing on the page shifts. The notice above it scrolls away. */
@media (max-width: 1180px) {
  .ecc-hdr { --_tile: var(--ecc-s-8); position: sticky; top: 0; }
  .ecc-hdr.is-hidden { translate: 0 -100%; }
  .ecc-hdr__bar { grid-template-columns: auto minmax(0, 1fr) auto; padding-top: max(var(--ecc-gap), env(safe-area-inset-top)); }
  .ecc-hdr__logo { padding: 0 var(--ecc-s-4); }
  .ecc-hdr__search { padding: 0 var(--ecc-s-2); }
  .ecc-hdr__nav, .ecc-hdr__account, .ecc-hdr__util [data-pk-theme-toggle] { display: none; }
  .ecc-hdr__menu-btn { display: grid; }
  html { scroll-padding-top: calc(var(--ecc-s-8) + var(--ecc-s-5)); } /* a link to a place on the page lands below the stuck header */
}
/* 760 and below: the phone header. Logo, search, cart, menu: 48px modules, 64px in all, every target 44px. */
@media (max-width: 760px) {
  .ecc-hdr { --_tile: var(--ecc-s-7); --_logo: 148px; }
  .ecc-hdr__bar { grid-template-columns: minmax(0, 1fr) auto; }
  .ecc-hdr__logo { padding: 0 var(--ecc-s-3); }
  .ecc-hdr__search { padding: var(--ecc-s-2); }
  .ecc-hdr__util { gap: 0; padding: 0 var(--ecc-s-1); }
}
@media (max-width: 400px) { .ecc-hdr { --_logo: 140px; } }
@media (prefers-reduced-motion: no-preference) {
  .ecc-hdr { transition: translate var(--ecc-d-base) var(--ecc-ease-out); }
  .ecc-js .ecc-hdr__search { transition: opacity var(--ecc-d-fast) var(--ecc-ease-out), visibility 0s linear var(--ecc-d-fast); }
  .ecc-js .ecc-hdr__search.is-open { transition-delay: 0s; }
  .ecc-hdr__util [data-pk-theme-toggle] > span:last-child { transition: opacity var(--ecc-d-fast) var(--ecc-ease-out); }
}

/* =========================================================== 7 · MENU DRAWER */
/* The shell is foundations' drawer (.ecc-drawer--fixed over .ecc-scrim). shell.js opens it (.is-open), keeps the
   focus inside, closes it with Escape or a press on the scrim and gives the focus back to the menu button.
   Without a script the menu button is a link to #ecc-menu, and :target opens it. It is not shown above 1180px. */
.ecc-menu { visibility: hidden; }
.ecc-menu.is-open, .ecc-menu:target { visibility: visible; }
.ecc-menu__scrim { opacity: 0; cursor: default; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ecc-menu.is-open .ecc-menu__scrim, .ecc-menu:target .ecc-menu__scrim { opacity: 1; }
.ecc-menu__drawer { translate: 100% 0; padding-right: env(safe-area-inset-right); overscroll-behavior: contain; }
.ecc-menu.is-open .ecc-menu__drawer, .ecc-menu:target .ecc-menu__drawer { translate: none; }
@media (min-width: 1181px) { .ecc-menu { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ecc-menu { transition: visibility 0s linear var(--ecc-d-base); }
  .ecc-menu.is-open, .ecc-menu:target { transition-delay: 0s; }
  .ecc-menu__scrim { transition: opacity var(--ecc-d-base) linear; }
  .ecc-menu__drawer { transition: translate var(--ecc-d-base) var(--ecc-ease-out); }
}
.ecc-menu .ecc-drawer__head { padding-top: max(var(--ecc-s-2), env(safe-area-inset-top)); }
.ecc-menu .ecc-drawer__head .ecc-iconbtn { text-decoration: none; }
.ecc-menu__body { overflow-x: hidden; overscroll-behavior: contain; padding-bottom: var(--ecc-s-4); } /* it scrolls down, never sideways */
.ecc-menu__label { display: flex; align-items: center; gap: var(--ecc-s-2); margin: var(--ecc-s-4) 0 var(--ecc-s-1); color: var(--ecc-ink-2); }
/* The departments, one to a row. A department with sub-departments opens in place (the system's accordion, one open
   at a time), and its own page is the first link inside it. No name is squeezed into half a row, a translation can
   be as long as it likes, and twenty departments are still a short list. The drawer's body scrolls as one. */
.ecc-menu__depts { margin: 0; padding: 0; list-style: none; }
.ecc-menu__depts > li + li { border-top: 1px solid var(--ecc-line); }
.ecc-menu__depts .ecc-acc, .ecc-menu__depts .ecc-acc:last-of-type { border: 0; }
.ecc-menu__top { padding-inline: 0; border-radius: var(--ecc-r-sm); }
.ecc-menu__name { display: flex; align-items: center; gap: var(--ecc-s-2); min-width: 0; }
.ecc-menu__subs { margin: 0; padding: 0 0 var(--ecc-s-2) var(--ecc-s-5); list-style: none; }
.ecc-menu__link--top { min-height: calc(var(--ecc-s-7) + var(--ecc-s-2)); font-weight: var(--ecc-fw-strong); }
.ecc-menu__top:active { background: var(--ecc-wash-strong); }
@media (hover: hover) and (pointer: fine) { .ecc-menu__top:hover { background: var(--ecc-wash); } }
.ecc-menu__link {
  display: flex; align-items: center; gap: var(--ecc-s-2); min-height: var(--ecc-s-7); padding: var(--ecc-s-1) 0;
  border-radius: var(--ecc-r-sm); color: var(--ecc-ink); text-decoration: none; overflow-wrap: break-word;
}
.ecc-menu__link:active, .ecc-menu__row:active { background: var(--ecc-wash-strong); --ecc-icon-spark: var(--ecc-spark); }
.ecc-menu__link:focus-visible, .ecc-menu__row:focus-visible { outline-offset: calc(var(--ecc-focus-width) * -1); --ecc-icon-spark: var(--ecc-spark); }
@media (hover: hover) and (pointer: fine) { .ecc-menu__link:hover { background: var(--ecc-wash); --ecc-icon-spark: var(--ecc-spark); } .ecc-menu__row:hover { background: var(--ecc-wash); } }
/* then the pages: one to a row, between hairlines */
.ecc-menu__rows { margin: var(--ecc-s-2) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ecc-line-strong); }
.ecc-menu__rows li { border-bottom: 1px solid var(--ecc-line); }
.ecc-menu__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ecc-s-3); min-height: var(--ecc-s-7); padding: var(--ecc-s-1) 0;
  border-radius: var(--ecc-r-sm); color: var(--ecc-ink); text-decoration: none; overflow-wrap: anywhere;
}
/* the store's facts: the address opens directions, the phone calls */
.ecc-menu__facts { gap: 0; }
.ecc-menu__facts li, .ecc-ftr__facts li { display: flex; align-items: center; gap: var(--ecc-s-3); min-height: var(--ecc-hit); }
.ecc-menu__facts a, .ecc-ftr__facts a {
  display: inline-flex; align-items: center; min-width: var(--ecc-hit); min-height: var(--ecc-hit); border-radius: var(--ecc-r-voxel); color: var(--ecc-ink); overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--ecc-s-1);
}
.ecc-menu__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ecc-s-2); padding-block: var(--ecc-s-2) calc(var(--ecc-s-2) + env(safe-area-inset-bottom)); }
.ecc-menu__foot [data-pk-theme-toggle] { margin-left: calc(var(--ecc-s-3) * -1); } /* the track lines up with the text above (the switch has 12px of padding) */

/* ================================================================ 8 · FOOTER */
/* One dark slab (footer A, Rayan 3 Oct 2026: the trust of a big, formal company and the energy young people like).
   Above: the small logo, the brand line (its one place on the site), the store's facts and three groups of links.
   Below: "CYBER CITY" printed in the identity's squares by shell.js (whole at rest; near the mouse its squares come
   apart). A last line with the year and the "Pause motion" switch (the pixel kit binds it). */
.ecc-ftr { margin-top: var(--ecc-s-8); }
.ecc-ftr__wrap {
  padding-bottom: calc(var(--ecc-gap) + env(safe-area-inset-bottom));
  padding-inline: max(var(--ecc-gap), env(safe-area-inset-left)) max(var(--ecc-gap), env(safe-area-inset-right));
}
.ecc-ftr__slab { position: relative; overflow: hidden; display: grid; gap: var(--ecc-s-6); padding: var(--ecc-s-6) var(--ecc-s-6) 0; }
.ecc-ftr__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ecc-s-6) var(--ecc-gap); }
.ecc-ftr__brand { grid-column: span 5; display: flex; flex-direction: column; gap: var(--ecc-s-5); min-width: 0; }
.ecc-ftr__sign { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-3) var(--ecc-s-5); }
.ecc-ftr__sign img { flex: none; width: 168px; min-width: 140px; height: auto; }
.ecc-ftr__facts { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; color: var(--ecc-ink-2); }
.ecc-ftr__facts .ecc-icon { color: var(--ecc-ink); }
.ecc-ftr__links { grid-column: span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ecc-s-5); align-content: start; }
/* the name: the canvas fills a band as wide as the slab; without the script the same words in plain type */
.ecc-ftr__word { position: relative; display: grid; place-items: center; margin: 0 calc(var(--ecc-s-6) * -1); aspect-ratio: 1000 / 150; color: var(--ecc-ink); caret-color: var(--ecc-spark); }
.ecc-ftr__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ecc-ftr__wordtext { margin: 0; font-size: var(--ecc-t-display-xl); font-weight: var(--ecc-fw-display); font-stretch: var(--ecc-wdth-display); line-height: 1; white-space: nowrap; color: var(--ecc-ink-2); }
.ecc-ftr__word.is-on .ecc-ftr__wordtext { visibility: hidden; }
.ecc-ftr__group { min-width: 0; }
.ecc-ftr__title { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0 0 var(--ecc-s-2); color: var(--ecc-ink-2); }
.ecc-ftr__list { margin: 0; padding: 0; list-style: none; }
/* a link of the footer speaks: Archivo, sentence case. "Lease-to-own options" is a promise, and a promise is never mono capitals */
.ecc-ftr__list a { display: inline-flex; align-items: center; min-width: var(--ecc-hit); min-height: var(--ecc-hit); padding-block: var(--ecc-s-2); line-height: 1.35; border-radius: var(--ecc-r-voxel); color: var(--ecc-ink); text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
  .ecc-ftr__list a:hover { text-decoration: underline; text-decoration-color: var(--ecc-spark); text-decoration-thickness: 2px; text-underline-offset: var(--ecc-s-1); }
  .ecc-menu__facts a:hover, .ecc-ftr__facts a:hover { text-decoration-color: var(--ecc-spark); text-decoration-thickness: 2px; }
}
.ecc-ftr__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ecc-s-2) var(--ecc-s-5); padding: var(--ecc-s-4) var(--ecc-s-2) var(--ecc-s-2); color: var(--ecc-ink-2); }
@media (max-width: 1180px) {
  .ecc-ftr__brand, .ecc-ftr__links { grid-column: span 12; }
}
@media (max-width: 760px) {
  .ecc-ftr { margin-top: var(--ecc-s-7); }
  .ecc-ftr__slab { padding: var(--ecc-s-5) var(--ecc-s-5) 0; }
  .ecc-ftr__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ecc-s-5) var(--ecc-s-4); }
  .ecc-ftr__word { margin: 0 calc(var(--ecc-s-5) * -1); aspect-ratio: 1000 / 190; }
  .ecc-ftr__wordtext { font-size: var(--ecc-t-display); }
}

/* ==================================================== 9 · WITHOUT JAVASCRIPT */
/* .ecc-js is set by the inline head script. Without it a control that needs a script is not shown (no dead control):
   the two switches and the chevrons. The department names are links, the search is a form, the menu opens by :target. */
html:not(.ecc-js) [data-pk-theme-toggle], html:not(.ecc-js) [data-pk-motion-toggle], html:not(.ecc-js) .ecc-nav__chev { display: none; }

/* ======================================================== 10 · REDUCED MOTION */
/* Movement above sits inside (prefers-reduced-motion: no-preference), so here nothing slides: the drawer and the
   panels are simply there, the phone header changes place at once, the notice is a still line. Colours answer at once too. */
@media (prefers-reduced-motion: reduce) {
  .ecc-nav__sub { transition: none; }
}

/* ======================================================= 11 · FORCED COLOURS */
/* Windows contrast themes drop backgrounds and shadows. What was drawn with one gets a border in system colours. */
@media (forced-colors: active) {
  .ecc-hdr__count { border: 1px solid CanvasText; box-shadow: none; }
  .ecc-nav__sub { border: 1px solid ButtonBorder; }
  .ecc-nav__link[aria-expanded="true"], .ecc-nav__link[aria-current] { outline: 1px solid Highlight; outline-offset: calc(var(--ecc-s-1) * -1); }
  .ecc-notice { border-bottom: 1px solid CanvasText; }
  .ecc-notice__ctl { border: 1px solid ButtonText; color: ButtonText; }
  .ecc-notice.is-running .ecc-notice__text::after { background: CanvasText; }
  .ecc-hdr__util [data-pk-theme-toggle] > span:last-child { border: 1px solid CanvasText; }
  .ecc-menu__scrim { background: Canvas; opacity: .6; }
}

/* ================================================================ 12 · PRINT */
/* =========================================================== THE LIST A SELECT OPENS
   A <select> inside .ecc-select opens the browser's own list: system blue, system font. Where the browser lets a
   page style that list (appearance: base-select, Chromium 135 and later) it takes the system's look: the surface,
   the hairline, the raised shadow, 44 px rows, the ink fill and the lime pip of a selected chip. Elsewhere (Safari,
   Firefox, and every phone, whose own wheel or sheet is the better control) the browser's list stays.
   Every window the site opens is the system's: this rule is here, in the shell, so no page forgets it. */
@supports (appearance: base-select) {
  .ecc-select select, .ecc-select select::picker(select) { appearance: base-select; }
  .ecc-select select { align-items: center; }
  .ecc-select select::picker-icon { display: none; } /* the system's chevron is already there */
  .ecc-select select::picker(select) {
    margin-block: var(--ecc-s-1); padding: var(--ecc-s-1); border: 1px solid var(--ecc-control-line); border-radius: var(--ecc-r-sm);
    background: var(--ecc-surface); color: var(--ecc-ink); box-shadow: var(--ecc-elev-overlay);
    max-height: calc(var(--ecc-hit) * 7 + var(--ecc-s-2)); overflow-y: auto; overscroll-behavior: contain; /* seven rows, then it scrolls: the list opens under its field, not over the header */
  }
  .ecc-select option {
    display: flex; align-items: center; gap: var(--ecc-s-2); min-height: var(--ecc-hit); padding: 0 var(--ecc-s-3);
    border-radius: var(--ecc-r-voxel); background: transparent; color: var(--ecc-ink); font-size: var(--ecc-t-small); line-height: 1.2; cursor: pointer;
  }
  .ecc-select option::checkmark { content: ""; flex: none; width: var(--ecc-s-2); height: var(--ecc-s-2); border-radius: var(--ecc-r-voxel); background: transparent; }
  .ecc-select option:checked { background: var(--ecc-selected-bg); color: var(--ecc-selected-fg); }
  .ecc-select option:checked::checkmark { background: var(--ecc-lime); }
  .ecc-select option:focus-visible { outline: var(--ecc-focus-ring); outline-offset: calc(var(--ecc-focus-width) * -1); }
  @media (hover: hover) and (pointer: fine) { .ecc-select option:not(:checked):hover { background: var(--ecc-wash); } }
  .ecc-select option:disabled { color: var(--ecc-disabled-fg); cursor: not-allowed; }
}

/* The motion switch stops what is on its way, too: a tile's current that was running when the switch was pressed
   lands at once instead of finishing its run. */
html[data-ecc-motion="paused"] .ecc-tile__current { transition: none; }

/* A printed page keeps the logo and the store's facts and drops the controls. The full print rules come with the pages. */
@media print {
  .ecc-notice, .ecc-hdr__nav, .ecc-hdr__search, .ecc-hdr__util, .ecc-menu, .ecc-ftr__links, .ecc-ftr__end .ecc-chip, .ecc-skip { display: none !important; }
  .ecc-hdr { position: static; }
}