/* Chain Assembly: stock Fashion 1.1.11 header / footer components restyled to this design (P4 retrofit).
   Loaded from sections/header/header.html and sections/footer/footer.html. Stock classes are styled here only
   where the design needs them; the stock header.css / footer.css are not loaded. */

/* ---------- cart bubble (components/cart/cart-bubble): same box as the old button.cart-btn ---------- */
theme-cart-bubble.cart-bubble{display:flex;align-items:center}
.cart-bubble>.cart-btn{display:block;position:relative;color:inherit;text-decoration:none}
.cart-bubble>.cart-btn svg{display:block}

/* ---------- predictive search (sections/header/components/action-bar-search.js) ---------- */
theme-action-bar-search.x-search{display:block}
.header-action-bar__results.search-predict{display:none}
.header-action-bar__results.search-predict.shown{display:block}
.header-action-bar__results-loading{display:none;justify-content:center;padding:16px}
.header-action-bar__results.loading .header-action-bar__results-loading{display:flex}
.header-action-bar__results-spinner{width:24px;height:24px;color:var(--iv2)}
.header-action-bar__results-list{display:block}
.ps-item>.predictive-search__product{display:contents}
.predictive-search__footer{display:block}

/* ---------- language / country selectors (sections/header/components/locale-picker) ---------- */
.x-locale theme-locale-picker,.x-locale theme-locale-picker>form{display:contents}
.x-locale .theme-locale-picker__inner{display:flex;align-items:center;gap:16px;min-width:0}
.x-locale theme-dropdown-menu{position:relative;display:inline-flex;min-width:0}
.x-locale .dropdown-menu__label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font:700 calc(12px * var(--fs-b))/calc(16px * var(--fs-b)) var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--iv2)}
.x-locale .dropdown-menu__label:hover,.x-locale .dropdown-menu__label:has(.dropdown-menu__trigger:checked){color:var(--ivory)}
.x-locale .dropdown-menu__label:has(.dropdown-menu__trigger:focus-visible){outline:2px solid var(--butter);outline-offset:4px}
.x-locale .dropdown-menu__label-text{white-space:nowrap}
.x-locale .dropdown-menu__label-arrow{display:inline-flex;width:10px;height:10px;transition:transform .16s ease-in-out}
.x-locale .dropdown-menu__label-arrow svg{width:10px;height:10px;stroke:none}
.x-locale .dropdown-menu__trigger{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0}
.x-locale .dropdown-menu__label:has(.dropdown-menu__trigger:checked) .dropdown-menu__label-arrow{transform:rotate(-180deg)}
.x-locale .dropdown-menu__list{position:absolute;inset-block-start:calc(100% + 12px);inset-inline-end:0;z-index:60;display:none;width:max-content;max-height:420px;overflow-y:auto;list-style:none;padding:8px 0;background:var(--iron);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.x-locale theme-dropdown-menu.top .dropdown-menu__list{inset-block:auto calc(100% + 12px)}
.x-locale theme-dropdown-menu.left .dropdown-menu__list{inset-inline:0 auto}
.x-locale .dropdown-menu__label:has(.dropdown-menu__trigger:checked)~.dropdown-menu__list{display:block}
.x-locale .dropdown-menu__list-item{position:relative;display:flex;padding:8px 16px;cursor:pointer;white-space:nowrap;font:400 calc(14px * var(--fs-b))/calc(20px * var(--fs-b)) var(--f-body);color:var(--iv2)}
.x-locale .dropdown-menu__list-item:hover,.x-locale .dropdown-menu__list-item:has(:checked){color:var(--ivory);background:rgba(241,238,231,.06)}
.x-locale .dropdown-menu__list-item:has(:focus-visible){outline:2px solid var(--butter);outline-offset:-2px}
.x-locale--drawer{padding:24px;border-top:1px solid var(--line)}
@media (max-width:1023px){.x-locale--head{display:none}}
@media (min-width:1024px){.x-locale--drawer{display:none}}

/* ---------- footer app blocks (@app, sections/footer/footer.html) ---------- */
.foot-apps{display:flex;flex-direction:column;gap:24px;padding:32px 0;border-top:1px solid var(--line)}

/* P2 (PM request, browser pass D4): header search popup.
   - The suggestions form (stock .header-action-bar__results-list) is a flex row, so the predictive-search section
     inside it shrank to its content and "N RESULTS" sat mid-row: the section now takes the full row, as on live.
   - The SHOPLINE Product Search app embed adds an empty, transparent absolute layer (z-index 100) over the whole
     <theme-action-bar-search>; it took the pointer from our input (no hover, so no native clear (x) button, as on
     live) and from the suggestions. Our form and suggestions sit above it; the app's layer is not changed. */
.header-action-bar__results-list>*{flex:1 1 100%;min-width:0}
theme-action-bar-search.x-search #search-form,theme-action-bar-search.x-search .header-action-bar__results{position:relative;z-index:101}
/* P2b: the SHOPLINE Product Search app embed loads a global `input::-webkit-search-cancel-button{display:none}`, which
   removed the browser's own clear (x) from our header search field. Live (where the app does not attach) shows that
   native clear button; it is shown again on our field only (the app's own inputs keep their rule). */
theme-action-bar-search.x-search #search-q::-webkit-search-cancel-button{display:block;-webkit-appearance:searchfield-cancel-button;cursor:pointer}