.smels-wrap{display:flex;width:100%}
.smels-root{position:relative;display:inline-flex;align-items:center;justify-content:center;font-family:Arial,Helvetica,sans-serif;z-index:9998}
.smels-trigger{display:inline-flex;align-items:center;justify-content:center;width:36px;height:44px;padding:0;border:0;background:transparent;color:#292524;cursor:pointer;transition:color .2s ease,background-color .2s ease,border-color .2s ease}
.smels-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.smels-icon i{font-size:18px;line-height:1}
.smels-icon svg{display:block;width:18px;height:18px;fill:currentColor}
.smels-panel{position:absolute;top:calc(100% + 8px);right:-8px;width:430px;max-width:calc(100vw - 24px);background:#fff;border:1px solid #eee6e2;box-shadow:0 14px 38px rgba(54,38,32,.13);opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s ease;color:#2b2624;box-sizing:border-box}
.smels-panel:before{content:"";position:absolute;top:-9px;right:16px;width:16px;height:16px;background:#fff;border-left:1px solid #eee6e2;border-top:1px solid #eee6e2;transform:rotate(45deg)}
.smels-root.is-open .smels-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.smels-panel-inner{position:relative;z-index:1;padding:18px}
.smels-heading{font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.2;font-weight:400;margin:0 0 13px;color:#2b2624}
.smels-form{position:relative;margin:0}
.smels-input{display:block;width:100%;height:48px;padding:0 42px 0 14px;border:1px solid #e7dfdb;border-radius:0;background:#fff;color:#2b2624;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1;outline:none;box-sizing:border-box}
.smels-input:focus{border-color:#d6a39b;box-shadow:0 0 0 1px rgba(214,163,155,.15)}
.smels-spinner{position:absolute;top:50%;right:14px;width:14px;height:14px;margin-top:-7px;border:2px solid #eee4e0;border-top-color:#d79791;border-radius:50%;opacity:0;visibility:hidden}
.smels-root.is-loading .smels-spinner{opacity:1;visibility:visible;animation:smels-spin .7s linear infinite}
@keyframes smels-spin{to{transform:rotate(360deg)}}
.smels-status{font-size:11px;color:#928883;padding:11px 2px 4px;min-height:0}
.smels-results{margin:7px -18px 0}
.smels-product{display:grid;grid-template-columns:62px minmax(0,1fr);gap:13px;align-items:center;padding:11px 18px;color:inherit;text-decoration:none!important;border-top:1px solid #f3eeeb;transition:background-color .15s ease;outline:none}
.smels-product:hover,.smels-product:focus{background:#fbf7f5}
.smels-product-image{display:block;width:62px;height:62px;background:#faf7f5;overflow:hidden}
.smels-product-image img{display:block;width:100%;height:100%;object-fit:cover}
.smels-product-body{min-width:0}
.smels-product-name{display:block;color:#2b2624;font-size:12px;line-height:1.35;font-weight:500;margin:0 0 6px}
.smels-product-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.smels-product-price{display:inline-flex;gap:4px;color:#d79791;font-size:11px;line-height:1.3}
.smels-product-price del{opacity:.55}
.smels-product-price ins{text-decoration:none}
.smels-stock{font-size:9px;line-height:1.2}
.smels-stock.in-stock{color:#6d8a63}
.smels-stock.out-of-stock{color:#a36b65}
.smels-view-all{display:flex;align-items:center;justify-content:center;margin:10px -18px -18px;padding:13px 18px;background:#fff5f2;color:#2b2624;text-decoration:none!important;text-transform:uppercase;letter-spacing:.5px;font-size:10px;font-weight:600;border-top:1px solid #f0e7e3}
.smels-view-all:hover{opacity:.9}
.smels-no-results{padding:16px 3px 7px;color:#8f8580;font-size:12px;line-height:1.45}
@media(max-width:767px){
    .smels-panel{right:-14px;width:360px;max-width:calc(100vw - 20px)}
    .smels-panel-inner{padding:15px}
    .smels-results{margin-left:-15px;margin-right:-15px}
    .smels-product{padding-left:15px;padding-right:15px}
    .smels-view-all{margin-left:-15px;margin-right:-15px;margin-bottom:-15px}
}


/* ==========================================================
   v1.0.1 — Mobile viewport-safe search panel
   ========================================================== */

@media(max-width:767px){

    .smels-root{
        position:relative!important;
        z-index:999998!important;
    }

    /*
     * On mobile the panel is fixed to the viewport instead of being
     * sized from the tiny header icon column. JS sets --smels-mobile-top
     * to just below the real search trigger.
     */
    .smels-panel{
        position:fixed!important;
        left:12px!important;
        right:12px!important;
        top:var(--smels-mobile-top, 110px)!important;
        width:auto!important;
        max-width:none!important;
        min-width:0!important;
        max-height:calc(100vh - var(--smels-mobile-top, 110px) - 12px)!important;
        max-height:calc(100dvh - var(--smels-mobile-top, 110px) - 12px)!important;
        margin:0!important;
        box-sizing:border-box!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain;
        transform:translateY(8px)!important;
        z-index:999999!important;
    }

    .smels-root.is-open .smels-panel{
        transform:translateY(0)!important;
    }

    /* Arrow is unreliable when panel is viewport-fixed; hide it on mobile. */
    .smels-panel:before{
        display:none!important;
    }

    .smels-panel-inner{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        padding:16px!important;
        box-sizing:border-box!important;
    }

    .smels-heading{
        width:100%!important;
        max-width:100%!important;
        margin:0 0 12px!important;
        padding:0!important;
        overflow-wrap:anywhere;
    }

    .smels-form{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0!important;
        box-sizing:border-box!important;
    }

    .smels-input{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        height:50px!important;
        min-height:50px!important;
        margin:0!important;
        padding-left:14px!important;
        padding-right:42px!important;
        box-sizing:border-box!important;
    }

    .smels-results{
        width:auto!important;
        max-width:none!important;
        margin:7px -16px 0!important;
        overflow:hidden;
    }

    .smels-product{
        grid-template-columns:56px minmax(0,1fr)!important;
        gap:12px!important;
        padding:11px 16px!important;
        min-width:0!important;
    }

    .smels-product-image{
        width:56px!important;
        height:56px!important;
    }

    .smels-product-body,
    .smels-product-name,
    .smels-product-meta{
        min-width:0!important;
        max-width:100%!important;
    }

    .smels-product-name{
        overflow-wrap:anywhere;
    }

    .smels-view-all{
        margin-left:-16px!important;
        margin-right:-16px!important;
        margin-bottom:-16px!important;
    }

    .smels-status,
    .smels-no-results{
        max-width:100%!important;
        overflow-wrap:anywhere;
    }
}

@media(max-width:480px){
    .smels-panel{
        left:10px!important;
        right:10px!important;
        max-height:calc(100vh - var(--smels-mobile-top, 110px) - 10px)!important;
        max-height:calc(100dvh - var(--smels-mobile-top, 110px) - 10px)!important;
    }

    .smels-panel-inner{
        padding:14px!important;
    }

    .smels-results{
        margin-left:-14px!important;
        margin-right:-14px!important;
    }

    .smels-product{
        padding-left:14px!important;
        padding-right:14px!important;
    }

    .smels-view-all{
        margin-left:-14px!important;
        margin-right:-14px!important;
        margin-bottom:-14px!important;
    }
}