/*
 * Merola Tile header/footer refinement.
 * Reversible: remove this file's <css> line and the adjacent refinement
 * <script> line from Magento_Theme/layout/default_head_blocks.xml.
 */

/* Navigation feedback and cleaner badge placement. */
.page-header .navigation li.level0 > a.level-top {
    box-shadow: inset 0 -2px transparent;
    transition: box-shadow .18s ease, color .18s ease;
}

.page-header .navigation li.level0:hover > a.level-top,
.page-header .navigation li.level0.active > a.level-top,
.page-header .navigation li.level0.has-active > a.level-top {
    box-shadow: inset 0 -2px #0758a8;
}

/* Porto's white submenu pointer cuts a notch through the active underline. */
.page-header.header-newskin .navigation:not(.side-megamenu) li.level0.parent > a.level-top::before {
    display: none !important;
    content: none !important;
}

.page-header .navigation .cat-label {
    top: -7px;
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
}

@media (max-width: 767px) {
    .page-header .navigation li.level0 > a.level-top > .cat-label {
        position: static;
        display: inline-block;
        width: auto;
        margin: 0 0 0 7px;
        padding: 2px 4px;
        transform: none;
        vertical-align: middle;
    }
}

.page-header .navigation a:focus-visible,
.footer-middle a:focus-visible,
.newsletter-section a:focus-visible {
    outline: 2px solid #d1b27c;
    outline-offset: 3px;
}

@media (min-width: 992px) {
    .page-header .panel.header {
        height: 32px !important;
        min-height: 32px;
        padding-top: 7px !important;
        padding-bottom: 8px !important;
        box-sizing: border-box;
    }

    .page-header .panel.wrapper {
        height: 33px !important;
        min-height: 33px;
    }

    .page-header.type22 .header.content {
        height: 82px;
        min-height: 82px;
    }

    .page-header.type22 .header-bottom {
        align-items: center;
    }

    .page-header.type22 .header-bottom .nav-sections {
        align-self: center;
    }

    .page-header .header-main-right .anniversary-logo--desktop {
        margin-right: 24px !important;
    }

    .page-header .header-main-right .custom-block {
        margin-right: 28px !important;
    }

    .page-header .header-main-right .minicart-wrapper {
        align-self: center;
        margin-top: 0 !important;
        margin-right: 0 !important;
    }

}

/* Keep the blue service strip at its original, unclipped height on every page. */
.porto-block-html-top,
.porto-block-html-top > .background-color-primary,
.porto-block-html-top .row.no-padding {
    height: auto !important;
    min-height: 50px !important;
    overflow: visible !important;
}

.porto-block-html-top .row.no-padding > [class*="col-"] {
    display: flex;
    min-height: 50px !important;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}

/* The utility Sign In link owns the desktop sign-in dropdown. */
.utility-account-popup-host {
    position: relative;
}

.utility-account-popup-host .block-header-customer-login {
    top: calc(100% + 8px);
    right: 0;
    z-index: 1001;
    margin-top: 0;
}

.utility-account-popup-host .block-header-customer-login::before {
    right: 22px;
}

/* Footer cleanup. */
.footer-middle #contact li:first-child {
    display: none;
}

.footer-middle,
.footer-middle a,
.footer-middle p {
    font-style: normal;
}

.footer-middle #part {
    bottom: auto !important;
}

.footer-middle > .container > .row::before,
.footer-middle > .container > .row::after {
    display: none;
    content: none;
}

@media (min-width: 992px) {
    .footer-middle > .container > .row {
        display: grid;
        grid-template-columns: minmax(250px, 1.8fr) minmax(130px, .85fr) minmax(130px, .85fr) minmax(170px, 1.1fr) minmax(190px, 1.15fr);
        gap: clamp(28px, 3vw, 58px);
        align-items: start;
        margin-right: 0;
        margin-left: 0;
    }

    .footer-middle > .container > .row > .col-lg-3 {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .footer-middle > .container > .row > .col-lg-3:nth-child(3) {
        display: grid;
        grid-column: 3 / span 2;
        grid-template-columns: minmax(130px, .85fr) minmax(170px, 1.1fr);
        column-gap: clamp(28px, 3vw, 58px);
    }

    .footer-middle > .container > .row > .col-lg-3:nth-child(2) .row {
        display: block;
        margin: 0;
    }

    .footer-middle > .container > .row > .col-lg-3:nth-child(2) [class*="col-"] {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .footer-middle > .container > .row > .col-lg-3:nth-child(2) [class*="col-"] + [class*="col-"] {
        margin-top: 6px;
    }

    .footer-middle > .container > .row > .col-lg-3:nth-child(3) > .block,
    .footer-middle > .container > .row > .col-lg-3:nth-child(3) > .block > .block-content,
    .footer-middle > .container > .row > .col-lg-3:nth-child(3) > .block > .block-content > .row {
        display: contents;
    }

    .footer-middle > .container > .row > .col-lg-3:nth-child(3) > .block > .block-title {
        grid-column: 1;
        grid-row: 1;
    }

    .footer-middle > .container > .row > .col-lg-3:nth-child(3) > .block > .block-content > .row > [class*="col-"]:first-child {
        grid-column: 1;
        grid-row: 2;
    }

    .footer-middle > .container > .row > .col-lg-3:nth-child(3) #part {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .footer-middle > .container > .row > .col-lg-3:nth-child(3) [class*="col-"] {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .footer-middle > .container > .row > .col-lg-3:last-child .block {
        text-align: left !important;
    }
}

.newsletter-section {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

/* Match the Trade Partners landing canvas to the 1180px account page. */
.categorypath-trade-partners .page-main {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

.categorypath-trade-partners .page-title-wrapper {
    width: min(1180px, calc(100% - 48px));
    margin: 28px auto 18px;
}

.categorypath-trade-partners .category-view {
    max-width: none !important;
    margin: 0;
    padding-bottom: 0;
}

.categorypath-trade-partners .page-main-inner {
    display: none;
}

@media (max-width: 767px) {
    .page-header .navigation li.level0 > a.level-top {
        min-height: 44px;
    }

    .footer-middle {
        padding-top: 44px;
        padding-bottom: 34px;
    }

    .footer-middle > .container > .row {
        display: grid;
        gap: 34px 18px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-right: 0;
        margin-left: 0;
    }

    .footer-middle > .container > .row > .col-lg-3 {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .footer-middle > .container > .row > .col-lg-3:first-child,
    .footer-middle > .container > .row > .col-lg-3:last-child {
        grid-column: 1 / -1;
    }

    .footer-middle > .container > .row > .col-lg-3:nth-child(2) {
        grid-column: 1;
    }

    .footer-middle > .container > .row > .col-lg-3:nth-child(3) {
        grid-column: 2;
    }

    .footer-middle > .container > .row > .col-lg-3:nth-child(2) .row,
    .footer-middle > .container > .row > .col-lg-3:nth-child(3) .row {
        display: block;
        margin: 0;
    }

    .footer-middle > .container > .row > .col-lg-3:nth-child(2) [class*="col-"],
    .footer-middle > .container > .row > .col-lg-3:nth-child(3) [class*="col-"] {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .footer-middle #part {
        margin-top: 26px;
    }

    .footer-middle > .container > .row > .col-lg-3:last-child {
        padding-top: 28px;
        border-top: 1px solid rgba(255, 255, 255, .16);
    }

    .footer-middle > .container > .row > .col-lg-3:last-child .block {
        text-align: left !important;
    }

    .footer-middle > .container > .row > .col-lg-3:last-child ul.links {
        display: grid;
        gap: 6px 18px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-merola .about-actions {
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    .about-merola .about-actions .about-button {
        width: 100%;
        min-height: 48px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .categorypath-trade-partners .page-title-wrapper {
        width: min(100% - 32px, 1180px);
        margin-top: 26px;
        margin-bottom: 14px;
    }
}