/* Be One Kind — additions to the mockup's stylesheet (bok.css is generated; edit here). */

/* OpenStreetMap tiles stand in for CARTO's light basemap: grey them to match */
.bokmap .leaflet-tile-pane { filter: grayscale(1) brightness(1.06) contrast(.92); }

/* Nav account button: the mockup's pill stays as it was; only its ▾ character — which the
   font drew as a tiny dot and read as a bug (George) — becomes a drawn chevron. */
.nav-person { gap: 7px; }
.nav-person .pcaret {
  font-size: 0; width: 10px; height: 10px; display: block; background: currentColor; opacity: .75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Product pages' round scroll button: a drawn chevron instead of the ⌄ character (it read
   as a letter "v"); it turns over at the bottom of the page, where it means "back to top". */
.c-nav-v { font-size: 0; color: var(--ink); box-shadow: 0 10px 24px -16px rgba(22, 35, 58, .5); }
.c-nav-v::before {
  content: ''; display: block; width: 18px; height: 18px; background: currentColor; transition: transform .25s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.c-nav-v.is-up::before { transform: rotate(180deg); }
.c-nav-v:hover { color: var(--gold-2); }

/* Mobile header (George): one line — "BE ONE KIND" never wraps — with the burger at the
   right edge; logo, wordmark, icons and gaps shrink with the screen instead of wrapping. */
@media (max-width: 980px) {
  header.nav, header.nav.solid { padding: 12px var(--gutter); }
  .brandmark { gap: clamp(6px, 2vw, 11px); flex-shrink: 0; }
  .brandmark .emblem-img { height: clamp(24px, 7.2vw, 30px); }
  .brandmark .wm { white-space: nowrap; font-size: clamp(10.5px, 3.3vw, 13px); letter-spacing: clamp(.06em, 1vw, .12em); }
  .nav-r { gap: clamp(2px, 1.6vw, 18px); }
  .nav-burger { order: 3; justify-content: center; align-items: center; }   /* bag, account, then the menu at the edge; lines centred in the 44px button */
  /* The three controls read as one size (George, 2026-10-09: the account pill was bigger than
     the burger, the bag smaller): 44px boxes, 24px icons, 24px burger lines, and the account
     button is a plain icon here — the outlined pill stays on the desktop header. */
  .nav-cart, .nav-person, .nav-burger { min-width: 44px; min-height: 44px; justify-content: center; }   /* the mockup sets this for touch screens only */
  .nav-cart .cico { width: 24px; height: 24px; }
  .nav-person { border: 0; border-radius: 0; padding: 0; gap: 2px; min-width: 44px; justify-content: center; }
  .nav-person .pico { width: 24px; height: 24px; }
  .nav-person .pcaret { font-size: 9px; }
  .nav-burger span { width: 24px; }
}
@media (max-width: 380px) {
  .nav-cart, .nav-person, .nav-burger { min-width: 40px; min-height: 40px; }
}

/* Home: the walker marquee under the hero showed as an empty band — the mockup's generic
   .track (a 5px progress bar, overflow hidden) also matched the marquee's moving line */
.marquee .track { height: auto; background: none; border-radius: 0; overflow: visible; }

/* Home hero: "SCROLL" was a caption nobody could click — now the product pages' round
   chevron button (bokScrollPast in bok-site.js) */
.scroll-cue { width: 46px; height: 46px; padding: 0; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 0; letter-spacing: 0; color: var(--ink); cursor: pointer;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--line-2);
  box-shadow: 0 10px 24px -16px rgba(22, 35, 58, .5); transition: color .25s, border-color .25s; }
.scroll-cue::before {
  content: ''; display: block; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.scroll-cue:hover { color: var(--gold-2); border-color: var(--gold); }
.scroll-cue:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 760px) { .scroll-cue { width: 40px; height: 40px; } }

/* Journal: cards are real links now; article text from the admin console's editor
   comes without the mockup's classes, so any table / figure / quote in an article gets
   the look the mockup gave its own (.jrn-table, .jr-shot) */
a.jrn-card { display: block; color: inherit; text-decoration: none; }
.jrn-body table:not(.jr-table):not(.jrn-table) { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0 18px; }
.jrn-body table:not(.jr-table):not(.jrn-table) th { text-align: left; padding: 9px 10px; border-bottom: 2px solid var(--line-2); color: var(--ink); font-weight: 600; }
.jrn-body table:not(.jr-table):not(.jrn-table) td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--mut); vertical-align: top; }
.jrn-body table:not(.jr-table):not(.jrn-table) :is(th, td) p { margin: 0; font-size: inherit; line-height: 1.5; color: inherit; }
.jrn-body img { max-width: 100%; height: auto; border-radius: 14px; }
.jrn-body figure:not(.jr-shot) { margin: 26px 0; }
.jrn-body figcaption { margin: 12px 2px 0; font-size: 12.5px; line-height: 1.55; color: var(--mut); }
.jrn-body blockquote { margin: 22px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold-2); color: var(--mut); }
.jrn-body hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.jrn-preview { position: fixed; left: 16px; bottom: 16px; z-index: 9999; max-width: calc(100% - 32px);
  background: #16233a; color: #fff; padding: 10px 16px; border-radius: 6px; font-size: 13px; line-height: 1.4; }

/* Where to Buy: the store list's pages (bok-site.js) */
.store-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 22px 0 6px; }
.store-pager:empty { display: none; }
.store-pager-count { color: var(--mut); font-size: 13.5px; }
.store-pager-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.store-pager button { min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 3px;
  background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.store-pager button:hover:not(:disabled):not([aria-current]) { border-color: var(--ink); }
.store-pager button[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; cursor: default; }
.store-pager button:disabled { opacity: .35; cursor: default; }
.store-pager-gap { color: var(--mut); padding: 0 2px; }

/* Forms (bok-site.js): the error line, the sending state, and the hidden bot trap */
.bok-form-err { color: #b42318; font-size: 14px; line-height: 1.5; margin: 12px 0 0; }
.bok-sending button[type="submit"] { opacity: .6; cursor: progress; }
.bok-trap { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; }

/* ---- Phone fixes: the mockup's own layout bugs (same in be-one-kind-experience.html) ---- */

/* Home hero: the mockup sets padding-top:0 inline and centres the content in a full-height
   block, so on short screens "One Humanity • One Kind" slid under the fixed nav. */
@media (max-width: 760px), (max-height: 760px) {
  /* bottom room for the round scroll button (46px at bottom:30px) under the buttons */
  .hero[style*="padding-top:0"] { padding-top: 88px !important; padding-bottom: 96px; }
}

@media (max-width: 900px) {
  /* Footer: the 2-column phone rule sits before the 4-column base rule in bok.css, so the
     base rule won and columns 3–4 were off-screen. */
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: start; gap: 28px 24px; width: 100%; }
  .foot-col a { white-space: normal; }
}

@media (max-width: 940px) {
  /* One-column grids sized themselves to their widest content (338px on a 296px phone), so
     the "Search" button and the story text ran off-screen: let the column shrink */
  .loc-grid, .c-split { grid-template-columns: minmax(0, 1fr); }
}

/* One side margin for the whole site (George, 2026-10-13: «нет единой сетки»): the header, every
   page's .wrap, the account and the footer use the same --gutter — 32px from 800px up, shrinking
   to 16px on phones — so their edges line up at every width */
:root { --gutter: clamp(16px, 4vw, 32px); }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }

@media (max-width: 760px) {
  /* Collections list: the name ("MOONWALKERS") was wider than the space beside the pack */
  .col { gap: 14px; }
  .col .mid { min-width: 0; }
  .col .mid h3 { font-size: clamp(18px, 5.4vw, 26px); overflow-wrap: anywhere; }

  /* Where to buy: the search input kept its default width and pushed "Search" off-screen */
  .loc-search input { min-width: 0; }

  /* Wide tables scroll sideways inside their box instead of being cut off */
  .mx-band-w { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .jrn-table, .jrn-body table:not(.jr-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- Sign-in and registration pages (the mockup's .reg-form, served for real) ---- */
.reg-form { position: relative; }
.reg-note { margin: 0 0 18px; padding: 13px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.55;
  background: var(--panel2); border: 1px solid var(--line); color: var(--ink); }
.reg-note b { font-weight: 600; }
.reg-note-ok { background: #f6efe0; border-color: rgba(191, 143, 56, .45); }
.reg-note-err { background: #fdf0ec; border-color: rgba(239, 90, 31, .45); }
.reg-err { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: #b5401a; font-weight: 500; }
.reg-hint-top { margin: -6px 0 18px; }
.reg-consent + .reg-err { margin: -4px 0 8px 28px; }
.reg-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-2); font-weight: 600; cursor: pointer; }
.reg-linkbtn:hover, .reg-alt a:hover { text-decoration: underline; }
.reg-form .ct-field input[type="date"] { min-height: 46px; }
.acct-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; }
.acct-sum > div { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.acct-k { display: block; font-size: 12px; letter-spacing: .06em; color: var(--mut); margin-bottom: 6px; }
.acct-v { font-size: 30px; font-weight: 300; color: var(--ink); letter-spacing: -.01em; }

/* ---- The member portal inside the site (Edmunds' bok-portal.css does the rest) ---- */
/* the portal's own background runs down to the footer — no band of page colour between (George, 2026-10-13) */
.acct-portal { padding-bottom: 0; }
/* …and the last card keeps air under it, on the portal's own background (George, 2026-10-13) */
.acct-portal > #bokp { padding-bottom: 64px; }
/* The page's 120px under the fixed header moves INTO the portal, so the portal's own
   background runs up behind the header — it was a cream band and then a seam where the
   portal began (George, 2026-10-12, "шапка развалена"). A pack/verified note, when shown,
   comes first and takes the gap on the portal's base colour. */
.acct-portal.page { padding-top: 0; }
.acct-portal > #bokp:first-child,
.acct-portal > .acct-notes { padding-top: 120px; }
/* the phone header is ~69px, not the desktop's 82: 120px left an empty band above the account
   (George, 2026-10-13) — start just under it */
@media (max-width: 980px) {
  .acct-portal > #bokp:first-child,
  .acct-portal > .acct-notes { padding-top: 78px; }
}
.acct-portal > .acct-notes { background: #faf8f4; }
.acct-portal:has(#bokp[data-theme="dark"]) > .acct-notes { background: #080d18; }
.acct-portal .acct-notes { max-width: none; margin: 0; padding: 0 var(--gutter) 6px; }
.acct-portal .acct-notes > * { max-width: 1176px; margin-left: auto; margin-right: auto; }
/* one grid with the header and footer: the site's .wrap (1240px, 32px sides → 1176px of content).
   His portal had its own (1180px, 26px sides, each tab 1120px), so its edges sat 28px inside
   the header's and the footer's (George, 2026-10-13: «нет единой сетки») */
#bokp .wrap { max-width: var(--max, 1240px); padding: 0 var(--gutter); }
#bokp .bokr { max-width: none; }
.bokp .bokr-act-lnk { background: none; border: 0; padding: 0; font: inherit; color: var(--gold, #bf8f38);
  font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.bokp .bokr-activate { margin-bottom: 18px; }
/* the portal's panel and messages open over the site's fixed header (z-index 800) */
.bokp .sheet-bg { z-index: 900; }
.bokp .sheet { z-index: 901; }
.bokp .toast { z-index: 902; }

/* Desktop header: the nine links and "BE ONE KIND" stay on one line. Below 1320px they did
   not fit and wrapped into two or three lines, so the menu goes behind the burger as on a
   phone; up to 1500px the links get smaller type and gaps. */
@media (min-width: 981px) and (max-width: 1319px) {
  nav.links { display: none; }
  .nav-burger { display: flex; order: 3; justify-content: center; align-items: center; }
  header.nav, header.nav.solid { padding-top: 12px; padding-bottom: 12px; }
  .brandmark .wm { white-space: nowrap; }
}
@media (min-width: 1320px) and (max-width: 1500px) {
  .brandmark .wm, nav.links a { white-space: nowrap; }
  nav.links { gap: clamp(12px, 1.3vw, 34px); }
  nav.links a { font-size: clamp(11px, 0.88vw, 13px); letter-spacing: clamp(.06em, .5vw, .12em); }
  /* the site's one side margin here too (was 24px, George 2026-10-13: «нет единой сетки») */
  header.nav, header.nav.solid { padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* Packs: Edmunds' product photos as he sent them, in place of the drawn matchbox (mockup-import/
   convert.py, PACKS) — flat: no tilt, no added shadow (Edmunds, 2026-10-06). Their white studio
   backdrop melts into the page's own colour (multiply) instead of showing as a white square. */
.bk2-photo .bk2-img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* The collection rows shrink the drawn box with a transform and lift it with a z-index; either one
   keeps the backdrop from melting into the row's colour, so there the photo is drawn at the row's
   size, in the row's own layer (it still paints after the row's colour, which comes first). */
.colpack:has(> .colpack-in > .bk2-photo), .wkr2-mid:has(> .bk2-photo) { z-index: auto; }   /* the walker chooser too */
.colpack-in:has(> .bk2-photo) { transform: none; width: 100%; height: 100%; }
.colpack .bk2-photo { width: 100%; height: 100%; }


/* More photos under the pack on a Walker's page (Edmunds, 2026-10-06): the open pack and the display
   box with the Thank You card (convert.py, GALLERY). A thumbnail swaps the big picture; the first one is
   the pack itself. The set photos have a grey studio backdrop, so they are a plain photograph, not multiplied. */
.pack-thumbs { display: flex; gap: 10px; justify-content: center; margin: 14px auto 0; max-width: 520px; }
.pack-thumb { width: 72px; height: 72px; padding: 4px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); cursor: pointer; transition: border-color .25s; }
.pack-thumb:hover { border-color: var(--line-2); }
.pack-thumb.is-on { border-color: var(--ink); }
.pack-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bk2-photo.bk2-plain .bk2-img { mix-blend-mode: normal; border-radius: 6px; }
.p-grid.p-tight .pack-thumbs + .lab { margin-top: 28px; }
@media (max-width: 940px) {
  .pack-thumbs { max-width: 330px; }
  .pack-thumb { width: 60px; height: 60px; }
  .p-grid.p-tight .pack-thumbs + .lab { margin-top: 20px; }
}

/* Reviews: the "Only buyers can review here" note sits between the review ribbon and
   "Review a product" (Edmunds, 2026-10-09) — the mockup gave it no room underneath. */
.rv-inc-note { margin: 4px auto 28px; }

/* The phone menu dims the page under it (George, 2026-10-09). The panel is the mockup's
   own opaque dropdown, untouched: every attempt to paint the dim from the panel itself
   (a ::before, a spread shadow, a full-height tinted container with white rows) rendered
   as a grey gradient across the rows in Chrome. The dim is a separate element that
   bok-site.js adds after the menu and keeps in step with the menu's "on" class; it sits
   under the panel (790) and the header (800). A tap on it is a document click, which
   the mockup's handler already turns into "close the menu". */
#bokMenuDim { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(22, 35, 58, .42);
  z-index: 780; display: none; }
#bokMenuDim.on { display: block; }

/* Phones (George, 2026-10-09). The mockup's hover "magnet" slid a button towards the
   pointer; a tap fires the same mousemove on a touch screen, so buttons jumped. */
@media (hover: none), (pointer: coarse) {
  .btn.mag { transform: none !important; }
}
/* The home hero's two buttons stack on a phone: same width, centred — not "one bigger,
   one smaller" (George). */
@media (max-width: 760px) {
  .hero .hero-ctas { justify-content: center; }
  .hero .hero-ctas .btn { flex: 0 0 100%; max-width: 300px; justify-content: center; }
}
/* The walker chooser on a phone. The five drawings are 171–371px tall at 390px wide and
   the slide took the tallest, so four walkers sat above a 200px hole while the Back / Next
   row and "Not sure yet?" were pushed below the clipped swipe area. Every drawing now sits
   in one box (its tint mask is "contain" too, so it stays on the drawing), the heading
   keeps only the room the small header needs, and the content starts at the top instead
   of being centred in a box it overflowed. */
@media (max-width: 760px) {
  .wk-head { padding-top: 72px; }
  .wk-swipe { justify-content: flex-start; min-height: 0; }
  .wk-slide .wk-artw { height: min(46vw, 190px); }
  .wk-slide .wk-art { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
  .wk-mbtns { margin-top: 10px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .wk-head { padding-top: 60px; }
  .wk-slide .wk-artw { height: min(40vw, 150px); }
  .wk-slide .wk-nm { margin-top: 10px; }
}

/* The walker chooser's header carries the same burger (convert.py); the page menu lives
   under the chooser (z 790 vs 9500), so while the chooser is up the menu is raised over it
   (George, 2026-10-09: "the menu disappears here"). */
.wov.show ~ .mob-nav { z-index: 9600; top: 72px; }
.wov.show ~ #bokMenuDim { z-index: 9590; }

/* On a dark hero (Brand Ambassador) the header turns light, but the burger's three lines
   are painted with a background, not the text colour, so they stayed navy on navy and the
   menu button was invisible on a phone (George, 2026-10-09). */
body.on-dark-hero .nav:not(.solid) .nav-burger span { background: #F5F5F2; }

/* The mockup rendered off-screen sections as 700px placeholders (content-visibility:auto)
   to keep its 1.8 MB single page quick; on this site every page is its own document, and
   on a phone the placeholders expanding during the scroll made the page jump and stutter
   — the Brand Ambassador page grew by 700px per section as it was read (George,
   2026-10-09: "lags", "buggy"). The mockup already switched it off for the Walkers' pages;
   off everywhere now. */
#app section { content-visibility: visible; }

/* Brand Ambassador: three containers are "wrap ba-hero / ba-unlock / ba-final", and the
   mockup's own padding on those (top/bottom only) overrode .wrap's 32px sides — on a
   phone the headings, text, cards and buttons touched the screen edge and the LOCKED
   heading ran past it (George, 2026-10-09). The only such combos on the site. */
.wrap.ba-hero, .wrap.ba-unlock, .wrap.ba-final { padding-left: 32px; padding-right: 32px; }

/* A photo melted into the page (multiply) blends with the page only while no ancestor is
   mid-opacity: during the .reveal fade (0.85s) the block is composited on its own and the
   white studio backdrop shows as a white frame until the fade ends (George, 2026-10-09,
   stepping between Walkers). A block holding such a photo appears in place, no fade. */
.reveal:has(.bk2-photo:not(.bk2-plain) > .bk2-img) { opacity: 1 !important; transform: none !important; transition: none !important; }

/* The bag drawer waits just off the right edge (translateX(102%)) with a 70px shadow and
   z 8700 — above the header and the phone menu — so the shadow leaked ~90px into the
   screen from the right. Over the coloured hero it passed unnoticed; over the white rows
   of the open menu it was the grey gradient George chased all day (2026-10-09). Closed,
   the drawer carries no shadow and is hidden outright; opening it puts both back. */
.cart-drawer:not(.on) { box-shadow: none; visibility: hidden;
  transition: transform .38s var(--ease), visibility 0s .38s, box-shadow .38s; }

/* Our Story — Dawn to Dusk (George, 2026-10-10): the Walker Collection crest under the
   headline, and the five hours as a list, each Walker linking to its page. */
.story-crest { display: block; max-width: 420px; margin: 40px auto 0; }
.story-crest img { display: block; width: 100%; height: auto; }
.story-body .story-first { font-size: clamp(19px, 2.4vw, 22px); line-height: 1.6; color: var(--ink); }
.story-hours { list-style: none; padding: 0; margin: 0 0 26px; }
.story-hours li { padding: 18px 0; border-top: 1px solid var(--line); }
.story-hours li:last-child { border-bottom: 1px solid var(--line); }
.story-hours a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line-2); }
.story-hours a:hover { color: var(--gold-2); }
.story-hour-k { color: var(--gold-2); font-weight: 500; }
@media (max-width: 560px) { .story-crest { max-width: 300px; margin-top: 28px; } }

/* ---- Footer: the 21+ notice runs the footer's full width, not a 840px column (George, 2026-10-13) ---- */
footer .disc { max-width: none; }

/* ---- Header menu on the site's grid (George, 2026-10-13): where the content column clears the
   logo (≥1600px), STORY starts on the column's left edge and CONTACT ends on its right edge, as
   the cards and the footer do. Narrower, the column runs under the logo, so the menu keeps its
   place between the logo and the icons. ---- */
@media (min-width: 1600px) {
  .nav .links { position: absolute; left: 50%; transform: translateX(-50%);
    width: calc(var(--max, 1240px) - 64px); justify-content: space-between; gap: 0; }
}

/* ---- Account tabs on a phone (George, 2026-10-13: «тут баг»): they scrolled sideways with nothing
   to say so — Simulator, Account and FAQ sat out of sight past "Refer". All seven now show, on a
   second line where they need it. ---- */
@media (max-width: 620px) {
  /* the band runs edge to edge as in his portal; the tabs inside start on the grid line */
  #bokp .bokr .bokr-tabs { flex-wrap: wrap; overflow: visible; scroll-snap-type: none;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* ---- FAQ topic buttons (George, 2026-10-13): like the tabs, they scrolled sideways with nothing to say
   so — "Ambassador", "Redeeming", "Points & expiry" sat past the edge on a phone. All show, wrapping. ---- */
#bokp #vFaq .faq-chips { flex-wrap: wrap; overflow: visible; }