html {
    scrollbar-gutter: stable;
    /* Where anchor targets and focused form fields stop: below the fixed top bar (about 40px), with space above them. */
    scroll-padding-top: calc(6rem + 40px);
}

.site-header {
    --shop-brand: #990000;
    --shop-brand-hover: #730000;
    --shop-text: #333;
    --shop-border: #eaeaea;
    --shop-content-width: 1140px;
    position: relative;
    z-index: 100;
    background: #fff;
    color: var(--shop-text);
    font: 400 16px/1.4 "Helvetica Neue", Helvetica, Verdana, sans-serif;
}

.site-header,
.site-header *,
.site-header *::before,
.site-header *::after {
    box-sizing: border-box;
}

.site-header a {
    color: var(--shop-brand);
    text-decoration: none;
}

.site-header a:hover {
    color: var(--shop-brand-hover);
    text-decoration: underline;
}

.site-header :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.site-header button,
.site-header input {
    font: inherit;
}

.site-header svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.site-header .shop-container {
    width: calc(100% - 40px);
    max-width: var(--shop-content-width);
    margin-inline: auto;
}

.shop-topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    min-height: 36px;
    background: var(--shop-brand);
    color: #fff;
    font-size: 16px;
}

.shop-topbar-inner,
.shop-utilities,
.shop-brand-row,
.shop-website-links,
.shop-category-heading,
.shop-cart-link {
    display: flex;
    align-items: center;
}

.shop-topbar-inner {
    justify-content: space-between;
    gap: 20px;
    padding-block: 5px;
}

.site-header .shop-topbar a,
.site-header .shop-topbar a:hover {
    color: #fff;
}

.shop-phone,
.shop-utilities > a {
    white-space: nowrap;
}

.shop-utilities {
    gap: 18px;
}

.shop-cart-link {
    gap: 6px;
}

.shop-cart-link > span:not(.basket-item-count) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.shop-cart-link .basket-item-count {
    font-size: 13px;
}

.shop-category.active > .shop-category-heading > a {
    box-shadow: inset 0 -2px var(--shop-brand);
}

.shop-language-unavailable {
    opacity: .65;
}

.shop-search {
    position: relative;
    width: 240px;
    color: var(--shop-text);
}

/* .site-header: the shop's input reset (shop.css, .shop-site input:not(.btn)) has the same specificity and loads later. */
.site-header .shop-search input[type="search"] {
    display: block;
    width: 100%;
    min-height: 28px;
    padding: 3px 32px 3px 10px;
    border: 1px solid #ccc;
    border-radius: 0;
    background: #fff;
    font-size: 14px;
}

.shop-search button {
    position: absolute;
    inset: 0 0 0 auto;
    width: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #666;
}

.shop-brand-row {
    position: relative;
    z-index: 30;
    justify-content: space-between;
    gap: 30px;
    min-height: 118px;
    padding-top: 40px;
}

.shop-logo {
    flex-shrink: 0;
}

.shop-logo img {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
}

.shop-website-links {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px 23px;
}

.shop-website-links [aria-current="page"] {
    color: var(--shop-text);
}

.shop-menu-toggle,
.shop-submenu-button {
    display: none;
}

.shop-navigation {
    position: relative;
    z-index: 20;
    border-bottom: 1px solid var(--shop-border);
    background: #fff;
}

.shop-category-list,
.shop-submenu ul {
    list-style: none;
    padding: 0;
}

.shop-category-list {
    /* Space between the entries' texts. */
    --shop-category-spacing: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-block: 0;
}

.shop-category-heading {
    min-height: 48px;
    gap: 3px;
    color: var(--shop-brand);
}

.shop-category-heading > a,
.shop-category-heading > span {
    padding-block: 10px;
}

@media (min-width: 768px) {
    /* As in the old shop: an entry with a mega menu gets the menu's background while pointed at or open.
       The entries touch, so the first one's background starts flush with the menu and the top bar. */
    .shop-category-list > .shop-category > .shop-category-heading {
        padding-inline: calc(var(--shop-category-spacing) / 2);
    }

    .shop-category-list > .shop-category:has(> .shop-submenu):hover > .shop-category-heading,
    .shop-category-list .shop-category-heading:has(> [aria-expanded="true"]) {
        background: #f0f0f0;
    }
}

.shop-brand-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0 23px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-brand-menu .shop-category-heading { min-height: 36px; }
.shop-brand-menu .shop-category-heading > a { padding-block: 0; }

.shop-brand-menu > .shop-category {
    position: relative;
}

.shop-brand-menu .shop-submenu {
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
}

.shop-submenu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    max-width: calc(100vw - 40px);
    padding: 15px;
    border: 1px solid #ccc;
    background: #f0f0f0;
    box-shadow: 0 5px 5px rgb(0 0 0 / 19%);
}

.shop-submenu-mega {
    left: 50%;
    right: auto;
    /* 100% of the navigation, not 100vw, so the scrollbar is not counted and the menu spans exactly the top bar's content. */
    width: min(var(--shop-content-width), calc(100% - 40px));
    transform: translateX(-50%);
    padding: 25px;
    max-height: calc(100dvh - 170px);
    overflow-y: auto;
}

.shop-submenu[hidden] {
    display: none;
}

.shop-submenu > ul {
    margin: 0;
}

.shop-submenu-mega > ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 30px;
}

.shop-submenu a {
    display: block;
    padding-block: 4px;
}

.shop-submenu .shop-menu-label {
    display: block;
    padding-block: 4px;
    font-weight: 600;
}

.shop-submenu ul ul {
    margin: 8px 0 0;
    font-size: 15px;
}

.shop-mega-products-heading {
    margin: 24px 0 12px;
    font-weight: 600;
}

.shop-submenu .shop-mega-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
}

.shop-mega-product {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 14px;
}

.shop-submenu .shop-mega-product-link {
    padding: 0;
}

.shop-mega-product-image {
    display: block;
    width: 100%;
    /* About the size of the old shop's menu products. */
    max-width: 120px;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    background: #fff;
}

.shop-mega-product-title {
    display: block;
    margin-block: 8px;
    font-weight: 600;
}

.shop-mega-product-price {
    margin-top: auto;
}

.shop-mega-product-price strong,
.shop-mega-product-price small {
    display: block;
}

.shop-mega-product-price strong {
    font-size: 16px;
}

.site-header .shop-mega-product-button {
    align-self: flex-start;
    margin-top: 8px;
    padding: 6px 12px;
    background: var(--shop-brand);
    color: #fff;
}

.site-header .shop-mega-product-button:hover {
    background: var(--shop-brand-hover);
    color: #fff;
    text-decoration: none;
}

/* Search suggestions: pages and shop services, services with their image. Wider than the search box and
   aligned to its right edge; below 1100px the search box spans the menu and the suggestions follow it. */
.site-header #suggestions {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    display: none;
    width: max(100%, 420px);
    max-height: min(70vh, 560px);
    overflow-y: auto;
    border: 1px solid #ccc;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    color: var(--shop-text);
    font-size: 14px;
    text-align: left;
}

.site-header #suggestions.visible {
    display: block;
}

.site-header .search-previews {
    margin: 0;
    padding: 4px 0;
    list-style: none;
}

.site-header #suggestions .search-preview {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 8px 12px;
    color: var(--shop-text);
    text-decoration: none;
}

.site-header #suggestions .search-preview:hover,
.site-header #suggestions .search-preview:focus {
    background: #eef3f5;
    outline: none;
}

.site-header .search-preview-image {
    display: flex;
    flex: 0 0 56px;
    align-items: center;
    justify-content: center;
    height: 56px;
    background: #eef3f5;
}

.site-header .search-preview-image img {
    width: 56px;
    height: 56px;
    object-fit: cover;
}

.site-header .search-preview-image svg {
    fill: none;
    stroke: var(--shop-brand);
    stroke-width: 1.5;
}

.site-header .search-preview-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.site-header .search-preview-title {
    color: var(--shop-brand);
    font-weight: 600;
    line-height: 1.3;
}

.site-header .search-preview-teaser {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.site-header #suggestions .search-previews-all {
    display: block;
    padding: 10px 12px;
    border-top: 1px solid #ddd;
    color: var(--shop-brand);
    font-weight: 600;
}

.site-header #suggestions #kesearch_results {
    padding: 10px 12px;
}

.site-header .custom-loader {
    position: absolute;
    top: 3px;
    right: 5px;
    width: 22px;
    height: 22px;
    border: 4px solid #e2edf0;
    border-right-color: var(--shop-brand);
    border-radius: 50%;
    background: #fff;
    animation: header-search-spin .5s linear infinite;
}

@keyframes header-search-spin {
    to { transform: rotate(1turn); }
}

@media (max-width: 1099px) {
    .shop-brand-menu {
        gap: 0 16px;
    }

    .shop-brand-row {
        padding-top: 44px;
        padding-bottom: 6px;
    }

    .shop-website-links {
        gap: 10px 16px;
        font-size: 16px;
    }

    .shop-search {
        width: 180px;
    }

    .shop-category-list {
        --shop-category-spacing: 14px;
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    /* Nothing is fixed here; only the space above anchor targets stays. */
    html {
        scroll-padding-top: 40px;
    }

    /* One row with the logo, the menu button and the basket. The top bar and the brand row give up their boxes,
       so their parts can be ordered below that row, where they form the menu. */
    .site-header {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        column-gap: 12px;
        padding: 8px 15px;
    }

    .shop-topbar,
    .shop-topbar-inner,
    .shop-utilities,
    .shop-brand-row {
        display: contents;
    }

    .shop-topbar {
        color: var(--shop-text);
        font-size: 14px;
    }

    .site-header .shop-topbar a {
        color: var(--shop-brand);
    }

    .site-header .shop-topbar a:hover {
        color: var(--shop-brand-hover);
    }

    .shop-logo {
        order: 1;
        margin-right: auto;
    }

    .shop-logo img {
        width: 140px;
    }

    .shop-menu-toggle {
        order: 2;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--shop-brand);
    }

    .shop-cart-link {
        order: 3;
        min-height: 44px;
    }

    /* Ends the top row, so the menu never moves up next to the basket on wider phones. */
    .site-header::after {
        content: "";
        order: 4;
        flex-basis: 100%;
    }

    /* The menu: the phone number with the other top bar links on the right, the search, the shop categories
       and the website pages. Links that do not fit next to the phone number wrap and stay on the right. */
    .shop-phone {
        order: 5;
        margin-right: auto;
    }

    .shop-utilities > :not(.shop-cart-link, .shop-search) {
        order: 6;
    }

    .shop-phone,
    .shop-utilities > :not(.shop-cart-link, .shop-search) {
        padding-block: 10px;
    }

    .shop-search {
        order: 7;
        flex-basis: 100%;
        width: auto;
        margin-bottom: 12px;
    }

    .site-header #suggestions {
        width: 100%;
    }

    .site-header .shop-search input[type="search"] {
        min-height: 36px;
        font-size: 16px;
    }

    .shop-navigation {
        order: 8;
        flex-basis: 100%;
        border-bottom: 0;
    }

    .shop-website-links {
        order: 9;
        flex-basis: 100%;
        border-bottom: 1px solid var(--shop-border);
    }

    .site-header[data-collapsible]:not([data-open]) :is(.shop-phone, .shop-utilities > :not(.shop-cart-link), .shop-website-links, .shop-navigation) {
        display: none;
    }

    .site-header .shop-container {
        width: auto;
    }

    .shop-category-list,
    .shop-brand-menu {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        font-size: 16px;
    }

    .shop-category-heading,
    .shop-brand-menu .shop-category-heading {
        justify-content: space-between;
        min-height: 48px;
        border-top: 1px solid var(--shop-border);
    }

    .shop-category-heading > a {
        display: flex;
        flex: 1;
        align-items: center;
        min-height: 44px;
    }

    .shop-submenu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--shop-brand);
    }

    .shop-submenu-button[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    .shop-submenu {
        position: static;
        width: 100%;
        max-width: none;
        padding: 15px;
        border: 0;
        transform: none;
        box-shadow: none;
    }

    .shop-brand-menu .shop-submenu {
        max-height: none;
    }

    .shop-submenu-mega > ul {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .shop-submenu-mega {
        max-height: none;
        overflow: visible;
    }

    .shop-submenu .shop-mega-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
    }
}