/* ============================== FEDERAL SHELL ============================== */
.site-header { position:relative; z-index:var(--header-z); }

/* Demo / prototype chip — deliberately NOT skin-tinted: under the intranet skin
   `--color-primary-*` is blue, which disappeared against the blue top bar. Pinned
   to the federal red so the "this is a prototype" marker always stands out.
   White on #d8232a = 5.01:1.
   Geometry = CD's badge (badge.postcss:5-9 py-[0.219em] px-[1em] rounded-full,
   no uppercase/tracking). CD's top bar hosts exactly one badge in this slot
   (top-bar.postcss:154-166); only the color stays pinned. */
.demo-chip { display:inline-flex; align-items:center; padding:.219em 1em; font-size:var(--text-xs);
  font-weight:var(--fw-bold);
  background:var(--color-federal-red); color:var(--color-text-negative); border-radius:var(--radius-full); white-space:nowrap; }

/* Top bar (top-bar.postcss + top-bar-navigation.postcss) */
.top-bar { background:var(--color-secondary-600); color:var(--color-text-negative); font-size:var(--fs-sm); }
/* CD top-bar.postcss:7 `text-sm 2xl:text-base`: fixed steps, no ramp. */
@media (min-width:1544px){ .top-bar { font-size:var(--fs-base); } }
.top-bar .container--flex { min-height:var(--target-min); align-items:center; gap:var(--sp-4); }
.top-bar__btn { display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--target-min); min-width:var(--target-min); background:none; border:0;
  color:var(--color-text-negative); cursor:pointer; font:inherit; padding:var(--sp-1) 0 var(--sp-1) var(--sp-4); margin-left:calc(-1 * var(--sp-4)); text-decoration:none;
  transition:color var(--duration-fast); }
/* Hover AND focus lighten (CD top-bar.postcss:130 `hover:text-text-300
   focus:text-text-300`); keyboard focus otherwise received no color change. */
.top-bar__btn:hover, .top-bar__btn:focus { color:var(--color-gray-300); text-decoration:none; }
/* The label stays visible at EVERY width: CD top-bar.postcss:136-138
   `span { w-min sm:w-full }`. Below 640 it becomes a min-content column and
   wraps instead of disappearing. The former sr-only treatment repaired a worse
   bug (label AND icon invisible, WCAG 4.1.2); CD's narrow wrapping column solves
   the same problem without losing text. */
.top-bar__btn > span:not(.icon) { width:min-content; text-align:left; }
@media (min-width:640px){ .top-bar__btn > span:not(.icon) { width:auto; } }
/* align-items:stretch instead of center: the language switcher should fill the
   full 44px row. With `center`, its parent had auto height and height:100%
   resolved back to auto, exactly the bug already found and fixed for .burger
   (comment app.css:420-421, P0-5); it had been missed here. */
/* No flex gap (CD top-bar.postcss:154-166 uses only `flex items-center`): entry
   padding carries the rhythm (navigation padding, language-switcher padding).
   Only the portal-specific demo chip needs its own margin (CD's badge in this
   slot carries mr-2). */
.top-bar__right { display:flex; align-items:stretch; }
.top-bar__right > .demo-chip { align-self:center; margin-right:var(--sp-2); }
/* Hidden below 1024, exactly as .meta-navigation--desktop is: at those widths
   these links live in the drawer (.top-bar-navigation--mobile, built from the
   same TOP_BAR_LINKS list), and the burger is the way to them. An icon-only copy
   in the bar was a second, unlabelled route to a link the drawer already names,
   and it spent the horizontal space the federal-authorities link needs beside it
   (user decision, 2026-08-12). DELIBERATE DEVIATION: CD keeps its bar links
   as icons below lg (top-bar-navigation.postcss:7-11) and treats the drawer copy
   as an addition rather than a replacement. */
/* align-self:stretch, NOT height:100%: the right cluster's height is auto
   (the container centres it), so a percentage height resolved to auto and the
   nav shrank to its 44px content — its glyph then sat 2px above the bar's
   centre line. Stretch gives it the cluster's full 48px and the inner chain
   (ul 100% → a 100%) follows, exactly CD's h-full chain
   (top-bar-navigation.postcss:6-23 — alignment D56). */
.top-bar-navigation { display:none; align-self:stretch; }
.top-bar-navigation ul { list-style:none; display:flex; height:100%; }
.top-bar-navigation a { display:flex; align-items:center; height:100%; min-height:var(--target-min);
  padding-inline:var(--sp-1); color:var(--color-text-negative); text-decoration:none; transition:color var(--duration-fast); }
.top-bar-navigation a:hover, .top-bar-navigation a:focus { color:var(--color-gray-300); text-decoration:none; }
/* Only the label is hidden (shared sr-only rule), never the icon <span>
   (Item 2.4). Visible from 1024: CD reveals utility-link labels at lg
   (top-bar-navigation.postcss:7-11 `hidden lg:block`); between those widths the
   bar remains icon-only. */
@media (min-width:1024px){
  .top-bar-navigation { display:flex; }
  .top-bar-navigation a { padding-inline:var(--sp-2); }
  .top-bar-navigation a > span:not(.icon) { position:static; width:auto; height:auto; margin:0;
    overflow:visible; clip:auto; padding-left:var(--sp-4); padding-right:var(--sp-2); }
}

/* Language switcher (language-switcher.postcss:5-59) */
.language-switcher { display:flex; align-self:stretch; height:auto; cursor:pointer; }
.language-switcher .form__group__select,
.language-switcher .select { display:flex; align-items:stretch; position:relative; height:auto; }
.language-switcher select { appearance:none; -webkit-appearance:none; height:100%; min-height:var(--control-h);
  width:3.5em; padding:var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-1);
  background:transparent; border:var(--stroke-1) solid transparent; box-shadow:none;
  color:var(--color-text-negative); font:inherit; font-size:var(--text-sm); cursor:pointer; transition:color var(--duration-fast); }
@media (min-width:1024px){ .language-switcher select { width:4.5em; padding-left:var(--sp-4); } }
.language-switcher select option { color:var(--color-text); background:var(--color-bg); }
.language-switcher select option:disabled { color:var(--color-gray-400); }
/* Disabled (prototype: German only): CD's disabled recipe is ONLY opacity-40
   (select.postcss:28-35). The generic [disabled] field rules below would
   otherwise paint light gray-on-gray on the navy bar and pointer-events:none
   would kill the explanatory title tooltip.
   `background:transparent` re-asserted here: `.input--negative:disabled`
   (form.css, two classes) outranks the resting `.language-switcher select`
   rule above and painted a filled secondary-300 BOX behind «DE» on the top
   bar — the exact leak this comment already intended to prevent (user
   finding 2026-08-21; docs/design-alignment.md D2). */
.language-switcher select:disabled,
.language-switcher select.input--negative:disabled { background:transparent; box-shadow:none;
  color:var(--color-text-negative); opacity:.4;
  pointer-events:auto; cursor:default; }
.language-switcher .select__icon { position:absolute; top:0; right:0; width:var(--sp-6); height:100%;
  display:flex; align-items:center; justify-content:center; border-left:0; background:transparent;
  color:var(--color-text-negative); pointer-events:none; transition:color var(--duration-fast); }
.language-switcher select:hover + .select__icon, .language-switcher select:focus + .select__icon { color:var(--color-gray-300); }

/* Brand / title row (top-header.postcss + logo.postcss) */
.top-header { background:var(--color-bg); border-bottom:var(--stroke-1) solid var(--color-border); position:relative;
  padding:var(--sp-3) 0; font-size:var(--fs-sm); }
@media (min-width:768px){ .top-header { padding:var(--sp-4) 0; } }
@media (min-width:1024px){ .top-header { padding:var(--sp-6) 0; } }
@media (min-width:1280px){ .top-header { padding:var(--sp-8) 0; } }
/* CD top-header.postcss:8 `text-sm 3xl:text-base`. */
@media (min-width:1920px){ .top-header { padding:var(--sp-10) 0; font-size:var(--fs-base); } }
.top-header .container--flex { min-height:0; align-items:center; gap:var(--sp-4); }
/* The transition carries BOTH disappearances (open search below lg and open
   mobile menu): CD logo.postcss:5-13 uses the same duration-700. */
.logo { display:flex; align-items:center; flex-wrap:nowrap; text-decoration:none;
  transition:opacity var(--duration-slowest); }
@media (min-width:768px){ .logo { align-items:flex-start; } }
.body--mobile-menu-is-open .logo { opacity:0; }
.logo__flag { flex:none; display:block; width:30px; height:33px; }
@media (min-width:1024px){ .logo__flag { width:32px; height:34px; } }
@media (min-width:1920px){ .logo__flag { width:40px; height:44px; } }
.logo__name { flex:none; display:none; width:174px; height:50px; overflow:visible; }
@media (min-width:1280px){ .logo__name { display:block; } }
@media (min-width:1920px){ .logo__name { width:244px; height:70px; } }
.logo__separator { flex:none; width:var(--stroke-1); height:var(--sp-10); background:var(--color-border-strong); margin-inline:var(--sp-2); }
@media (min-width:640px){ .logo__separator { margin-inline:var(--sp-4); } }
@media (min-width:768px){ .logo__separator { height:var(--sp-14); } }
@media (min-width:1024px){ .logo__separator { margin-inline:var(--sp-6); } }
@media (min-width:1920px){ .logo__separator { height:70px; margin-inline:var(--sp-8); } }
.logo-title__container { display:flex; flex-direction:column; min-width:0; }
.logo__accronym { font-weight:var(--fw-bold); line-height:var(--lh-snug); color:var(--color-text); }
@media (min-width:480px){ .logo__accronym { display:none; } }
@media (min-width:480px){
  /* The negative top margin is CD's optical correction against the flag's top
     edge (logo.postcss:81 `mt-[-0.160rem]`), visible from md where .logo aligns
     to flex-start. */
  .logo__title { position:static; width:auto; height:auto; margin:-.16rem 0 0; overflow:visible; clip:auto;
    font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--color-text);
    line-height:1.375; }
}
/* nowrap only from md (logo.postcss:78 `md:whitespace-nowrap`): between 480 and
   767 the long office title may wrap instead of overflowing beside flag and
   divider. The product name below is a block child and keeps its own line. */
@media (min-width:768px){ .logo__title { white-space:nowrap; } }
@media (min-width:640px){ .logo__title { font-size:var(--fs-sm); } }
@media (min-width:1280px){ .logo__title { font-size:var(--fs-base); } }
@media (min-width:1920px){ .logo__title { font-size:var(--fs-lg); } }   /* logo.postcss:77 3xl:text-lg */
.logo__title span { display:block; font-weight:var(--fw-regular); color:var(--color-text-muted); }
/* Intranet skin stamps its own badge after the title (intranet.postcss:32-43).
   The pill on the TITLE follows the badge size ramp (badge.postcss:73-77); only
   the pill beside the acronym (<480px) stays pinned to text-xs (intranet.postcss:42). */
.body--intranet .logo__title::after,
.body--intranet .logo__accronym::after {
  content:'Intranet'; display:block; width:fit-content; margin-top:var(--sp-1); margin-left:calc(-1 * var(--stroke-1));
  padding:.219em 1em; border-radius:var(--radius-full);
  background:var(--color-info-bg); color:var(--color-info-text);
  font-size:var(--fs-xs); font-weight:var(--fw-regular); line-height:var(--line-5); }
@media (min-width:768px){ .body--intranet .logo__title::after { font-size:var(--fs-sm); } }
@media (min-width:1024px){ .body--intranet .logo__title::after { font-size:var(--fs-base); line-height:var(--line-6); } }
.top-header__right { display:flex; align-items:center; }
@media (min-width:1024px){ .top-header__right { flex-direction:column; align-items:flex-end; margin-right:calc(-1 * var(--sp-3)); } }
.top-header__container-flex { display:flex; align-items:center; }
.top-header__shopping-cart-button-mobile { display:flex; align-items:center; margin-left:var(--sp-2-5); margin-right:var(--sp-3); }
@media (min-width:1024px){ .top-header__shopping-cart-button-mobile { display:none; } }
.top-header__shopping-cart-button-desktop { display:none; }
@media (min-width:1024px){
  .top-header__shopping-cart-button-desktop { display:block; margin-right:var(--sp-3); margin-left:var(--sp-4); }
}
.shopping-cart__button { --control-icon-size:var(--sp-9); display:flex; align-items:center; cursor:pointer; color:var(--color-text); text-decoration:none; min-height:var(--control-h); }
.shopping-cart__button:hover { color:var(--color-primary-600); text-decoration:none; }
.shopping-cart__button-label { display:none; }
@media (min-width:1024px){ .shopping-cart__button-label { display:block; margin:0 var(--sp-1-5) 0 0; } }
.shopping-cart__icon-group { position:relative; display:flex; align-items:center; }
@media (min-width:1024px){ .shopping-cart__button { --control-icon-size:var(--sp-7); } }
.shopping__cart-amount-indicator { position:absolute; top:-5px; left:20px; display:flex; align-items:center; justify-content:center;
  width:var(--sp-5); height:var(--sp-5); border-radius:var(--radius-full); background:var(--color-error); color:var(--color-text-negative); font-size:var(--fs-xs); line-height:1; }
@media (min-width:1024px){ .shopping__cart-amount-indicator { left:15px; } }

/* Mobile title strip (top-header.postcss:13-31, markup TopHeader.vue:3-8).
   CD intentionally hides the long office title below 480 (logo.postcss:76) and
   compensates with this tinted band under the top bar. Without it, the visible
   brand at 320/390 consists only of `BBL` + intranet pill. */
/* NO negative offset. `top:calc(-1 * var(--sp-3))` drew this strip 12px higher
   than its own box, i.e. INTO the bar above it — invisible while that bar was one
   line with room to spare, but the federal-authorities link wraps to two lines
   below 640 (CD's `w-min`, top-bar.postcss:136-138), and the strip then covered
   the second line (measured: bar 0-50px, strip starting at 38px; user finding,
   2026-08-12). It also left a 12px gap under itself, since relative offsets move
   the paint and not the flow. In flow it sits flush under the bar at every
   width. */
.top-header__mobile-title { position:relative; overflow:hidden;
  background:var(--color-secondary-100); color:var(--color-text-muted);
  font-size:var(--fs-xs); line-height:1.4; transition:max-height var(--duration-slow) var(--ease-out); }
.top-header__mobile-title .container { padding-block:var(--sp-2); }
@media (min-width:480px){ .top-header__mobile-title { display:none; } }
.body--mobile-menu-is-open .top-header__mobile-title { max-height:0; }

/* Meta navigation (meta-navigation.postcss:5-42): the sign-in slot lives HERE
   (shell.js renders it in the meta ul); the former .top-header__auth block was
   the dead shell of an abandoned markup structure. */
/* Touch target vs chrome height (Item 2.5b revisited, 2026-08 alignment
   D8): the 44/48px min-height guaranteed the target but inflated the whole
   brand bar ~25px over CD's (whose meta rows are text-height + mb-12/16,
   meta-navigation.postcss:27) and over the tenant portal's. The hit area is
   now supplied by BLOCK PADDING with matching negative margins — the
   clickable box stays ≥44px while the LAYOUT height returns to CD's
   text-row. (Negative margins shrink the flow box, not the padding's hit
   area.) */
.meta-navigation--desktop a,
.meta-navigation--desktop .meta-navigation__auth,
.meta-navigation--desktop .meta-navigation__user {
  padding-block:var(--sp-3); margin-block:calc(-1 * var(--sp-3)); }
.meta-navigation ul { list-style:none; display:flex; align-items:center; }
.meta-navigation a { display:flex; align-items:center; padding-inline:var(--sp-3); color:var(--color-text); text-decoration:none; }
.meta-navigation a:hover { color:var(--color-primary-600); text-decoration:none; }
.meta-navigation--desktop { display:none; }
@media (min-width:1024px){ .meta-navigation--desktop { display:flex; margin-bottom:var(--sp-3); } }
@media (min-width:1280px){ .meta-navigation--desktop { margin-bottom:var(--sp-4); } }
/* Sign-in state (AGOV / FedLogin) on the right of the meta navigation. ONE link
   style for the entire bar (CD meta-navigation.postcss:5-12 +
   MetaNavigation.vue:4-20: uniform entries, no accent variant). The entry's
   user icon carries emphasis, not a second link color. Icon gap .5rem as in CD's ml-2. */
.meta-navigation__auth { display:flex; align-items:center; gap:var(--sp-2);
  background:none; border:0; font:inherit; color:var(--color-text);
  padding-inline:var(--sp-3); cursor:pointer; }
.meta-navigation__auth:hover { color:var(--color-primary-600); }
/* .separator--vertical in markup provides the divider (Item 4.2); a bare
   hairline at the line start reads as a typo. */
.meta-navigation__user { display:flex; align-items:center; gap:var(--sp-2); padding-inline:var(--sp-3);
  border-left:0; }
/* The name is a LINK to #/profile (alignment D43, tenant-portal pattern):
   quiet label look at rest, shared meta hover for the affordance. Anchor
   padding zeroed — the __user cluster already carries the sp-3 inline
   padding, and the generic `.meta-navigation a` rule (0,1,1) would double
   it; the descendant selector (0,2,0) outweighs it. The mobile drawer's own
   (0,3,0)/(0,2,2) row rules in drawer.css still win there, so the name is a
   full-width row in the drawer and a quiet inline link on the desktop bar. */
.meta-navigation .meta-navigation__name { display:flex; align-items:center; gap:var(--sp-1-5);
  color:var(--color-text-muted); padding-inline:0; text-decoration:none; }
.meta-navigation a.meta-navigation__name:hover { color:var(--color-primary-600); text-decoration:none; }
.meta-navigation__name .icon { color:var(--color-primary-600); }

/* Sign-in notice where an operation would be started. */
.login-gate .btn { margin-top:0; }
.login-gate__btn { align-self:flex-start; }

/* Burger (burger.postcss:5-76) */
/* `height:100%` collapsed to icon height in the centered flex parent; the only
   menu access below 1024px was 20px high (P0-5). */
.burger { display:flex; align-items:center; justify-content:center;
  min-height:var(--target-min); min-width:var(--target-min); padding:0 var(--sp-4); margin-right:calc(-1 * var(--sp-4));
  background:none; border:0; cursor:pointer; }
@media (min-width:1024px){ .burger { display:none; } }
.burger__icon { display:block; position:relative; width:var(--sp-7); height:var(--sp-5);
  color:var(--color-text-500); transition:color var(--duration-fast); }   /* CD burger.postcss:10-17: resting color text-500 */
.burger:hover .burger__icon { color:var(--color-primary-600); }
.burger__bar { display:block; position:absolute; width:100%; height:100%; color:inherit; transition:transform var(--duration-fast); }
.burger__bar::after { content:""; display:block; position:absolute; width:100%; height:var(--stroke-2);
  border-color:currentColor; transition:transform var(--duration-fast) var(--duration-fast); }
.burger__bar:nth-of-type(1)::after { top:calc(-1 * var(--stroke-1)); border-top:var(--stroke-2) solid; transform-origin:top; }
.burger__bar:nth-of-type(2) { top:50%; height:var(--stroke-2); background-color:currentColor; transform:translateY(-50%); }
.burger__bar:nth-of-type(3)::after { bottom:calc(-1 * var(--stroke-1)); border-bottom:var(--stroke-2) solid; transform-origin:bottom; }
.body--mobile-menu-is-open .burger__bar:nth-of-type(1) { transform:translateY(50%); }
.body--mobile-menu-is-open .burger__bar:nth-of-type(1)::after { transform:rotate(45deg); }
.body--mobile-menu-is-open .burger__bar:nth-of-type(2) { transform:scaleX(0); }
.body--mobile-menu-is-open .burger__bar:nth-of-type(3) { transform:translateY(-50%); }
.body--mobile-menu-is-open .burger__bar:nth-of-type(3)::after { transform:rotate(-45deg); }

/* Header search (search.postcss:5-31,113-146) */
.search--main { position:relative; display:flex; align-items:center; justify-content:flex-end; min-height:var(--target-min); z-index:var(--z-header); }
.search__group { display:flex; align-items:stretch; justify-content:flex-end; position:relative; }
/* CD padding ramp (search.postcss:79-82 `lg:p-1 xl:p-2 2xl:py-3`, base p-0).
   min-width + centering are portal additions: min-height guarantees only
   HEIGHT; without padding the icon-only control would be narrower than the
   44px touch target. */
.search__button { --control-icon-size:var(--sp-9); display:inline-flex; align-items:center; justify-content:center; background:none; border:0; font:inherit;
  color:var(--color-text); min-height:var(--target-min); min-width:var(--target-min); padding:0; cursor:pointer; transition:color var(--duration-fast),opacity var(--duration); }
@media (min-width:1024px){ .search__button { padding:var(--sp-1); } }
@media (min-width:1280px){ .search__button { padding:var(--sp-2); } }
@media (min-width:1544px){ .search__button { padding-block:var(--sp-3); } }
.search__button:hover { color:var(--color-primary-600); }
@media (min-width:1024px){
  /* -mt-0.5 = CD's optical correction for the label beside the magnifier
     (search.postcss:84-86 `lg:pr-1.5 lg:-mt-0.5`). */
  .search__button__title { position:static; width:auto; height:auto; margin:calc(-1 * var(--sp-0-5)) 0 0; overflow:visible; clip:auto;
    padding-right:var(--sp-1-5); }
}
.search--main.open .search__button { opacity:0; visibility:hidden; pointer-events:none; }
.search__form { position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:stretch;
  width:0; opacity:0; visibility:hidden; pointer-events:none; overflow:hidden;
  transition:width var(--duration-slow) var(--ease-in-out), opacity var(--duration) var(--ease-in-out), visibility 0s linear var(--duration-slow); }
/* NO :focus-within: merely tabbing to the search control would otherwise open
   the field while aria-expanded="false" remained and the control stayed visible
   below it: an unsolicited context change (WCAG 3.2.1) plus an incorrectly
   announced state (4.1.2). This is exactly the regression the JS comment in
   shell.js addresses. CD also ties the open state only to the state class
   (search.postcss:113-146). */
.search--main.open .search__form {
  width:18rem; max-width:60vw; opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.search__form input { width:100%; padding:var(--sp-2-5) var(--sp-12) var(--sp-2-5) var(--sp-4); border:var(--stroke-1) solid var(--color-border-input);
  border-radius:var(--radius-xs); background:var(--color-bg); box-shadow:var(--shadow-2xl); min-height:var(--input-h); }
/* CD's focus ring on the open header search field is PURPLE (ring-2
   ring-purple-500, global.postcss:75-77). This sheet's global :focus-visible
   ring sits 2px OUTSIDE the field, where .search__form clips it (overflow:hidden
   carries the disclosure animation); only the dark user-agent ring remained
   visible (user finding 2026-08-04). It is therefore INSET (-2px) here and
   applies on :focus, not only :focus-visible; CD also styles the field from
   focus onward (search.postcss:22). */
.search__form input:focus { outline:var(--stroke-2) solid var(--color-focus-ring); outline-offset:calc(-1 * var(--stroke-2)); }
/* CD search.postcss:120-123: from lg, the open header field receives py-4. */
@media (min-width:1024px){ .search__form input { padding-top:var(--sp-4); padding-bottom:var(--sp-4); } }
.search__submit { --control-icon-size:var(--sp-6); position:absolute; right:0; top:0; bottom:0; width:var(--sp-12); background:none; border:0;
  cursor:pointer; color:var(--color-secondary-700); display:inline-flex; align-items:center; justify-content:center; }
.search__submit:hover { color:var(--color-primary-600); }
/* The open field crossed the federal brand: it overlapped the logo by 64px at
   320, 173px at 480 and 176px at 640. CD gives it a dedicated full row BELOW
   the header (search.postcss:37-56) and hides the logo (:99-103). Our brand
   block is wider than CD's (office + product + intranet pill), so this applies
   up to lg rather than only xs; a 35vw-wide field would be untappable.
   .body--search-is-open implements Item 4.5. */
@media (max-width:1023.98px){
  /* Unposition BOTH intermediate layers: .search__group is also
     `position:relative` and only ~52px wide, so `left:0;right:0` would otherwise
     resolve against the group rather than the header (measured: 52px vs 390px). */
  .search--main, .search--main .search__group { position:static; }
  .search--main.open .search__form {
    position:absolute; left:0; right:0; top:100%; transform:none;
    width:auto; max-width:none; margin-top:var(--sp-2);
    padding-inline:var(--sp-3-5); z-index:var(--header-z); }   /* CD search.postcss:37-42 `.search--mobile { mt-2 px-3.5 }` */
  .top-header { position:relative; }
  /* NO independent transition: the ONE duration-700 on .logo above carries
     both disappearances, open search AND open mobile menu (CD logo.postcss:8). */
  .body--search-is-open .logo { opacity:0; pointer-events:none; }
  /* The cart goes with the brand. CD's open mobile search leaves a row holding
     the burger alone (it hides the logo, search.postcss:99-103) — CD has no cart
     to say anything about. Left standing, ours sat with the burger over the void
     where the brand had been, which is what made the open state look broken
     rather than deliberate (user finding, 2026-08-12). It is hidden, not removed:
     closing the search brings it straight back, and the header cart is never the
     only way to the basket (#/app/shop/cart). */
  .body--search-is-open .top-header__shopping-cart-button-mobile {
    opacity:0; pointer-events:none; }
}
/* CD search.postcss:88-92: on mobile, the only search affordance was a 24px magnifier */
/* Shared square-glyph recipe: cart and main search retain CD's 36 -> 28px
   ramp; the submit glyph remains 24px. The control boxes provide centring. */
:is(.shopping-cart__button, .search__button, .search__submit) .icon {
  width:var(--control-icon-size); height:var(--control-icon-size); align-self:center; vertical-align:middle;
}
@media (min-width:1024px){ .search__button { --control-icon-size:var(--sp-7); } }