/* Mobile product search/filter drawer - v17
   Robust breakpoint version. The desktop filter form is forcibly hidden on
   phone/small-tablet widths and the compact drawer launcher is shown instead. */

.mobile-product-filter-launcher {
    display: none;
    margin-top: 10px;
}

.mobile-product-filter-button {
    width: 100%;
    min-height: 58px;
    border: 1px solid rgba(184, 134, 11, .32);
    border-radius: 15px;
    background: linear-gradient(135deg, #fffdf7 0%, #fff8df 100%);
    color: #2f2615;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    text-align: left;
    box-shadow: 0 8px 20px rgba(88, 63, 8, .08);
}

.mobile-product-filter-button:active { transform: translateY(1px); }

.mobile-product-filter-button-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #d3a719, #a77700);
    color: #fff;
    box-shadow: 0 6px 14px rgba(167,119,0,.22);
}
.mobile-product-filter-button-icon svg { width: 21px; height: 21px; }
.mobile-product-filter-button-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mobile-product-filter-button-copy strong { font-size: 14px; line-height: 1.2; font-weight: 800; }
.mobile-product-filter-button-copy small { color: #7b6a43; font-size: 11px; line-height: 1.2; }
.mobile-product-filter-count {
    flex: 0 0 auto; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; background: #2f2615; color: #fff;
    font-size: 11px; font-weight: 800;
}
.mobile-product-filter-chevron { flex: 0 0 auto; color: #a77700; font-size: 27px; line-height: 1; margin-left: 2px; }

.mobile-product-filter-drawer {
    width: min(92vw, 420px) !important;
    max-width: 420px;
    border-right: 0;
    background: #fffdf8;
    box-shadow: 18px 0 44px rgba(24,20,12,.20);
}
.mobile-product-filter-header {
    border-bottom: 1px solid #eadfbe;
    background: linear-gradient(135deg, #fffaf0 0%, #f8e7ad 100%);
    padding: 18px 18px 15px;
}
.mobile-product-filter-header .offcanvas-title { color: #2b2415; font-size: 20px; font-weight: 800; margin: 0; }
.mobile-product-filter-kicker { margin-bottom: 3px; color: #9b6d00; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .14em; }
.mobile-product-filter-body { padding: 16px 16px max(18px, env(safe-area-inset-bottom)); overflow-y: auto; }
.mobile-product-filter-form { display: flex; flex-direction: column; gap: 12px; }
.mobile-filter-field { margin: 0; }
.mobile-filter-field .form-label { margin-bottom: 5px; color: #4c3c1c; font-size: 11px; font-weight: 800; }
.mobile-filter-field .form-control,
.mobile-filter-field .form-select {
    min-height: 43px; border: 1px solid #ded4bb; border-radius: 11px; background-color: #fff;
    color: #2d2a24; box-shadow: none; font-size: 13px;
}
.mobile-filter-field .form-control:focus,
.mobile-filter-field .form-select:focus { border-color: #bd8e12; box-shadow: 0 0 0 3px rgba(189,142,18,.12); }
.mobile-filter-search-input { position: relative; }
.mobile-filter-search-input svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: #9b7a21; pointer-events: none; }
.mobile-filter-search-input .form-control { padding-left: 40px; }
.mobile-product-filter-actions {
    position: sticky; bottom: -1px; display: grid; grid-template-columns: 92px 1fr; gap: 9px;
    margin: 4px -2px 0; padding: 12px 2px 2px;
    background: linear-gradient(to top,#fffdf8 78%,rgba(255,253,248,0)); z-index: 2;
}
.mobile-filter-reset,
.mobile-filter-apply { min-height: 44px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.mobile-filter-reset { border: 1px solid #cfc4aa; background: #fff; color: #5c4a24; }
.mobile-filter-reset:hover,.mobile-filter-reset:focus { color:#5c4a24; background:#fbf6e9; }
.mobile-filter-apply { border: 1px solid #9c7000; background: linear-gradient(135deg,#d5aa27,#a87500); color:#fff; box-shadow:0 7px 16px rgba(160,115,0,.20); }
.mobile-filter-apply:hover,.mobile-filter-apply:focus { color:#fff; }
.mobile-filter-apply-offer { background: linear-gradient(135deg,#c58e00,#9c6500); }

/* IMPORTANT: 992px is intentionally used here instead of Bootstrap md (768px).
   This makes narrow browser windows, phones and small tablets use the drawer. */
@media (max-width: 991.98px) {
    body .desktop-product-filter-form,
    body form.shop-filter-card.desktop-product-filter-form,
    body form.offer-filter-card.desktop-product-filter-form {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body .mobile-product-filter-launcher,
    body .mobile-filter-only {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
    }

    .card.card-shadow:has(.mobile-product-filter-launcher) .card-body { padding: 12px; }
}

@media (min-width: 992px) {
    body .desktop-product-filter-form {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
    }

    body .mobile-product-filter-launcher,
    body .mobile-filter-only,
    body .mobile-product-filter-drawer {
        display: none !important;
    }
}