/*
 * Site Header V5 - structure and default look, shared by every header on the page.
 *
 * Each instance's settings arrive as --shv5-* custom properties that default/view.php sets on
 * #<id> and on its drawer root, together with the rules that depend on the instance's breakpoints
 * (which bar shows, the current logo and row heights). A property nobody set falls back to the
 * design tokens, and every token fallback here is the token sheet's own default
 * (scripts/verify-cms-tokens.php compares them).
 *
 * Storefront themes style bare a, button, input, ul and img, so every rule is prefixed with
 * .shv5-scope (on the header and on the drawer root), which outranks them. Two !important uses,
 * both defences: the focus ring (themes ship "*:focus {outline: none !important}") and [hidden].
 * Separation is borders and backgrounds only: this sheet draws no shadow and no blur. A shadow or a
 * blur is drawn only where a setting asks for one, by a rule the view writes for that header.
 *
 * Custom properties the view may set (a blank setting is simply not set):
 *   bar          --shv5-bar-bg  --shv5-bar-text  --shv5-bar-border  --shv5-bar-border-w
 *                --shv5-main-h  --shv5-main-h-mobile  --shv5-row-px  --shv5-zone-gap  --shv5-item-gap
 *                --shv5-bar-blur (the view's rule)
 *   top bar      --shv5-top-bg  --shv5-top-text  --shv5-top-h  --shv5-top-font-size
 *                --shv5-top-align (the view's rule)
 *   logo's band  --shv5-band-gap (the view's rules, in a header whose logo stands across the top and main bars)
 *   bottom bar   --shv5-bottom-bg  --shv5-bottom-text  --shv5-bottom-border  --shv5-bottom-h
 *   phones       --shv5-top-h-mobile  --shv5-bottom-h-mobile  --shv5-row-px-mobile  --shv5-action-bg-mobile
 *                --shv5-action-padding-mobile  --shv5-action-transform-mobile  --shv5-top-bg-mobile
 *                --shv5-top-text-mobile  --shv5-bottom-bg-mobile  --shv5-bottom-text-mobile (the view's
 *                rules, in the phone widths: each sets again there what this sheet reads on every screen)
 *   logo         --shv5-logo-h  --shv5-logo-h-tablet  --shv5-logo-h-mobile  --shv5-logo-h-shrunk
 *                --shv5-logo-text-size  --shv5-logo-text-weight  --shv5-logo-text-gap
 *   icons        --shv5-icon-size  --shv5-icon-color  --shv5-icon-hover  --shv5-icon-stroke
 *                --shv5-icon-label-size  --shv5-icon-label-weight  --shv5-badge-bg  --shv5-badge-text
 *   buttons      --shv5-action-bg  --shv5-action-hover-bg  --shv5-action-padding  --shv5-action-radius
 *                (the cart, the wishlist and the account's icons, in the bars)
 *   account      --shv5-account-size  --shv5-account-link-weight; its words as buttons of their own:
 *                --shv5-account-text  --shv5-account-bg  --shv5-account-hover-bg  --shv5-account-border
 *                --shv5-account-border-w  --shv5-account-radius  --shv5-account-padding
 *                --shv5-account-shadow (the view's rules, on the sign-in and create-account links)
 *   menu button  --shv5-toggle-radius; --shv5-toggle-border  --shv5-toggle-w  --shv5-toggle-h (the view's rules)
 *   menu panels  --shv5-panel-shadow (the view's rule)
 *   search       --shv5-search-bg  --shv5-search-text  --shv5-search-border  --shv5-search-radius
 *                --shv5-search-w  --shv5-search-border-w  --shv5-search-hover-bg
 *   drawer       --shv5-drawer-bg  --shv5-drawer-text  --shv5-drawer-divider  --shv5-drawer-overlay
 *                --shv5-drawer-font-size  --shv5-drawer-w
 *   scrolling    --shv5-stuck-bg  --shv5-overlay-text; --shv5-stuck-shadow  --shv5-stuck-blur
 *                --shv5-stuck-border  --shv5-stuck-border-w (the view's rules)
 *   always set   --shv5-z  --shv5-z-overlay  --shv5-z-drawer  --shv5-logo-cur  --shv5-main-cur
 *                --shv5-content-width (also read by the embedded menu's full-width panels)
 * Four looks this sheet leaves to the page - the font (--shv5-font), the buttons' capitals
 * (--shv5-action-transform), the logo words' letter spacing (--shv5-logo-text-tracking) and the
 * search hint's colour (--shv5-search-placeholder) - and the always-visible search box's width
 * (--shv5-search-w, which also sets its flex basis below) get their rule from the view, and only in
 * a header that sets them: a theme that styles bare elements keeps styling an unset header as before.
 */

/* ------------------------------------------------------------------------------ resets */

.shv5-scope,
.shv5-scope *,
.shv5-scope *::before,
.shv5-scope *::after {
    box-sizing: border-box;
}

/* Themes animate every link and image ("transition: all"), which would drag out every change here. */
.shv5-scope a,
.shv5-scope button,
.shv5-scope img,
.shv5-scope input,
.shv5-scope span,
.shv5-scope svg {
    transition: none;
}

/* Our own display rules must never show something the markup hides. */
.shv5-scope [hidden] {
    display: none !important;
}

/* A widget slot's content waits in a <template> (older browsers do not hide one themselves). */
.shv5-scope template {
    display: none;
}

.shv5-scope .shv5-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shv5-scope .shv5-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.shv5-scope a:focus-visible,
.shv5-scope button:focus-visible,
.shv5-scope input:focus-visible,
.shv5-scope [tabindex]:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}

.shv5-scope {
    --shv5-motion: 0.25s;
}

@media (prefers-reduced-motion: reduce) {
    .shv5-scope {
        --shv5-motion: 0s;
    }
}

/* ------------------------------------------------------------------------------ the header */

.shv5-scope.shv5 {
    position: relative;
    z-index: var(--shv5-z, 1030);
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: var(--shv5-bar-border-w, 1px) solid var(--shv5-bar-border, var(--cms-line, #dfe5ec));
    background: var(--shv5-bar-bg, var(--cms-surface, #ffffff));
    color: var(--shv5-bar-text, var(--cms-text, #18202c));
    font-size: var(--cms-font-size, 1rem);
    line-height: 1.4;
    text-align: left;
}

.shv5-scope .shv5-skip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.shv5-scope .shv5-skip:focus {
    width: auto;
    height: auto;
    padding: 10px 16px;
    clip: auto;
    border: 2px solid currentColor;
    border-radius: var(--cms-radius-sm, 6px);
    background: var(--cms-surface, #ffffff);
    color: var(--cms-text, #18202c);
    text-decoration: none;
}

/* ------------------------------------------------------------------------------ rows and zones */

.shv5-scope .shv5-row {
    /* Mega menu panels position against the full-width row, not the centred content. */
    position: relative;
}

.shv5-scope .shv5-row--top {
    --shv5-row-h: var(--shv5-top-h, 40px);
    background: var(--shv5-top-bg, var(--cms-surface-2, #f8f9fa));
    color: var(--shv5-top-text, currentColor);
    font-size: var(--shv5-top-font-size, var(--cms-font-size-sm, 0.875rem));
}

.shv5-scope .shv5-row--main {
    --shv5-row-h: var(--shv5-main-cur, 72px);
}

.shv5-scope .shv5-row--bottom {
    --shv5-row-h: var(--shv5-bottom-h, 48px);
    border-top: 1px solid var(--shv5-bottom-border, var(--cms-line, #dfe5ec));
    background: var(--shv5-bottom-bg, transparent);
    color: var(--shv5-bottom-text, currentColor);
}

.shv5-scope .shv5-row__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--shv5-zone-gap, 16px);
    min-height: var(--shv5-row-h, 48px);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--shv5-row-px, 16px);
    padding-left: var(--shv5-row-px, 16px);
}

.shv5-scope.shv5--width-contained .shv5-row__inner,
.shv5-scope.shv5--width-contained .shv5-searchbar__inner {
    max-width: var(--shv5-content-width, var(--cms-wrap, 1140px));
}

/* Centre zone truly centred between two equal sides. */
.shv5-scope .shv5-row--balanced > .shv5-row__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

/* A menu or search field in the centre takes whatever the sides leave. */
.shv5-scope .shv5-row--fill > .shv5-row__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

/* Nothing in the centre: left zone, right zone pushed to the end. */
.shv5-scope .shv5-row--split > .shv5-row__inner {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
}

.shv5-scope .shv5-zone {
    display: flex;
    align-items: center;
    gap: var(--shv5-item-gap, 8px);
    min-width: 0;
}

.shv5-scope .shv5-zone--left {
    grid-column: 1;
    justify-content: flex-start;
}

.shv5-scope .shv5-zone--center {
    grid-column: 2;
    justify-content: center;
}

.shv5-scope .shv5-zone--right {
    grid-column: 3;
    justify-content: flex-end;
}

.shv5-scope .shv5-row--split .shv5-zone--right {
    grid-column: 2;
    justify-self: end;
}

/*
 * The logo across the top and main bars (logoSpan "top_main"): the view draws .shv5-band only then, on the computers'
 * bar. The main bar's left zone (the logo) is the band's lead, across both bars and centred in their height; the top
 * bar and the main bar stand to its right, one over the other, each as tall as it is set, lined up with the band's
 * content width rather than each with its own. The band is drawn in the header's background: the top bar's own
 * background is not. --shv5-band-gap (set only) moves the bars' parts together: the view's rule.
 */
.shv5-scope .shv5-band {
    /* Mega menu panels position against the whole band, as against a row. */
    position: relative;
}

.shv5-scope .shv5-band__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--shv5-zone-gap, 16px);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--shv5-row-px, 16px);
    padding-left: var(--shv5-row-px, 16px);
}

.shv5-scope.shv5--width-contained .shv5-band__inner {
    max-width: var(--shv5-content-width, var(--cms-wrap, 1140px));
}

.shv5-scope .shv5-band__lead {
    --shv5-row-h: var(--shv5-main-cur, 72px);
    grid-row: 1 / span 2;
    grid-column: 1;
}

.shv5-scope .shv5-band__inner > .shv5-row {
    position: static;
    grid-column: 2;
    min-width: 0;
}

.shv5-scope .shv5-band__inner > .shv5-row--top {
    grid-row: 1;
    background: transparent;
}

.shv5-scope .shv5-band__inner > .shv5-row--main {
    grid-row: 2;
}

.shv5-scope .shv5-band__inner > .shv5-row > .shv5-row__inner {
    max-width: none;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
}

/* Not positioned: the menu's panels must reach past their element to the row. */
.shv5-scope .shv5-el {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    min-width: 0;
}

/* The account menu drops from its own button. */
.shv5-scope .shv5-el--account {
    position: relative;
}

.shv5-scope .shv5-el--logo,
.shv5-scope .shv5-el--menu,
.shv5-scope .shv5-el--text,
.shv5-scope .shv5-el--links,
.shv5-scope .shv5-el--widget {
    flex: 0 1 auto;
}

/* Widens to fill the room up to 640px, or keeps the width set (still giving way in a narrow bar). */
.shv5-scope .shv5-el--search-inline {
    flex: 1 1 var(--shv5-search-w, 320px);
    max-width: var(--shv5-search-w, 640px);
}

/* ------------------------------------------------------------------------------ icon controls */

.shv5-scope .shv5-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: var(--cms-radius-sm, 6px);
    background: transparent;
    color: var(--shv5-icon-color, currentColor);
    font: inherit;
    font-size: var(--shv5-icon-label-size, var(--cms-font-size-sm, 0.875rem));
    font-weight: var(--shv5-icon-label-weight, 600);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.shv5-scope .shv5-action:hover,
.shv5-scope .shv5-action:focus,
.shv5-scope .shv5-action[aria-expanded="true"] {
    background: transparent;
    color: var(--shv5-icon-hover, var(--cms-primary, #005ea8));
    text-decoration: none;
}

/* The menu button's corners, which a boxed menu button (an edge and a size: the view's rules) may round its own way. */
.shv5-scope .shv5-toggle {
    border-radius: var(--shv5-toggle-radius, var(--cms-radius-sm, 6px));
}

/* A menu button that opens a panel under the bar (drawer side "below") shows a cross while it is open. */
.shv5-scope .shv5-toggle--below .shv5-icon--close,
.shv5-scope .shv5-toggle--below[aria-expanded="true"] .shv5-icon--menu {
    display: none;
}

.shv5-scope .shv5-toggle--below[aria-expanded="true"] .shv5-icon--close {
    display: block;
}

/*
 * The cart, the wishlist and the account's icons in a bar, which may be drawn as filled buttons ("CART"
 * on a dark block). Unset, they are the plain icon controls above. In the drawer they are rows.
 */
.shv5-scope .shv5-el--account > .shv5-action,
.shv5-scope .shv5-el--cart > .shv5-action,
.shv5-scope .shv5-el--wishlist > .shv5-action {
    padding: var(--shv5-action-padding, 0 8px);
    border-radius: var(--shv5-action-radius, var(--cms-radius-sm, 6px));
    background: var(--shv5-action-bg, transparent);
}

.shv5-scope .shv5-el--account > .shv5-action:hover,
.shv5-scope .shv5-el--account > .shv5-action:focus,
.shv5-scope .shv5-el--account > .shv5-action[aria-expanded="true"],
.shv5-scope .shv5-el--cart > .shv5-action:hover,
.shv5-scope .shv5-el--cart > .shv5-action:focus,
.shv5-scope .shv5-el--wishlist > .shv5-action:hover,
.shv5-scope .shv5-el--wishlist > .shv5-action:focus {
    background: var(--shv5-action-hover-bg, var(--shv5-action-bg, transparent));
}

.shv5-scope .shv5-el--account > .shv5-action {
    font-size: var(--shv5-account-size, var(--shv5-icon-label-size, var(--cms-font-size-sm, 0.875rem)));
}

/*
 * The create-account link with an icon of its own, after the sign-in link: as far from it as the bar's
 * items are from each other, or - with words between them ("or") - with those words in between.
 */
.shv5-scope .shv5-el--account > .shv5-account--register {
    margin-left: var(--shv5-item-gap, 8px);
}

.shv5-scope .shv5-el--account > .shv5-account-words + .shv5-account--register {
    margin-left: 0;
}

.shv5-scope .shv5-icon {
    display: block;
    flex: 0 0 auto;
    width: var(--shv5-icon-size, 24px);
    height: var(--shv5-icon-size, 24px);
    stroke-width: var(--shv5-icon-stroke, 2);
    /* Clicks land on the control, never on a path inside it. */
    pointer-events: none;
}

.shv5-scope .shv5-action__icon {
    position: relative;
    display: inline-flex;
}

/* Room for the badge's overhang when words follow the icon. */
.shv5-scope .shv5-action__icon:not(:last-child) {
    margin-right: 6px;
}

/* Anchored by its right edge: a wider count grows over the icon, never into the words. */
.shv5-scope .shv5-badge {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--shv5-badge-bg, var(--cms-primary, #005ea8));
    color: var(--shv5-badge-text, var(--cms-primary-contrast, #ffffff));
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.shv5-scope .shv5-action__subtotal {
    font-weight: 700;
}

.shv5-scope .shv5-account .shv5-icon--chevron-down {
    width: 16px;
    height: 16px;
}

/* The account as words: "Sign in or Create an account", the links in the bar's colour, on one line. */
.shv5-scope .shv5-account-words {
    font-size: var(--shv5-account-size, var(--shv5-icon-label-size, var(--cms-font-size-sm, 0.875rem)));
    line-height: 1.2;
    white-space: nowrap;
}

/* As tall as the header's other small links (.shv5-link), so they are as easy to tap. */
.shv5-scope .shv5-account-words__link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: inherit;
    font-weight: var(--shv5-account-link-weight, inherit);
    text-decoration: none;
}

.shv5-scope .shv5-account-words__link:hover,
.shv5-scope .shv5-account-words__link:focus {
    color: inherit;
    text-decoration: underline;
}

.shv5-scope .shv5-account-words__joiner {
    padding: 0 0.4em;
}

@media (pointer: coarse) {
    .shv5-scope .shv5-account-words__link {
        min-height: 44px;
    }
}

/* A cart or wishlist row in the drawer: icon, words, subtotal, and the count at the far end. */
.shv5-scope .shv5-action--row {
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 0;
    font-size: inherit;
}

.shv5-scope .shv5-action--row .shv5-action__icon {
    display: contents;
}

.shv5-scope .shv5-action--row .shv5-badge {
    position: static;
    order: 1;
    margin-left: auto;
}

/* ------------------------------------------------------------------------------ logo and menu */

.shv5-scope .shv5-logo {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}

.shv5-scope .shv5-logo picture {
    display: block;
    max-width: 100%;
}

.shv5-scope .shv5-logo__img {
    display: block;
    width: auto;
    max-width: 100%;
    height: var(--shv5-logo-cur, 44px);
    object-fit: contain;
    transition: height var(--shv5-motion) ease;
}

.shv5-scope .shv5-logo__text {
    overflow: hidden;
    font-size: var(--shv5-logo-text-size, 1.375rem);
    font-weight: var(--shv5-logo-text-weight, 700);
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The picture with the words beside it: in a narrow bar the words are cut short, never the picture. */
.shv5-scope .shv5-logo--with-text {
    gap: var(--shv5-logo-text-gap, 10px);
}

.shv5-scope .shv5-logo--with-text > picture,
.shv5-scope .shv5-logo--with-text > .shv5-logo__img {
    flex: 0 0 auto;
}

/*
 * A row whose logo shows words keeps its other zones as wide as their own controls, so a long name is
 * cut short instead of running under the menu button or the cart on a phone. A column is never
 * narrower than its zone's min-width (the "auto" minimum): the logo's zone asks for none, so the name
 * gives way, and the others ask for their controls' width. The menu and an inline search box shrink
 * as they always have. A row that fits lays out exactly as before; only one that would overlap changes.
 */
.shv5-scope .shv5-row--balanced > .shv5-row__inner:has(.shv5-logo--with-text, .shv5-logo--text) {
    grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);
}

.shv5-scope .shv5-row--split > .shv5-row__inner:has(.shv5-logo--with-text, .shv5-logo--text) {
    grid-template-columns: minmax(auto, auto) minmax(auto, 1fr);
}

.shv5-scope .shv5-row--balanced > .shv5-row__inner:has(.shv5-logo--with-text, .shv5-logo--text) > .shv5-zone:not(:has(.shv5-el--logo, .shv5-el--menu, .shv5-el--search-inline)),
.shv5-scope .shv5-row--split > .shv5-row__inner:has(.shv5-logo--with-text, .shv5-logo--text) > .shv5-zone:not(:has(.shv5-el--logo, .shv5-el--menu, .shv5-el--search-inline)) {
    min-width: min-content;
}

/* A split row's right zone sits at the end of its column; holding the logo it fills the column, so the name is cut there too. */
.shv5-scope .shv5-row--split > .shv5-row__inner:has(.shv5-logo--with-text, .shv5-logo--text) > .shv5-zone--right:has(.shv5-el--logo) {
    justify-self: stretch;
}

/*
 * The same for a row holding the account's create-account link with an icon of its own: on a phone the two
 * account icons and the cart may need more than the half a centred logo leaves them, so the logo moves over
 * instead of lying under the icons. Only such a row; one that fits lays out exactly as before.
 */
.shv5-scope .shv5-row--balanced > .shv5-row__inner:has(.shv5-account--register) {
    grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);
}

.shv5-scope .shv5-row--split > .shv5-row__inner:has(.shv5-account--register) {
    grid-template-columns: minmax(auto, auto) minmax(auto, 1fr);
}

.shv5-scope .shv5-row--balanced > .shv5-row__inner:has(.shv5-account--register) > .shv5-zone:not(:has(.shv5-el--logo, .shv5-el--menu, .shv5-el--search-inline)),
.shv5-scope .shv5-row--split > .shv5-row__inner:has(.shv5-account--register) > .shv5-zone:not(:has(.shv5-el--logo, .shv5-el--menu, .shv5-el--search-inline)) {
    min-width: min-content;
}

.shv5-scope .shv5-menu {
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------------------ small elements */

.shv5-scope .shv5-text {
    margin: 0;
    min-width: 0;
}

/* Bold words and links in a line of words: a link is underlined, in the words' colour unless the element sets its own. */
.shv5-scope .shv5-text--rich a,
.shv5-scope .shv5-text--rich a:hover,
.shv5-scope .shv5-text--rich a:focus {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.shv5-scope .shv5-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 16px;
}

.shv5-scope .shv5-link,
.shv5-scope .shv5-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    color: inherit;
    text-decoration: none;
}

.shv5-scope .shv5-link:hover,
.shv5-scope .shv5-phone:hover {
    color: inherit;
    text-decoration: underline;
}

.shv5-scope .shv5-phone .shv5-icon {
    width: 18px;
    height: 18px;
}

.shv5-scope .shv5-phone__number {
    font-weight: 600;
    white-space: nowrap;
}

.shv5-scope .shv5-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border: 2px solid var(--cms-primary, #005ea8);
    border-radius: var(--cms-radius-sm, 6px);
    background: var(--cms-primary, #005ea8);
    color: var(--cms-primary-contrast, #ffffff);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.shv5-scope .shv5-button:hover,
.shv5-scope .shv5-button:focus {
    border-color: var(--cms-primary-hover, #004d8a);
    background: var(--cms-primary-hover, #004d8a);
    color: var(--cms-primary-contrast, #ffffff);
    text-decoration: none;
}

.shv5-scope .shv5-button--outline,
.shv5-scope .shv5-button--outline:hover,
.shv5-scope .shv5-button--outline:focus {
    background: transparent;
    color: var(--cms-primary, #005ea8);
}

.shv5-scope .shv5-button--text,
.shv5-scope .shv5-button--text:hover,
.shv5-scope .shv5-button--text:focus {
    padding: 0 4px;
    border-color: transparent;
    background: transparent;
    color: var(--cms-primary, #005ea8);
}

.shv5-scope .shv5-button--text:hover {
    text-decoration: underline;
}

.shv5-scope .shv5-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.shv5-scope .shv5-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: inherit;
}

.shv5-scope .shv5-social__link:hover {
    color: var(--shv5-icon-hover, var(--cms-primary, #005ea8));
}

.shv5-scope .shv5-social .shv5-icon {
    width: 20px;
    height: 20px;
}

.shv5-scope .shv5-widget {
    min-width: 0;
}

@media (pointer: coarse) {
    .shv5-scope .shv5-link,
    .shv5-scope .shv5-phone,
    .shv5-scope .shv5-button {
        min-height: 44px;
    }
}

/* ------------------------------------------------------------------------------ search */

.shv5-scope .shv5-search {
    position: relative;
    width: 100%;
    margin: 0;
}

.shv5-scope .shv5-search__field {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    border: var(--shv5-search-border-w, 1px) solid var(--shv5-search-border, var(--cms-line, #dfe5ec));
    border-radius: var(--shv5-search-radius, var(--cms-radius, 8px));
    background: var(--shv5-search-bg, var(--cms-surface, #ffffff));
    color: var(--shv5-search-text, var(--cms-text, #18202c));
}

.shv5-scope .shv5-search__field:hover,
.shv5-scope .shv5-search__field:focus-within {
    background: var(--shv5-search-hover-bg, var(--shv5-search-bg, var(--cms-surface, #ffffff)));
}

.shv5-scope .shv5-search__input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 0 4px 0 14px;
    border: 0;
    border-radius: var(--shv5-search-radius, var(--cms-radius, 8px));
    background: transparent;
    color: inherit;
    font: inherit;
    /* 16px or more, or iPhones zoom the page in when the field is focused. */
    font-size: 16px;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
}

.shv5-scope .shv5-search__input::-webkit-search-decoration,
.shv5-scope .shv5-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.shv5-scope .shv5-search__input:focus-visible {
    outline-offset: -2px !important;
}

.shv5-scope .shv5-search__submit,
.shv5-scope .shv5-searchbar__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--cms-radius-sm, 6px);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* A full 44px to tap, laid over the field's own border so the field stays 44px tall. */
.shv5-scope .shv5-search__submit {
    margin: calc(var(--shv5-search-border-w, 1px) * -1) calc(var(--shv5-search-border-w, 1px) * -1) calc(var(--shv5-search-border-w, 1px) * -1) 0;
}

.shv5-scope .shv5-search__submit .shv5-icon {
    width: 20px;
    height: 20px;
}

.shv5-scope .shv5-suggest {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 5;
    max-height: 60vh;
    padding: 4px 0;
    overflow-y: auto;
    border: 1px solid var(--cms-line, #dfe5ec);
    border-radius: var(--cms-radius, 8px);
    background: var(--cms-surface, #ffffff);
    color: var(--cms-text, #18202c);
}

.shv5-scope .shv5-suggest__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
}

.shv5-scope .shv5-suggest__item:hover,
.shv5-scope .shv5-suggest__item[aria-selected="true"] {
    background: var(--cms-surface-2, #f8f9fa);
}

.shv5-scope .shv5-suggest__kind {
    flex: 0 0 auto;
    color: var(--cms-muted, #5f6b7a);
    font-size: var(--cms-font-size-sm, 0.875rem);
}

/* Expand mode: a full-width bar that drops under the rows, over the page. */
.shv5-scope .shv5-searchbar {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    border-bottom: 1px solid var(--shv5-bar-border, var(--cms-line, #dfe5ec));
    background: var(--shv5-bar-bg, var(--cms-surface, #ffffff));
    color: var(--shv5-bar-text, var(--cms-text, #18202c));
}

.shv5-scope .shv5-searchbar__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    margin-left: auto;
    padding: 12px var(--shv5-row-px, 16px);
}

/* Overlay mode: the whole screen. */
.shv5-scope .shv5-search-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--shv5-z-drawer, 1046);
    overflow-y: auto;
    background: var(--shv5-bar-bg, var(--cms-surface, #ffffff));
    color: var(--shv5-bar-text, var(--cms-text, #18202c));
}

.shv5-scope .shv5-search-overlay__inner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 760px;
    margin: 12vh auto 0;
    padding: 0 16px;
}

/* ------------------------------------------------------------------------------ account menu */

.shv5-scope .shv5-account__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 10;
    min-width: 220px;
    padding: 6px 0;
    border: 1px solid var(--cms-line, #dfe5ec);
    border-radius: var(--cms-radius, 8px);
    background: var(--cms-surface, #ffffff);
    color: var(--cms-text, #18202c);
    font-size: var(--cms-font-size-sm, 0.875rem);
}

.shv5-scope .shv5-zone--left .shv5-account__menu {
    right: auto;
    left: 0;
}

.shv5-scope .shv5-account__hello {
    margin: 0;
    padding: 8px 16px 10px;
    border-bottom: 1px solid var(--cms-line, #dfe5ec);
    font-weight: 700;
}

.shv5-scope .shv5-account__hello-link {
    color: inherit;
    text-decoration: none;
}

.shv5-scope .shv5-account__hello-link:hover {
    color: inherit;
    text-decoration: underline;
}

.shv5-scope .shv5-account__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
    color: inherit;
    text-decoration: none;
}

.shv5-scope .shv5-account__link:hover,
.shv5-scope .shv5-account__link:focus {
    background: var(--cms-surface-2, #f8f9fa);
    color: inherit;
    text-decoration: none;
}

/* ------------------------------------------------------------------------------ pinned, shrunk, floating */

.shv5-scope.shv5--stuck {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--shv5-stuck-bg, var(--shv5-bar-bg, var(--cms-surface, #ffffff)));
    transition: transform var(--shv5-motion) ease;
}

.shv5-scope.shv5--stuck.shv5--hidden {
    transform: translateY(-100%);
}

.shv5-scope.shv5--shrunk .shv5-row--top {
    display: none;
}

.shv5-scope.shv5--shrunk .shv5-row--main {
    --shv5-row-h: calc(var(--shv5-logo-h-shrunk, 32px) + 20px);
}

.shv5-scope.shv5--shrunk .shv5-logo__img {
    height: var(--shv5-logo-h-shrunk, 32px);
}

/* Floating over the page banner: see-through until the visitor scrolls and it pins. */
.shv5-scope.shv5--overlay {
    position: absolute;
    right: 0;
    left: 0;
}

.shv5-scope.shv5--overlay.shv5--stuck {
    position: fixed;
}

.shv5-scope.shv5--overlay:not(.shv5--solid),
.shv5-scope.shv5--overlay:not(.shv5--solid) .shv5-row {
    border-color: transparent;
    background: transparent;
    color: var(--shv5-overlay-text, #ffffff);
}

.shv5-scope.shv5--overlay:not(.shv5--solid) .shv5-action {
    color: inherit;
}

/* ------------------------------------------------------------------------------ drawer */

.shv5-scope .shv5-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--shv5-z-overlay, 1045);
    background: var(--shv5-drawer-overlay, rgba(15, 23, 42, 0.45));
    opacity: 0;
    transition: opacity var(--shv5-motion) ease;
}

.shv5-scope .shv5-overlay.is-open {
    opacity: 1;
}

.shv5-scope .shv5-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--shv5-z-drawer, 1046);
    display: flex;
    flex-direction: column;
    width: min(var(--shv5-drawer-w, 380px), calc(100vw - 48px));
    overflow: hidden;
    background: var(--shv5-drawer-bg, var(--cms-surface, #ffffff));
    color: var(--shv5-drawer-text, var(--cms-text, #18202c));
    font-size: var(--shv5-drawer-font-size, var(--cms-font-size, 1rem));
    line-height: 1.4;
    text-align: left;
    transform: translateX(-100%);
    transition: transform var(--shv5-motion) ease;
}

.shv5-scope .shv5-drawer--right {
    right: 0;
    left: auto;
    transform: translateX(100%);
}

.shv5-scope .shv5-drawer.is-open {
    transform: none;
}

.shv5-scope .shv5-drawer__head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 8px 8px 8px 16px;
    border-bottom: 1px solid var(--shv5-drawer-divider, var(--cms-line, #dfe5ec));
}

/* The phone-sized logo: its own height, else the tablet's, else the desktop's (as the view sets it). */
.shv5-scope .shv5-drawer__brand {
    min-width: 0;
    --shv5-logo-cur: var(--shv5-logo-h-mobile, var(--shv5-logo-h-tablet, var(--shv5-logo-h, 34px)));
}

.shv5-scope .shv5-drawer__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.shv5-scope .shv5-drawer__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--cms-radius-sm, 6px);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.shv5-scope .shv5-drawer__body {
    flex: 1 1 auto;
    padding: 4px 0 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.shv5-scope .shv5-drawer__section {
    padding: 12px 16px;
}

/* A line above every shown section that follows another (an empty widget-slot holder is hidden). */
.shv5-scope .shv5-drawer__section:not([hidden]) ~ .shv5-drawer__section {
    border-top: 1px solid var(--shv5-drawer-divider, var(--cms-line, #dfe5ec));
}

/* The menu runs edge to edge; its rows carry their own padding. */
.shv5-scope .shv5-drawer__section--menu {
    padding: 0;
}

.shv5-scope .shv5-dbutton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid currentColor;
    border-radius: var(--cms-radius-sm, 6px);
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.shv5-scope .shv5-dbutton:hover {
    color: inherit;
    text-decoration: none;
}

/* "Sign in", then the account's create-account link. */
.shv5-scope .shv5-dbutton + .shv5-dbutton {
    margin-top: 8px;
}

.shv5-scope .shv5-daccount__hello {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-weight: 700;
}

.shv5-scope .shv5-daccount .shv5-account__link {
    padding-right: 0;
    padding-left: 0;
}

/*
 * Drawer side "below": a panel inside the header, under the bars, that drops open - its one row grows
 * from nothing to its contents - and pushes the page down while the header is in the page. Its parts
 * line up with the bars' edges; the space above and below them is margin, so nothing shows while closed.
 * The script lets it scroll when it is taller than the window below a header that stays at the top.
 */
.shv5-scope .shv5-drawer--below {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    width: auto;
    border-top: 1px solid var(--shv5-drawer-divider, var(--cms-line, #dfe5ec));
    transform: none;
    transition: grid-template-rows var(--shv5-motion) ease;
}

.shv5-scope .shv5-drawer--below.is-open {
    grid-template-rows: 1fr;
}

.shv5-scope .shv5-drawer--below > .shv5-drawer__body {
    min-height: 0;
    padding: 0 var(--shv5-row-px, 16px);
    overflow: hidden;
}

.shv5-scope .shv5-drawer--below.is-open > .shv5-drawer__body {
    overflow-y: auto;
}

.shv5-scope .shv5-drawer--below .shv5-drawer__section {
    padding-right: 0;
    padding-left: 0;
}

.shv5-scope .shv5-drawer--below .shv5-drawer__section:first-child {
    margin-top: 8px;
}

.shv5-scope .shv5-drawer--below .shv5-drawer__section:last-child {
    margin-bottom: 20px;
}

.shv5-scope .shv5-drawer--below .shv5-dmenu__top {
    padding-right: 4px;
    padding-left: 4px;
}

.shv5-scope .shv5-drawer--below .shv5-drawer__section--button .shv5-button {
    width: 100%;
}

/* ------------------------------------------------------------------------------ drawer menu */

.shv5-scope .shv5-dmenu__item {
    border-bottom: 1px solid var(--shv5-drawer-divider, var(--cms-line, #dfe5ec));
}

.shv5-scope .shv5-dmenu__row {
    display: flex;
    align-items: stretch;
}

.shv5-scope .shv5-dmenu__top {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.shv5-scope .shv5-dmenu__toggle {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--shv5-drawer-divider, var(--cms-line, #dfe5ec));
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.shv5-scope .shv5-dmenu__toggle.shv5-dmenu__toggle--row {
    width: 100%;
    flex: 1 1 auto;
    justify-content: space-between;
    padding: 12px 16px;
    border-left: 0;
}

.shv5-scope .shv5-dmenu__toggle .shv5-icon,
.shv5-scope .shv5-dmenu__drill .shv5-icon {
    width: 20px;
    height: 20px;
    transition: transform var(--shv5-motion) ease;
}

.shv5-scope .shv5-dmenu__toggle[aria-expanded="true"] .shv5-icon {
    transform: rotate(180deg);
}

.shv5-scope .shv5-dmenu__sub {
    padding: 0 0 12px;
}

.shv5-scope .shv5-dmenu__link,
.shv5-scope .shv5-dmenu__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px 8px 28px;
    color: inherit;
    text-decoration: none;
}

.shv5-scope a.shv5-dmenu__link:hover,
.shv5-scope a.shv5-dmenu__heading:hover,
.shv5-scope a.shv5-dmenu__top:hover {
    color: inherit;
    text-decoration: underline;
}

.shv5-scope .shv5-dmenu__heading {
    min-height: 36px;
    padding-top: 14px;
    padding-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* A heading with an address is something to tap. */
.shv5-scope a.shv5-dmenu__heading {
    min-height: 44px;
}

.shv5-scope .shv5-dmenu__group-links .shv5-dmenu__link,
.shv5-scope .shv5-dmenu__children .shv5-dmenu__link {
    padding-left: 40px;
}

.shv5-scope .shv5-dmenu__group-links .shv5-dmenu__children .shv5-dmenu__link {
    padding-left: 52px;
}

.shv5-scope .shv5-dmenu__link--heading {
    font-weight: 700;
}

.shv5-scope .shv5-dmenu__link--cta,
.shv5-scope .shv5-dmenu__link--all {
    color: var(--cms-primary, #005ea8);
    font-weight: 700;
}

.shv5-scope .shv5-dmenu__divider {
    height: 1px;
    margin: 8px 16px 8px 28px;
    background: var(--shv5-drawer-divider, var(--cms-line, #dfe5ec));
}

.shv5-scope .shv5-dmenu__badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--cms-surface-2, #f8f9fa);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.shv5-scope .shv5-dmenu__card-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 6px 16px 6px 28px;
    color: inherit;
    text-decoration: none;
}

.shv5-scope .shv5-dmenu__card-img {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--cms-radius-sm, 6px);
    object-fit: cover;
}

/* A link's own picture (a category's, in a list filled from a category): small, beside its words. */
.shv5-scope .shv5-dmenu__thumb {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--cms-radius-sm, 6px);
    object-fit: cover;
}

/* Drill-down: the root list and every panel share one grid cell, so the drawer grows to the
   taller of the two and the panel slides in over the list. */
.shv5-scope .shv5-dmenu--drilldown {
    display: grid;
    overflow: hidden;
}

.shv5-scope .shv5-dmenu--drilldown > .shv5-dpanel {
    grid-area: 1 / 1;
    min-width: 0;
    background: var(--shv5-drawer-bg, var(--cms-surface, #ffffff));
    transition: transform var(--shv5-motion) ease;
}

.shv5-scope .shv5-dmenu--drilldown > .shv5-dpanel:not(.shv5-dpanel--root) {
    transform: translateX(100%);
}

.shv5-scope .shv5-dmenu--drilldown > .shv5-dpanel.is-active {
    transform: none;
}

/* Covered, the list leaves the tab order and the accessibility tree once the slide is over (the
   delay applies only on the way in: uncovered, it is visible at once). */
.shv5-scope .shv5-dmenu--drilldown > .shv5-dpanel--root.is-covered {
    visibility: hidden;
    transform: translateX(-25%);
    transition: transform var(--shv5-motion) ease, visibility 0s linear var(--shv5-motion);
}

.shv5-scope .shv5-dpanel__head {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    padding: 4px 16px 4px 4px;
    border-bottom: 1px solid var(--shv5-drawer-divider, var(--cms-line, #dfe5ec));
}

.shv5-scope .shv5-dpanel__back {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 10px 0 4px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--cms-font-size-sm, 0.875rem);
    cursor: pointer;
}

.shv5-scope .shv5-dpanel__back .shv5-icon {
    width: 20px;
    height: 20px;
}

.shv5-scope .shv5-dpanel__title {
    min-width: 0;
    margin: 0;
    color: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.shv5-scope .shv5-dpanel .shv5-dmenu__sub {
    padding-top: 4px;
}

.shv5-scope .shv5-dpanel .shv5-dmenu__link,
.shv5-scope .shv5-dpanel .shv5-dmenu__heading,
.shv5-scope .shv5-dpanel .shv5-dmenu__card-link {
    padding-left: 16px;
}

.shv5-scope .shv5-dpanel .shv5-dmenu__group-links .shv5-dmenu__link,
.shv5-scope .shv5-dpanel .shv5-dmenu__children .shv5-dmenu__link {
    padding-left: 28px;
}

/* ------------------------------------------------------------------------------ scroll lock */

html.shv5-scroll-locked,
html.shv5-scroll-locked body {
    overflow: hidden;
}