/*
 * Shared Začti se interface refinements.
 * Raspberry and turquoise remain small accents from the logo. Neutral greys
 * carry the shared header and footer surfaces.
 */
:root {
    --zactise-ink: #2f3031;
    --zactise-muted: #665f59;
    --zactise-page: #fbf8f4;
    --zactise-soft: #f5f2ef;
    --zactise-line: #e4ddd8;
    --zactise-translucent-white: rgba(255, 255, 255, 0.75);
    --zactise-menu-glass: var(--zactise-translucent-white);
    --zactise-raspberry: #d61c60;
    --zactise-raspberry-dark: #b9134d;
    --zactise-turquoise: #16899a;
}

/* A quiet paper-coloured canvas keeps the shop warmer without tinting cards. */
body,
#wrapper {
    background-color: var(--zactise-page);
}

/* The shop header belongs to the same warm surface as the utility row. */
#header {
    background-color: var(--zactise-page);
}

/* Shared neutral surface for the utility row and footer. */
#header .header-nav {
    background-color: var(--zactise-soft);
    border-bottom: 1px solid var(--zactise-line);
    color: var(--zactise-muted);
}

/* Moderno assigns white directly to the primary menu list. */
#header .header-top #_desktop_top_menu > ul#top-menu {
    background-color: var(--zactise-page);
}

/* The top-banner module otherwise leaves a white strip on the home page. */
#wp_man {
    background-color: var(--zactise-page);
}

/* One warm glass surface for panels that float above the page. */
#header .currency-selector .dropdown-menu,
#header .blockcart .cart-summary,
ul.ui-autocomplete,
.modal-content {
    background-color: var(--zactise-menu-glass);
    background-image: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(228, 221, 216, 0.78);
    box-shadow: 0 12px 28px rgba(68, 55, 46, 0.14);
}

/* Search covers belong directly on the glass result surface. */
ul.ui-autocomplete img.search-img {
    background-color: transparent !important;
    mix-blend-mode: multiply;
}

/* Let the glass of the mini-cart stay visible through its inner wrappers. */
#header .blockcart .cart-summary .cart-overview,
#header .blockcart .cart-summary .card-block {
    background-color: transparent;
}

#footer,
.footer-before-container,
.footer-container,
.footer-copyright {
    background-color: var(--zactise-soft);
}

.footer-before-container {
    border-top: 1px solid var(--zactise-line);
}

#header .header-nav #contact-link,
#header .header-nav .currency-selector,
#header .header-nav .currency-selector button,
#header .header-nav .user-info,
#header .header-nav .user-info a {
    color: var(--zactise-muted);
}

#header .header-nav #contact-link,
#header .header-nav .currency-selector,
#header .header-nav .user-info {
    font-size: 0.875rem;
    font-weight: 500;
}

#header .header-nav .user-info a:hover,
#header .header-nav .currency-selector button:hover,
#header .header-nav #contact-link a:hover {
    color: var(--zactise-raspberry);
}

/* Search is a visible, welcoming control even before it receives focus. */
#header #search_widget form input[type="text"] {
    background-color: var(--zactise-translucent-white);
    border: 1px solid #cec7c2;
    border-radius: 2px;
    color: var(--zactise-ink);
    font-size: 0.9375rem;
    font-weight: 500;
    padding-right: 2.75rem;
}

/* Form controls sit lightly on the warm page rather than in stark white boxes. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select,
textarea {
    background-color: var(--zactise-translucent-white);
}

#header #search_widget form input[type="text"]::placeholder {
    color: #756e68;
    opacity: 1;
}

#header #search_widget form input[type="text"]:focus {
    border-color: var(--zactise-raspberry);
    box-shadow: 0 0 0 3px rgba(214, 28, 96, 0.14);
    color: var(--zactise-ink);
}

#header #search_widget form button[type="submit"] {
    color: var(--zactise-raspberry);
    display: block !important;
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

#header #search_widget form button[type="submit"] .search,
#header #search_widget form button[type="submit"] i.pt-font.fa-search {
    display: block !important;
}

#header #search_widget form button[type="submit"]:hover,
#header #search_widget form button[type="submit"]:focus {
    color: var(--zactise-raspberry-dark);
}

/* Desktop navigation gets clearer rhythm while still fitting one row. */
@media (min-width: 1200px) {
    #header .header-top .menu {
        margin-left: 0;
        margin-right: 0;
    }

    #header .header-top .menu > ul#top-menu {
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
        justify-content: space-between;
        overflow: visible;
    }

    #header .header-top .menu > ul#top-menu > li {
        float: none;
        flex: 0 0 auto;
    }

    #header #_desktop_top_menu .top-menu > li > a[data-depth="0"] {
        display: block;
        color: var(--zactise-ink);
        font-size: 0.9375rem;
        font-weight: 600;
        letter-spacing: 0.005em;
        line-height: 1.25;
        padding: 0.8125rem 0.375rem;
        white-space: nowrap;
    }

    #header #_desktop_top_menu .top-menu > li > a[data-depth="0"]:hover,
    #header #_desktop_top_menu .top-menu > li > a[data-depth="0"]:focus,
    #header #_desktop_top_menu .top-menu > li.current > a[data-depth="0"] {
        color: var(--zactise-raspberry);
    }

    /* Override Moderno's blue hover, so hover and the current section agree. */
    #header .header-top .menu > ul#top-menu > li:hover > a[data-depth="0"],
    #header .header-top .menu > ul#top-menu > li.current > a[data-depth="0"] {
        background: transparent;
        color: var(--zactise-raspberry);
    }

    /* One inline arrow follows the label; the parent theme's overlay is removed. */
    #header #_desktop_top_menu a[data-depth="0"].submenu {
        margin-right: 0;
        padding-right: 0.375rem;
    }

    #header #_desktop_top_menu a[data-depth="0"].submenu::before {
        content: none;
        display: none;
    }

    #header #_desktop_top_menu a[data-depth="0"].submenu::after {
        color: var(--zactise-turquoise);
        content: "\e313";
        display: inline-block;
        font-family: "Material Icons";
        font-size: 1rem;
        line-height: 1;
        margin-left: 0.3rem;
        vertical-align: -0.12em;
    }

    #header #_desktop_top_menu a[data-depth="0"].submenu > .float-xs-right {
        display: none !important;
    }

    /* Translucent, softly blurred layer for dropdown navigation. */
    #header #_desktop_top_menu .top-menu .sub-menu {
        background-color: var(--zactise-menu-glass);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(228, 221, 216, 0.78);
        box-shadow: 0 12px 28px rgba(68, 55, 46, 0.14);
    }
}

/* A crossed-out price must support the sale price, not compete with it. */
#main .product-miniature .regular-price,
#product .product-discount .regular-price {
    color: #85898a;
    font-weight: 500 !important;
    text-decoration-color: #a7abad;
    text-decoration-thickness: 1px;
}

#main .product-miniature .product-price-and-shipping .price,
#product .current-price .current-price-value,
#product .has-discount .current-price-value {
    color: var(--zactise-raspberry);
}

#main .product-miniature.prod-box-grid .discount-amount.discount-product,
#main .product-miniature.prod-box-grid .discount-percentage,
#main .product-miniature.prod-box-grid .on-sale {
    background-color: var(--zactise-raspberry) !important;
    border-radius: 2px;
    font-weight: 600;
}

/* The product card receives the same soft surface only when it is explored. */
#main .product-miniature.prod-box-grid .thumbnail-container {
    transition: background-color 160ms ease;
}

#main .product-miniature.prod-box-grid:hover .thumbnail-container,
#main .product-miniature.prod-box-grid:focus-within .thumbnail-container {
    background-color: var(--zactise-soft);
}