@layer base {
    *,::after,::backdrop,::before,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif,'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular,Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}summary{display:list-item}menu,ol,ul{list-style:none}img,object,svg{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}:-moz-ui-invalid{box-shadow:none}button,input:where([type='button'],[type='reset'],[type='submit']),::file-selector-button{appearance:button}[hidden]:where(:not([hidden='until-found'])){display:none !important}
}
@property --spacing {
    syntax: "<length> | <percentage>";
    inherits: true;
    initial-value: 0.25rem;
}
@layer utitlities {
    .container {
        width: 100%;
        max-width: var(--base-container-width);
        margin-inline: auto;
        padding-inline: var(--base-spacing) ;
    }
    .flex-row {
        display: flex;
        flex-direction: row;
        gap: calc(var(--spacing) * 2);
    }
    .flex-col {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 2);
    }
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
}
:root {
    --color-bg-header: #fff;
    --color-bg-header-darker: color-mix(in srgb, var(--color-bg-header) 90%, black) ;
    --color-field-border: #555;
    --spacing: 0.25rem;
    --base-container-width: 80rem;
    --base-spacing: 0.6125rem;
    interpolate-size: allow-keywords;

    @media screen and (width > 48rem) {
        --base-spacing: 1.25rem;
    }
}

body {
    min-height: 100%;
    background-color: var(--color-bg-header-darker);
}

header {
    box-shadow: 0 0 2px -1px rgba(0,0,0,0.25);
    background-color: var(--color-bg-header);
    position: sticky;
    top: -2.25rem;

    &:has([type=search]:focus){
        background-color: var(--color-bg-header-darker);
    }
}

details {
    display: flex;
    flex-direction: column;

    summary {
        display: flex;
        cursor: pointer;
        margin-inline-start: auto;
    }

    &::details-content   {

        @starting-style {
            height: 0;
            display: flex;
        }

        height: 0;
        overflow: clip;
        transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
    }

    &[open]::details-content   {
        height: auto;
    }
}

@counter-style check-list {
    /*system: additive;
    additive-symbols: 1 "\1F019";*/
    symbols: '✓' '✓' '✓' '✓';
    suffix: ' ';
}

.header-top {
    padding-block: calc(var(--spacing) * 2);

    .usps {
        justify-content: space-between;
        list-style: check-list;
        list-style-position: inside;

        li {
            width: fit-content;
            margin-inline: auto;

            @media screen and (width > 24rem) {
                margin-inline: unset;
            }
        }

        li:first-of-type {
            display: none;

            @media screen and (width > 24rem) {
                display: list-item;
            }
        }

        li:nth-of-type(2) {
            display: none;

            @media screen and (width > 36rem) {
                display: list-item;
            }
        }

        li:last-of-type {
            display: none;

            @media screen and (width > 48rem) {
                display: list-item;
            }
        }

        strong {
            font-weight: 500;
        }
    }
}

.header-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 0 calc(var(--spacing) * 4);

    .logo {
        margin-block: auto;
    }

    search {
        margin-inline: auto;
        width: 100%;

        @media screen and (width > 48rem) {
            width: 80%;
        }
    }

    .utilities {
        margin-inline: auto;
    }

    .nav-menu {
        grid-column: 1 / -1;
    }
}

.btn-menu-icon {
    padding: calc(var(--spacing) * 2);
    margin-inline-end: calc(var(--spacing) * 2);

    @media screen and (width > 48rem) {
        display: none;
    }
}

.logo {
    display: flex;
    height: 100%;
    margin-block: auto;
    width: auto;
    justify-self: center;

    svg {
        margin: auto;
    }
}

search {
    padding: calc(var(--spacing) * 2);
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;

    @media screen and (width > 48rem) {
        width: 80%;
        grid-column: 2;
        grid-row: 1;
    }

    .form {
        height: 100%;
    }
    fieldset {
        display: grid;
        grid-template-areas: "searchform";
        height: 100%;
    }
    button {
        grid-area: searchform;
        margin-inline-start: auto;
        border-radius: 0 99rem 99rem 0;
        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    }
    input {
        background-color: var(--color-bg-header);
        border: 1px solid var(--color-field-border);
        border-radius: 99rem;
        grid-area: searchform;
        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
        width: 100%;
    }
}

.utilities {
    position: relative;
    z-index: 1;

    summary {
        border-radius: calc(var(--spacing) * 2);
        gap: 0;
        margin-block: auto;
        transition: rotate 0.25s linear;

        @media screen and (width > 48rem) {
            border: 1px solid var(--color-field-border);
            padding: calc(var(--spacing) * 2);
            gap: calc(var(--spacing) * 4);
        }
    }

    &[open] summary .chevron {
        rotate: 180deg;
    }
}

.utilities .nav-account {
    background-color: var(--color-bg-header);
    border: 1px solid var(--color-field-border);
    border-radius: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2);
    position: absolute;

    inset-inline-end: 0;
    text-align: right;
    top: 100%;
    width: fit-content;

    a {
        display: flex;
        flex-wrap: nowrap;
        width: fit-content;
        white-space: nowrap;
        align-self: end;
    }
}

.nav-menu {
    background-color: var(--color-bg-header);
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform 0.5s;
    z-index: 2;

    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4) calc(var(--spacing) * 2) 0;
    gap: calc(var(--spacing) * 6);

    @media screen and (width > 48rem) {
        background-color: transparent;
        position: relative;
        margin-inline: auto;
        width: 100%;
        height: auto;
        transform: translateX(0);
        z-index: 0;
    }

    .nav-items {
        padding: calc(var(--spacing) * 8);
        flex-direction: column;
        display: flex;

        @media screen and (width > 48rem) {
            padding: calc(var(--spacing) * 2) 0;
            flex-direction: row;
            gap: calc(var(--spacing) * 2);
        }
    }

    .btn-menu-close {
        display: flex;
        position: absolute;
        right: calc(var(--spacing) * 4);
        top: calc(var(--spacing) * 2);

        summary {
            display: flex;
        }

        @media screen and (width > 48rem) {
            display: none;
        }
    }
}

.header-container:has(.btn-menu-icon[open]){
    .nav-menu {
        transform: translateX(0);
    }
}

.main-content {
    min-height: 100dvh;
}