/* Prevent Flash of Unstyled Content */
.cl_flexnav ul {
    /* Hides items visually but keeps them measurable by JS */
    visibility: hidden;
    opacity: 0;
}

/* JS adds this class when calculations are done */
.cl_flexnav.cl-nav-ready ul {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease-in; /* Smooth reveal */
}

/* FlexNav loaded only for the PHONE layout's drawer (main_menu.php prints data-flexnav-wide="no"):
   on wider screens it never moves a link, so the row needs no measuring and shows at once, as it did
   before the design had a phone layout. Same breakpoint as main_header/v1/generated_css.php. */
@media (min-width: 768px) {
    .cl_flexnav[data-flexnav-wide="no"] ul {
        visibility: visible;
        opacity: 1;
    }
}

/* Before FlexNav is ready the hidden list must not take more than one line. `visibility: hidden` keeps
   the links measurable but still lets them take space: the compiled `flex-wrap: wrap` stacked 12 links
   into a 528px block on a phone, and when flexnav.js moved them into "More" the whole page jumped up
   (CLS 0.329 on demo1's product page once the scripts load at the end of the page — task
   storefront-js-loading-18-10-2026). One line, the links at their natural width (flexnav.js reads each
   link's width), clipped by the nav, which may shrink meanwhile. Rows that show at once on wide screens
   (data-flexnav-wide="no") keep their wrapping, below.
   flex-basis 0: that hidden line must not take the logo's room either. As the menu's basis it squeezed the logo
   (both min-width: 0) until the links moved into "More" — demo1's phone logo 41px, then 105px: PageSpeed's whole
   layout shift on the product page, and the cart area moved too (task header-logo-jump-before-menu-ready-22-10-2026).
   The menu takes what is left, as it does once ready; flexnav.js measures each link and the row with the menu
   collapsed, so neither depends on it.
   Not on the menu where every link goes into "More" (the cases below) — it has no line of links to tame, and the
   design's own values must hold there so the first paint equals the result: forcing them shifted the cart area of a
   logo_center header 42px (its menu is `min-width: 0` once ready). Nor where the links show at once on wide screens
   (data-flexnav-wide="no"): basis 0 stacked them 372px tall. Only plain :not() here, so no browser drops the rule. */
@media (max-width: 767.98px) {
    .cl-header-main:not(.layout-drawer_logo_start):not(.layout-drawer_logo_end):not(.mlayout-drawer_logo_start):not(.mlayout-drawer_logo_end) .main-nav.cl_flexnav:not([data-flexnav-phone="all"]):not(.cl-nav-ready),
    .cl-header-main[class*=" mlayout-"]:not(.mlayout-drawer_logo_start):not(.mlayout-drawer_logo_end) .main-nav.cl_flexnav:not([data-flexnav-phone="all"]):not(.cl-nav-ready) {
        min-width: 0;
        overflow: hidden;
        flex-basis: 0;
    }
}
@media (min-width: 768px) {
    .cl-header-main:not(.layout-drawer_logo_start):not(.layout-drawer_logo_end) .main-nav.cl_flexnav:not([data-flexnav-wide="no"]):not(.cl-nav-ready) {
        min-width: 0;
        overflow: hidden;
        flex-basis: 0;
    }
}
.cl-header-main .main-nav.cl_flexnav:not(.cl-nav-ready) ul {
    flex-wrap: nowrap;
}
.cl-header-main .main-nav.cl_flexnav:not(.cl-nav-ready) ul > li {
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .cl-header-main .main-nav.cl_flexnav[data-flexnav-wide="no"]:not(.cl-nav-ready) ul {
        flex-wrap: wrap;
    }
    .cl-header-main .main-nav.cl_flexnav[data-flexnav-wide="no"]:not(.cl-nav-ready) ul > li {
        flex-shrink: 1;
    }
}

/* Where every link goes into "More", the result is known before flexnav.js runs, so the first paint shows it:
   each link hidden (the empty <ul> stays, as once ready), "More" shown, and no gap in the menu (the compiled gap
   applies while a link shows). The server prints the count flexnav.js writes there
   (publicUtils_cl::renderFlexNavButtonAndDropdownHtmlCode()). Without it the cart area moved when "More" appeared —
   914px to 146px with the desktop drawer layout. The cases are flexnav.js isEveryLinkInMoreNow(), per width: a drawer
   layout in force (the phone's own below 768px, else the design's), or a phone with every link in More. Keep the two
   lists the same, and the exclusions of the rule above with them. */
@media (max-width: 767.98px) {
    .cl-header-main.mlayout-drawer_logo_start .main-nav.cl_flexnav:not(.cl-nav-ready),
    .cl-header-main.mlayout-drawer_logo_end .main-nav.cl_flexnav:not(.cl-nav-ready),
    .cl-header-main.layout-drawer_logo_start:not([class*=" mlayout-"]) .main-nav.cl_flexnav:not(.cl-nav-ready),
    .cl-header-main.layout-drawer_logo_end:not([class*=" mlayout-"]) .main-nav.cl_flexnav:not(.cl-nav-ready),
    .cl-header-main .main-nav.cl_flexnav[data-flexnav-phone="all"]:not(.cl-nav-ready) {
        column-gap: 0;
    }
    .cl-header-main.mlayout-drawer_logo_start .main-nav.cl_flexnav:not(.cl-nav-ready) > ul > li,
    .cl-header-main.mlayout-drawer_logo_end .main-nav.cl_flexnav:not(.cl-nav-ready) > ul > li,
    .cl-header-main.layout-drawer_logo_start:not([class*=" mlayout-"]) .main-nav.cl_flexnav:not(.cl-nav-ready) > ul > li,
    .cl-header-main.layout-drawer_logo_end:not([class*=" mlayout-"]) .main-nav.cl_flexnav:not(.cl-nav-ready) > ul > li,
    .cl-header-main .main-nav.cl_flexnav[data-flexnav-phone="all"]:not(.cl-nav-ready) > ul > li {
        display: none;
    }
    .cl-header-main.mlayout-drawer_logo_start .main-nav.cl_flexnav:not(.cl-nav-ready) > .cl_more_flexnav,
    .cl-header-main.mlayout-drawer_logo_end .main-nav.cl_flexnav:not(.cl-nav-ready) > .cl_more_flexnav,
    .cl-header-main.layout-drawer_logo_start:not([class*=" mlayout-"]) .main-nav.cl_flexnav:not(.cl-nav-ready) > .cl_more_flexnav,
    .cl-header-main.layout-drawer_logo_end:not([class*=" mlayout-"]) .main-nav.cl_flexnav:not(.cl-nav-ready) > .cl_more_flexnav,
    .cl-header-main .main-nav.cl_flexnav[data-flexnav-phone="all"]:not(.cl-nav-ready) > .cl_more_flexnav {
        display: block;
    }
}
@media (min-width: 768px) {
    .cl-header-main.layout-drawer_logo_start .main-nav.cl_flexnav:not(.cl-nav-ready),
    .cl-header-main.layout-drawer_logo_end .main-nav.cl_flexnav:not(.cl-nav-ready) {
        column-gap: 0;
    }
    .cl-header-main.layout-drawer_logo_start .main-nav.cl_flexnav:not(.cl-nav-ready) > ul > li,
    .cl-header-main.layout-drawer_logo_end .main-nav.cl_flexnav:not(.cl-nav-ready) > ul > li {
        display: none;
    }
    .cl-header-main.layout-drawer_logo_start .main-nav.cl_flexnav:not(.cl-nav-ready) > .cl_more_flexnav,
    .cl-header-main.layout-drawer_logo_end .main-nav.cl_flexnav:not(.cl-nav-ready) > .cl_more_flexnav {
        display: block;
    }
}

/* Dynamic Flex Navigation Styles */
.cl_flexnav {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
/* Hidden items */
.cl_flexnav li.cl_hidden_flexnav {
    display: none;
}

/* More menu container */
.cl_more_flexnav {
    position: relative;
    display: none; /* Hidden by default */
}

/* `all: unset` strips every default browser style on the <button>
   (border, background, font inheritance, padding, focus outline, etc.)
   so admin's CSS via header_flexnav_more_button_style is the only
   source of styling. Keeping <button> preserves accessibility:
   keyboard activation (Enter/Space), screen-reader semantics, native
   Tab focus. We restore only the structural properties we need below. */
.cl_more_flexnav button {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    box-sizing: border-box;
}
.cl_more_flexnav button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Touch accessibility floor (WCAG 2.2 SC 2.5.8). `all: unset` above strips the UA
   button padding, and this button's brush (header_flexnav_more_button_style) exposes
   only font/background/border/border-radius — no padding, height or min-height — so a
   merchant CANNOT enlarge it from wp-admin (StyleCleaner strips anything outside the
   brush). Left alone the hit box collapses to its line box: 16px tall, and ~13px wide
   when the label is blank and the count switched off, which is the natural state of the
   drawer_logo_start / drawer_logo_end layouts where this button IS the hamburger. It is
   also the sole route to every nav item on a phone — headerControllerFR::isFlexNavActive()
   ORs $isMobile, so header_flexnav_is_active='no' cannot switch it off there.
   min-width is therefore load-bearing, not belt-and-braces; justify-content re-centres
   the icon that would otherwise strand at the flex start edge. Scoped to coarse pointers
   so desktop navs that overflow keep their inline text-link sizing. */
@media (pointer: coarse) {
    .cl_more_flexnav button {
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }
}

.cl_more_flexnav .more-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cl_more_flexnav .cl_count {
    font-size: 12px;
    opacity: 0.8;
}

/* The More button's phone icon (header_flexnav_more_button_phone_icon_id, printed before the text
   by publicUtils_cl::renderFlexNavButtonAndDropdownHtmlCode): phones only, and there it replaces
   the icon after the text. Without one, every screen keeps the same button. */
.cl_more_flexnav .cl-more-phone-icon {
    display: none;
}

/* "While open" icons (header_flexnav_more_button_open_icon_id / _phone_open_icon_id): each one
   replaces its icon while the list is open — the button's aria-expanded, which flexnav.js keeps
   current (Shopify Dawn's menu button holds both icons and hides one by state the same way). The
   renderer prints an open icon only beside the icon it replaces; `:has()` keeps the closed icon when
   there is no open one. The desktop pair swaps at every width, the phone pair below. */
.cl_more_flexnav .cl-more-open-icon,
.cl_more_flexnav .cl-more-phone-open-icon {
    display: none;
}
.cl_more_flexnav button[aria-expanded="true"] .cl-more-open-icon {
    display: inline-flex;
}
.cl_more_flexnav button[aria-expanded="true"]:has(.cl-more-open-icon) .cl-more-icon {
    display: none;
}

@media (max-width: 767.98px) {
    .cl_more_flexnav .cl-more-phone-icon {
        display: inline-flex;
    }
    /* The phone open icon is excluded by name: it is a .cl-icon too, and this hides the desktop pair. */
    .cl_more_flexnav button:has(.cl-more-phone-icon) .cl-icon:not(.cl-more-phone-icon):not(.cl-more-phone-open-icon) {
        display: none;
    }
    .cl_more_flexnav button[aria-expanded="true"] .cl-more-phone-open-icon {
        display: inline-flex;
    }
    .cl_more_flexnav button[aria-expanded="true"]:has(.cl-more-phone-open-icon) .cl-more-phone-icon {
        display: none;
    }
}

/* Dropdown
 * Positioning ancestor is .cl_more_flexnav (the More button wrapper has
 * position: relative above; dropdown is rendered as its child in
 * publicUtils_cl::renderFlexNavButtonAndDropdownHtmlCode). So `right: 0`
 * aligns the dropdown's right edge to the More button's right edge.
 *
 * When flexnav.js detects the More button has more viewport room to its
 * right, it sets data-align="start" → CSS flips to `left: 0` → dropdown
 * anchors to the More button's LEFT edge and extends rightward. Keeps it
 * on-screen across every layout (drawer_logo_start, inline FlexNav with
 * More mid-nav, etc.). Arrow flips to match. */
.cl_dropdown_flexnav {
    position: absolute !important;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    margin-top: 10px;
    padding: 8px;
    /* This panel had NO height cap and NO overflow at all, while every peer has one (the search
       dropdown caps + scrolls, the city combobox caps at 240px + scrolls). That matters more here
       than anywhere else in the plugin: on a phone this dropdown is the SOLE route to every nav
       item — headerControllerFR::isFlexNavActive() ORs $isMobile, so a merchant cannot switch it
       off — and with `main_header_is_sticky='yes'` the ancestor becomes position:fixed, so page
       scroll CANNOT reveal anything that runs past the fold. A long menu simply lost its tail.
       `overflow-y: auto` is the actual fix — it makes the overflow reachable no matter what.
       The 60vh cap is deliberately a viewport unit even though this task is removing them
       elsewhere, and the distinction is real: the rules being converted are boxes that must
       EXACTLY fill the screen, where `vh` overshooting the visible area clips content with no
       recourse. Here `vh` is only a conservative ceiling on a dropdown, and the failure mode of
       overshooting is "scroll inside the panel", not "content unreachable". There is also no
       fixed-position parent to take a percentage of — the anchor is the More button. 60vh clears
       the header plus ~160px of browser chrome on any viewport at/above ~575px tall, and below
       that the scroll handles the remainder. */
    max-height: 60vh;
    overflow-y: auto;
    /* One link per row whatever the link's own display (G70, 02-10-2026). flexnav.js puts the
       links straight into this panel, with no <li>, and a button design gives each of them
       display:inline-flex and margin:0 at 0,2,0, which beats `.cl_dropdown_flexnav a` below
       (0,1,1): short links then shared a row ("FAQ Contact"). The panel stacks them itself
       instead, each keeping its own width as before (flex-start), and the gap replaces the
       links' margin-bottom, which that same margin:0 removed. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.cl_dropdown_flexnav[data-align="start"] {
    right: auto;
    left: 0;
}

.cl_dropdown_flexnav.cl_open_flexnav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* "Open the list at the header's bottom edge" (header_flexnav_dropdown_at_bar_bottom — the view puts
   cl-header-list-at-bar-bottom on the bar's width wrapper): FlexNav_cl.alignDropdown() sets the list's
   top to the header's bottom when it opens, so the 10px gap under the button goes. Only the open
   animation's own properties move: under the rule above's `transition: all` the new top slid down
   with it on the first open (about 25px more than the 10px of every later open). */
.cl-header-list-at-bar-bottom .cl_dropdown_flexnav {
    margin-top: 0;
    transition-property: opacity, visibility, transform;
}

/* "Phones: every link in More" (header_flexnav_phone_all_in_more — main_menu.php prints
   data-flexnav-phone="all"): on a phone the menu opens as a list across the whole bar, right under
   it, instead of a 200px box beside the button. The nav and the More wrapper drop their own
   positioning, so the panel's containing block becomes .cl-header-main (position: relative,
   main_header/v1/generated_css.php): left/right 0 span the bar and top: 100% sits under its last
   row. Each link takes the full width — a phone-sized tap target. The panel keeps its card design,
   the 60vh cap and the scroll above. It overlays the page rather than pushing it down: nothing
   jumps, and it works inside a sticky (fixed) header. Same breakpoint as flexnav.js. */
@media (max-width: 767.98px) {
    .cl_flexnav[data-flexnav-phone="all"],
    .cl_flexnav[data-flexnav-phone="all"] .cl_more_flexnav {
        position: static;
    }
    .cl_flexnav[data-flexnav-phone="all"] .cl_dropdown_flexnav {
        left: 0;
        right: 0;
        min-width: 0;
        margin-top: 0;
        align-items: stretch;
    }
    /* "Open the list across the whole screen" (header_flexnav_phone_list_full_width — the view puts
       cl-header-phone-list-full on the bar's width wrapper, only with the switch above on): the bar
       drops its positioning too, so the list's containing block becomes that wrapper, whose padding
       box is the screen's width on a phone (the width modes pad only left and right). left/right 0
       then reach the screen's edges, and top: 100% is still the bar's bottom: the bar is the
       wrapper's only child, and its margins collapse through it. Exact, and no 100vw, which counts
       the scrollbar on a narrow desktop window. */
    .cl-header-phone-list-full {
        position: relative;
    }
    .cl-header-phone-list-full > .cl-header-main {
        position: static;
    }
}

/* Dropdown arrow — mirrors the alignment side.
.cl_dropdown_flexnav::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: white;
    transform: rotate(45deg);
    border-radius: 2px;
}

.cl_dropdown_flexnav[data-align="start"]::before {
    right: auto;
    left: 20px;
}
 */
 
/* Dropdown links */
.cl_dropdown_flexnav a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 12px 16px;
    transition: background-color 0.3s ease;
    border-radius: 6px;
}

.cl_dropdown_flexnav a:hover {
    background-color: #f8f9fa;
}

/* The wordmark below asks to inherit "the header's own colour" — but logo.php nests it in an
   <a href>, and nothing in the plugin declares a colour on that anchor, so `inherit` resolved to the
   UA stylesheet's link colour instead. The chain broke one element below where the comment assumed
   it started, and the fallback shipped browser-blue on any theme that does not style header anchors
   (measured live: rgb(0,0,238) on chhiwat.ma, against a rgb(0,0,0) .logo-container).
   Colouring the ANCHOR repairs the chain rather than overriding it, so the wordmark keeps taking
   whatever colour the header actually has. An <img> logo ignores `color`, so this is inert there.
   It lives in this static file and NOT in generated_css.php — which already has a rule on this same
   anchor — because generated_css is compiled at save time and stored per design, so a change there
   would reach an existing store only when someone re-saved that header design. */
.logo-container a {
    color: inherit;
}

/* Site-name fallback when an active logo block has no image (see main_header/v1/logo.php).
   Its typography comes from the design's `logo_text_preset` — a typography preset on the span at
   (0,3,0), which beats this (0,2,0) rule. What is here is the NO-PRESET fallback (a deactivated or
   deleted preset emits no CSS) plus the structural nowrap; a store that uploads a logo never renders
   it. Keep it. */
.logo-container .cl-logo-text {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    white-space: nowrap;
}

/* The site-name fallback cannot wrap (nowrap above) and its container clips it
   (.cl-header-main .logo-container ships overflow:hidden + flex-shrink:1 + min-width:0 so
   the header never overflows horizontally), so on a narrow viewport a long store name is
   cut MID-GLYPH with no signal that anything is missing. The only admin-editable property
   on that container is max-width — a ceiling, which cannot stop a flex item shrinking
   below its content width — so no setting reaches this.
   min-width:0 is load-bearing: the <a> is itself a flex item whose default min-width:auto
   pins it at the nowrap min-content width, which is why the CONTAINER does the clipping
   today and text-overflow would otherwise never fire. Flex items are blockified, so the
   inline-block on this <a> computes to block and text-overflow applies.
   :has() scopes this to the no-image fallback; an <img> logo already degrades via
   object-fit:contain. NOTE this signals the truncation, it does not un-truncate — making
   the full name fit means taking width from the nav, which is a merchant decision with
   existing controls (More-button label, nav count, search, width mode, header layout). */
.logo-container a:has(.cl-logo-text) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The header over the first section (G133, main_header_transparent_pages): the container stays in the
   page right after the topbar (and the admin bar), but takes no height, so the first section starts
   at the header's top and runs under it. Nothing is pinned to the top of the page, so the topbar and
   the admin bar can never end up under the header (demo2's CSS did that), and no height is measured.
   When the bar sticks it is position:fixed (public.css) and nothing below moves. z-index keeps the
   bar and its More list above the section; the cart drawer and popups sit far higher. The colours of
   the transparent state are the design's (main_header/v1/generated_css.php). */
.cl-header-container.cl-header-over-first-section {
    position: relative;
    z-index: 100;
    height: 0;
}

/* The transparent logo (logo_transparent_image_id), printed after the normal one only on such a page:
   shown while the bar is transparent, the normal one again once it sticks. Each rule (0,3,0 or more) beats
   the compiled `.cl-header-main .logo-container img { display: block }` (0,2,1). */
.cl-site-header .logo-container .cl-logo-transparent {
    display: none;
}
.cl-site-header.cl-header-transparent:not(.is-sticky) .logo-container .cl-logo-transparent {
    display: block;
}
.cl-site-header.cl-header-transparent:not(.is-sticky) .logo-container .cl-logo-normal {
    display: none;
}

/* An image logo fits the bar's height, whatever its ratio (G141, 31-10-2026). The compiled CSS sizes the logo box
   to the bar (`.cl-header-main .logo-container { height: 100% }`) and the image to the box (`height: 100%`,
   `object-fit: contain`), but logo.php puts the home link between them, and a link with no height turned the
   image's 100% into `auto`: the image was max-width wide and as tall as its ratio made it, so a square, tall or 3:1
   logo ran past a bar with a Height and the box's overflow:hidden showed its middle band (dev1, 60px bar: 76 of 168
   cases; demo2: a 1:1 logo 240 × 240 in its 50px bar). Giving the link the box's height completes the chain: the
   image is the bar's inner height and its width follows its ratio, max-width (logo_image_style / _mobile) staying an
   upper limit — a logo that fitted is drawn exactly as before. With no Height, and in `stacked` (height: auto), the
   box has no height to give: the bar takes the logo's height, as before. Not the store-name text logo, whose link
   must stay a line box for the "…" above. While the bar is transparent the link holds only the transparent image
   (the normal logo, image or text, is hidden), so it takes the height then too. */
.cl-header-main .logo-container a:has(> img:not(.cl-logo-transparent)),
.cl-site-header.cl-header-transparent:not(.is-sticky) .cl-header-main .logo-container a:has(> .cl-logo-transparent) {
    height: 100%;
}

/* The header's Bottom Row (G137, main_header/v1/bottom_row.php): a line under the bar holding the secondary menu when
   the design places it there. The design's compiled CSS gives its height, the space between the links and their
   alignment, only when the row is used; these rules give its structure and print for every header (they match
   nothing without the row). The row's card (main_header_bottom_row_preset) is its skin: background, line, padding. */
.cl-header-bottom-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
/* One line that swipes sideways when the links do not fit, with no scrollbar (Horizon's navigation bar does the same). */
.cl-header-bottom-row-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.cl-header-bottom-row-scroll::-webkit-scrollbar {
    display: none;
}
/* The box inside carries the BAR's card class (D3) with `cl-card-pad-only` (public.css): of that card it keeps only the
   side padding, so the row's links start where the bar's first item does, whatever card the bar has. The row's own card
   therefore gives no side padding (its background, line, corners, shadow and top / bottom padding stay): with both,
   a card such as 304 put the links 16px further in than the bar's (h02, 01-11-2026). 0,3,0 with !important beats a
   card with "Force styles". */
.cl-site-header .cl-header-bottom-row.cl-header-bottom-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.cl-header-bottom-row .end-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: max-content;
}
.cl-header-bottom-row .end-menu ul a {
    text-decoration: none;
    white-space: nowrap;
}
/* As on the right side: a link with its own button design takes the design's colour, the others the menu's. */
.cl-header-bottom-row .end-menu ul a:where(:not([class*="cl-preset-"])) {
    color: inherit;
}
/* Phones: the box inside the swipe line grows with the links, so the line scrolls from edge to edge of the screen and
   keeps the bar's side padding at both ends. Not on wider screens: a boxed width mode's max-width would lose to the
   min-width (CSS lets min-width win), and the links fit there. */
@media (max-width: 767.98px) {
    .cl-header-bottom-row-scroll > div {
        width: max-content;
        min-width: 100%;
    }
}

/* The words beside the account and cart icons (end_menu_account_icon_text, end_menu_cart_icon_text). public.css lets text
   inside any div break between letters (`word-break: break-word`), and the right side shrinks with the logo when the bar
   is short of room: "Account" stood one letter per line on phones (14px wide, 8 lines, measured on dev1 01-11-2026). They
   stay on one line, as the menu links do. Their colour is the icon's — also over a photo and when stuck: a text design
   (end_menu_icons_text_preset) gives them font, size, weight and case; 0,4,0 against its 0,3,0. */
.cl-header-main .cl-header-icon-text {
    white-space: nowrap;
}
.cl-header-main :is(.cl-account-icon-container, .cl-cart-icon-container) > .cl-header-icon-text.cl-header-icon-text {
    color: inherit;
}
/* Phones: icons only, the words kept as the links' names for screen readers (their aria-label), unless the design shows
   them on phones too (end_menu_icons_text_on_phones). Horizon: "Icons are always used on mobile". */
@media (max-width: 767.98px) {
    .cl-header-main .cl-header-icon-text:not(.cl-header-icon-text-on-phones) {
        display: none;
    }
}

/* The secondary menu's links on the right side that do not fit go into the main menu's More list, after its own links
   (flexnav.js, fitEndLinks()): the link, and the menu itself when none is left. 0,4,0 against the compiled
   `.cl-header-main .end-menu { display: flex }` (0,2,0). */
.cl-header-main .cl-header-end-zone .end-menu li.cl-end-link-in-more,
.cl-header-main .cl-header-end-zone .end-menu.cl-end-menu-in-more {
    display: none;
}
/* With no More list to send them to — no main menu, or one that keeps every link in the row on this width (FlexNav only
   on phones; flexnav.js sets cl-header-end-swipe when they do not fit, and gives the menu the room that is left) — the
   right side's links swipe sideways inside the bar instead of making the page wider than the screen. Without FlexNav
   the right side shrinks before the logo. */
.cl-header-main:not(:has(.cl_flexnav)) .cl-header-end-zone {
    min-width: 0;
    flex-shrink: 100;
}
.cl-header-main:not(:has(.cl_flexnav)) .cl-header-end-zone .end-menu,
.cl-header-main.cl-header-end-swipe .cl-header-end-zone .end-menu {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.cl-header-main:not(:has(.cl_flexnav)) .cl-header-end-zone .end-menu::-webkit-scrollbar,
.cl-header-main.cl-header-end-swipe .cl-header-end-zone .end-menu::-webkit-scrollbar {
    display: none;
}
.cl-header-main:not(:has(.cl_flexnav)) .cl-header-end-zone .end-menu > ul,
.cl-header-main.cl-header-end-swipe .cl-header-end-zone .end-menu > ul {
    flex-wrap: nowrap;
    width: max-content;
}