.shop-search-band{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(110deg,#fffdfb 0%,#f8ebe5 52%,#f1d8d3 100%)}
.shop-search-band:before{content:"";position:absolute;z-index:-1;right:-8%;top:-120px;width:520px;height:360px;border:1px solid #711a3828;border-radius:50%;transform:rotate(-18deg);box-shadow:0 0 0 18px #711a3808,0 0 0 38px #711a3805;animation:searchHalo 10s ease-in-out infinite}
.shop-search-band>div:first-child{max-width:760px;margin-left:auto;margin-right:auto}
.shop-search-form{position:relative;display:flex;align-items:center;gap:12px;width:min(125%,1175px);margin:28px auto 0;padding:10px;border:1px solid #dcb5ae;border-radius:22px 7px 22px 7px;background:#fffdfbf2;box-shadow:0 20px 45px #5d1a2714;transition:box-shadow .3s}
.shop-search-form:focus-within{box-shadow:0 22px 48px #5d1a2720,0 0 0 5px #711a3812}
.shop-search-input-wrap{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.shop-search-icon{display:grid;place-items:center;width:44px;height:44px;color:#711a38}
.shop-search-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .3s}
.shop-search-form:focus-within .shop-search-icon svg{transform:rotate(-12deg) scale(1.12)}
.shop-search-input-wrap input{width:100%;min-width:0;padding:12px 44px 12px 2px;border:0;outline:0;background:transparent;color:#321522;font:500 1rem var(--sans)}
.shop-search-input-wrap input::placeholder{color:#9a7d80}
.shop-search-clear-icon{position:absolute;right:8px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:#f2ded8;color:#711a38;font-size:1.15rem;line-height:1;cursor:pointer;transition:transform .2s,background .2s}
.shop-search-clear-icon:hover{transform:rotate(90deg);background:#ead0ca}
.shop-search-submit{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:0;border-radius:15px 5px 15px 5px;background:#711a38;color:#fff;font:700 .76rem var(--sans);cursor:pointer;box-shadow:0 8px 18px #711a3833;transition:background .2s,box-shadow .2s}
.shop-search-submit:hover:not(:disabled){background:#501129;box-shadow:0 10px 22px #711a3840}
.shop-search-submit:disabled{cursor:not-allowed;opacity:.7}
.shop-search-submit-icon{display:grid;place-items:center;width:23px;height:23px;border:1px solid #f5c9be88;border-radius:50%;font-size:.95rem}
.shop-search-clear{border:0;border-bottom:1px solid #711a38;background:transparent;color:#711a38;font:700 .7rem var(--sans);cursor:pointer}
.shop-search-message{max-width:940px;margin:13px auto 0;color:#711a38;font-size:.78rem;animation:searchMessageIn .35s ease both}
@keyframes searchHalo{0%,100%{transform:translate(0,0) rotate(-18deg)}50%{transform:translate(-20px,18px) rotate(-12deg)}}@keyframes searchMessageIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.shop-search-form{display:grid;grid-template-columns:1fr;gap:9px;width:100%;margin-top:22px;padding:9px;border-radius:18px 6px 18px 6px}.shop-search-submit{justify-content:center;width:100%}.shop-search-clear{justify-self:center;padding:3px 0}.shop-search-input-wrap input{font-size:.92rem}}
@media(max-width:700px){
    .shop-search-input-wrap{
        width:100%;
        min-height:62px;
        padding:4px 10px 4px 4px;
        border:2px solid #8a3b55;
        border-radius:14px;
        background:#fffdfb;
        box-shadow:0 8px 20px #48112218;
    }
    .shop-search-input-wrap .shop-search-icon{
        flex:0 0 44px;
        color:#711a38;
    }
    .shop-search-form .shop-search-input-wrap input{
        min-height:48px;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
    }
    .shop-search-input-wrap:focus-within{
        border-color:#711a38;
        box-shadow:0 0 0 4px #711a3826,0 8px 20px #48112218;
    }
}
@media(prefers-reduced-motion:reduce){.shop-search-band:before{animation:none}}

/* Keep the wider search field inside the catalog card. */
@media(min-width:801px){
    .shop-search-form{
        display:grid;
        grid-template-columns:minmax(0,1.25fr) auto;
        width:125%;
        max-width:none;
        margin-left:-25%;
        box-sizing:border-box;
    }
    .shop-search-input-wrap{width:auto;min-width:0}
    .shop-search-submit{min-width:max-content}
    .shop-search-clear{grid-column:1 / -1;justify-self:start}
}
