/* Shop header (includes/header.php, getMenuHTML()): logo, search, account, cart and the row of main categories.
   Only CSS: the markup, ids and classes stay, because public.shop.js, public.common.js and search_suggest.js use them.
   From 901px: one row with the logo, a search field that is always open, the account and the cart.
   Up to 900px (phones, also inside the Facebook and Instagram apps): the same fixed header and search bar as before
   (62px + 58px, the pages are laid out under them), with new icons and a 16px search field (no zoom on iOS). */

/* ---------- page width ---------- */
/* shop.css (Bootstrap) makes .container 1290px wide from a 1200px window. Between 1200 and ~1305px that is wider
   than the space next to the scrollbar: the page was 25px off to the right, not centred, with a horizontal
   scrollbar over the bottom. Never wider than the window. */
@media (min-width: 1200px) {
    .container {
        max-width: 100%;
    }
}

/* ---------- icons (SVG, sharp on every screen) ---------- */
.header-head .customer-icon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232d2329' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

.header-head .shop-icon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232d2329' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12.1a1 1 0 0 1-1 .9H7.2a1 1 0 0 1-1-.9L5 8z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
}

.header-head .menu-icon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232d2329' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
}

.header-head #gosearch {
    background: #a64273 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

.header-head #gosearch:hover {
    background-color: #8e3762;
}

/* number of products in the cart */
.header-head .fly-product-count {
    top: -6px;
    right: -9px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    box-sizing: border-box;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    color: #fff;
    background: #a64273;
    border: 2px solid #fff;
    border-radius: 10px;
}

/* the search field */
.header-head .search-drop .search {
    display: flex;
    align-items: center;
    position: relative;
    background: #faf6f8;
    border: 1px solid #e6d9df;
    box-sizing: border-box;
}

.header-head .search-drop .search:focus-within {
    background: #fff;
    border-color: #a64273;
    box-shadow: 0 0 0 3px rgba(166, 66, 115, .15);
}

.header-head .searchinput {
    order: 1;
    flex: 1;
    min-width: 0;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    color: #2d2329;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
}

.header-head .searchinput::placeholder {
    color: #8a7f86;
    opacity: 1;
}

.header-head #gosearch {
    order: 2;
    flex: none;
    float: none;
}

.header-head .sCloseButton {
    display: none;
}

/* ---------- computers and tablets in landscape (from 901px) ---------- */
@media only screen and (min-width: 901px) {
    .full-header-links .header-head {
        display: flex;
        align-items: center;
        gap: 32px;
        padding: 16px 24px;
        border-bottom: 1px solid #f1e4ea;
    }

    .full-header-links .header-head::before,
    .full-header-links .header-head::after {
        display: none;
    }

    .header-head .header-promotion {
        display: none;
    }

    /* logo */
    .header-head .desktop-logo {
        flex: none;
        float: none;
        width: auto;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .header-head .desktop-logo a {
        display: block;
    }

    .header-head .desktop-logo img {
        display: block;
        width: auto;
        height: auto;
        max-width: 200px;
        max-height: 64px;
    }

    /* search, account and cart in one row */
    .header-head > .customer-menu {
        flex: 1;
        min-width: 0;
        float: none;
        width: auto;
        padding: 0;
    }

    .header-head .user-menu {
        display: flex;
        align-items: center;
        gap: 6px;
        float: none;
        width: 100%;
    }

    .header-head .user-menu::before,
    .header-head .user-menu::after,
    .header-head .user-menu > .menu-drop,
    .header-head .user-menu > .mobile-logo,
    .header-head .search-icon {
        display: none;
    }

    .header-head .user-menu > div {
        float: none;
        border: 0;
    }

    .header-head .user-menu > .search-drop {
        order: 1;
        flex: 1;
        max-width: 660px;
        margin-right: auto;
    }

    .header-head .user-menu > .customer-drop {
        order: 2;
        margin-left: 18px;
    }

    .header-head .user-menu > .shop-drop {
        order: 3;
    }

    /* the form is always open here (public.shop.js hides it on a click outside, so !important) */
    .header-head .search-drop form {
        display: block !important;
        position: static;
        width: 100%;
        padding: 0;
        background: none;
    }

    .header-head .search-drop .search {
        height: 46px;
        padding: 0 4px 0 20px;
        border-radius: 23px;
    }

    .header-head .searchinput {
        height: 44px;
        font-size: 15px;
    }

    .header-head #gosearch {
        width: 38px;
        height: 38px;
        border-radius: 50%;
    }

    /* account */
    .header-head .customer-drop {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        border-radius: 10px;
        cursor: pointer;
    }

    .header-head .customer-drop:hover {
        background: #faf3f6;
    }

    .header-head .customer-menu i.customer-icon {
        order: 0;
        flex: none;
        float: none;
        width: 24px;
        height: 24px;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .header-head .welcome-message {
        display: block;
        order: 1;
        float: none;
        margin: 0;
        border: 0;
        font-family: 'Open Sans', Arial, sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        color: #2d2329;
        text-transform: lowercase;
        white-space: nowrap;
        cursor: pointer;
    }

    .header-head .welcome-message::first-letter {
        text-transform: uppercase;
    }

    .header-head .customer-drop table {
        top: 100%;
        left: auto;
        right: 0;
        width: 230px;
        margin-top: 4px;
        padding: 8px;
        background: #fff;
        border: 1px solid #ecdfe5;
        border-radius: 12px;
        box-shadow: 0 16px 32px -16px rgba(90, 30, 60, .35);
    }

    .header-head .customer-drop td {
        width: auto;
    }

    .header-head .customer-drop td a {
        padding: 10px 12px;
        font-size: 14px;
        text-transform: lowercase;
        color: #2d2329;
        background: none;
        border-radius: 8px;
    }

    .header-head .customer-drop td a::first-letter {
        text-transform: uppercase;
    }

    .header-head .customer-drop td a:hover {
        color: #a64273;
        background: #faf3f6;
    }

    /* cart */
    .header-head .shop-drop .mini-shop-link {
        display: block;
        padding: 9px 12px;
        border-radius: 10px;
    }

    .header-head .shop-drop .mini-shop-link:hover {
        background: #faf3f6;
    }

    .header-head .customer-menu i.shop-icon {
        display: block;
        float: none;
        width: 26px;
        height: 26px;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .header-head .fly-product-list {
        top: 100%;
        margin-top: 4px;
        border-radius: 12px;
        box-shadow: 0 16px 32px -16px rgba(90, 30, 60, .35);
    }

    /* main categories: a quieter row, the open or hovered one is underlined */
    .navigation-menu > ul {
        padding: 2px 16px;
        border-bottom: 1px solid #f1e4ea;
    }

    .navigation-menu > ul > li > a,
    .navigation-menu > ul > li.main-category:hover > a,
    .navigation-menu > ul > li > a:hover,
    .navigation-menu > ul > li.main-category.mega-open > a {
        position: relative;
        margin: 0;
        padding: 14px 9px 13px;
        font-family: 'Lato', sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .02em;
        color: #2d2329;
        background: transparent;
        border: 0;
    }

    .navigation-menu > ul > li > a::after {
        content: "";
        position: absolute;
        left: 9px;
        right: 9px;
        bottom: 4px;
        height: 2px;
        background: #a64273;
        border-radius: 1px;
        transform: scaleX(0);
        transition: transform .18s ease;
    }

    .navigation-menu > ul > li.main-category:hover > a,
    .navigation-menu > ul > li > a:hover,
    .navigation-menu > ul > li > a:focus-visible,
    .navigation-menu > ul > li.main-category.mega-open > a,
    .navigation-menu > ul > li > a strong {
        color: #a64273;
    }

    .navigation-menu > ul > li.main-category:hover > a::after,
    .navigation-menu > ul > li > a:focus-visible::after,
    .navigation-menu > ul > li.main-category.mega-open > a::after {
        transform: scaleX(1);
    }

    .navigation-menu > ul > li > a strong {
        font-weight: 700;
    }
}

/* tablets in landscape and small laptops: only the icon of the account (its menu opens on hover as before) */
@media only screen and (min-width: 901px) and (max-width: 1199px) {
    .header-head .welcome-message {
        display: none;
    }

    .header-head .user-menu > .customer-drop {
        margin-left: 6px;
    }
}

/* ---------- phones (up to 900px) ---------- */
@media only screen and (max-width: 900px) {
    .full-header-links {
        border-bottom: 0;
        box-shadow: 0 1px 0 #f1e4ea, 0 8px 18px -14px rgba(45, 35, 41, .45);
    }

    .header-head .customer-menu i {
        border: 0;
    }

    /* the logo in the middle */
    .header-head .user-menu > div.mobile-logo {
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
    }

    .header-head .mobile-logo img {
        display: block;
        width: auto !important;
        height: auto;
        max-width: 140px;
        max-height: 44px;
    }

    /* search bar under the header (same place and height as before: 58px) */
    .header-head .search-drop form {
        padding: 9px 12px;
        background: #fff;
        border-bottom: 1px solid #f1e4ea;
        box-sizing: border-box;
    }

    .header-head .search-drop .search {
        height: 40px;
        padding-left: 16px;
        overflow: hidden;
        border-radius: 20px;
    }

    .header-head .searchinput {
        height: 38px;
        font-size: 16px; /* 16px keeps iOS from zooming in on focus */
    }

    .header-head #gosearch {
        width: 52px;
        height: 38px;
        border-radius: 0 19px 19px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navigation-menu > ul > li > a::after {
        transition: none;
    }
}