/* Overlay */
.mts-panel{
    position:fixed;
    inset:0;
    z-index:999999;
    background:rgba(0,0,0,.28);
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    box-sizing:border-box;
}

.mts-panel.is-open{display:flex}
body.mts-search-open{overflow:hidden!important}

/* Centered modal */
.mts-panel__inner{
    position:relative;
    width:min(860px,94vw);
    max-height:84vh;
    background:#fff;
    overflow-y:auto;
    overflow-x:hidden;
    box-shadow:0 18px 55px rgba(0,0,0,.22);
    border-radius:6px;
    padding:34px 34px 42px;
    box-sizing:border-box;
}

.mts-close{
    position:absolute;
    top:14px;
    right:18px;
    width:40px;
    height:40px;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#111!important;
    font-size:38px;
    font-weight:300;
    line-height:38px;
    text-align:center;
    cursor:pointer;
    z-index:3;
}

/* Search box — force one clean rectangular border despite Motta form styles */
.mts-panel .mts-searchbox{
    position:relative;
    margin:18px auto 30px!important;
    max-width:640px;
    width:100%;
    height:58px;
    display:flex!important;
    align-items:center!important;
    background:#fff!important;
    border:1px solid #111!important;
    border-radius:0!important;
    box-shadow:none!important;
    outline:0!important;
    overflow:hidden;
    box-sizing:border-box!important;
}

.mts-panel .mts-searchbox:focus-within{
    border:2px solid #111!important;
    box-shadow:none!important;
    outline:0!important;
}

.mts-panel .mts-searchbox svg{
    width:25px;
    height:25px;
    margin:0 0 0 18px;
    flex:0 0 25px;
    color:#111;
}

.mts-panel .mts-searchbox input#mts-search-input{
    -webkit-appearance:none!important;
    appearance:none!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:54px!important;
    margin:0!important;
    padding:0 18px!important;
    border:0!important;
    border-width:0!important;
    border-radius:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:#fff!important;
    color:#111!important;
    font-size:17px!important;
    line-height:54px!important;
}

.mts-panel .mts-searchbox input#mts-search-input:focus,
.mts-panel .mts-searchbox input#mts-search-input:hover{
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
}

.mts-panel .mts-searchbox input[type="search"]::-webkit-search-decoration,
.mts-panel .mts-searchbox input[type="search"]::-webkit-search-cancel-button,
.mts-panel .mts-searchbox input[type="search"]::-webkit-search-results-button,
.mts-panel .mts-searchbox input[type="search"]::-webkit-search-results-decoration{
    -webkit-appearance:none;
}

.mts-heading{
    text-align:center;
    font-size:28px;
    font-weight:700;
    margin:6px 0 24px;
}

.mts-tabs{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:28px;
}

.mts-tab{
    border:1px solid #111!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#fff!important;
    color:#111!important;
    padding:9px 20px!important;
    font-size:15px!important;
    line-height:1.3!important;
    cursor:pointer;
}

.mts-tab.is-active{
    background:#111!important;
    color:#fff!important;
}

.mts-grid{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px 14px;
    transition:opacity .15s ease;
}

/* AJAX search no longer replaces the grid with a Loading screen. */
.mts-grid.is-loading{
    opacity:.55;
    cursor:progress;
}

.mts-card{
    text-decoration:none!important;
    color:#111!important;
    display:block;
}

.mts-card__image{
    aspect-ratio:3/4;
    background:#f6f6f6;
    overflow:hidden;
}

.mts-card__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.mts-card__title{font-size:15px;line-height:1.35;margin:9px 0 4px}
.mts-card__price{font-size:15px}
.mts-message{grid-column:1/-1;padding:26px;text-align:center;color:#666}

/* Keep only the Motta search icon in the header. */
.mts-header-trigger-active .header-search__container{display:none!important}
.mts-header-trigger-active .header-search__form{background:transparent!important;border:0!important;box-shadow:none!important;width:auto!important}
.mts-header-trigger-active .header-search__button{display:flex!important;visibility:visible!important;opacity:1!important}

@media(max-width:1024px){
    .mts-panel__inner{width:min(760px,94vw)}
    .mts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:767px){
    .mts-panel{padding:12px}
    .mts-panel__inner{width:100%;max-height:90vh;padding:24px 14px 30px;border-radius:4px}
    .mts-close{top:8px;right:10px}
    .mts-panel .mts-searchbox{margin-top:28px!important;height:52px}
    .mts-panel .mts-searchbox input#mts-search-input{height:48px!important;line-height:48px!important;font-size:16px!important}
    .mts-heading{font-size:23px}
    .mts-tabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}
    .mts-tab{white-space:nowrap}
    .mts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
    .mts-card__title,.mts-card__price{font-size:14px}
}