/* ---------------------------------------------------------------------------
   Drawer de filtros do catalogo (mobile) — identidade do site.
   O drawer tinha marcacao completa mas quase nenhum estilo proprio: acordeao,
   titulo, busca e lista caiam no visual cru do browser, e o que existia usava
   o azul da folha antiga. Aqui ele passa a falar a lingua do resto da loja:
   ameixa, areia, serifada nos titulos e botoes com o mesmo formato.
   Carrega DEPOIS de catalog-header-mobile.css — e quem manda no visual.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

  .filter-drawer {
    background: var(--mt-white, #fff) !important;
    box-shadow: 0 0 40px -8px rgba(43, 42, 40, 0.35) !important;
    border-right: 1px solid var(--mt-line-soft, #ECE3E6) !important;
  }
  .filter-drawer-backdrop { background: rgba(43, 42, 40, 0.45) !important; }

  /* ── Cabecalho ───────────────────────────────────────────────────────── */
  .filter-drawer .mobile-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    background: linear-gradient(100deg, var(--mt-sand, #ECE7E3) 0%, #F3EBF1 46%, var(--mt-lilac, #D9C7D4) 100%);
    border-bottom: 1px solid var(--mt-line-soft, #ECE3E6);
  }
  .filter-drawer .mobile-drawer-title {
    margin: 0;
    font-family: var(--mt-serif, Georgia, serif);
    font-size: 1.25rem; font-weight: 500; line-height: 1.1;
    color: var(--mt-ink, #2B2A28);
  }
  .filter-drawer .mobile-drawer-close {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    color: var(--mt-ink, #2B2A28); font-size: 0.9rem;
    cursor: pointer; transition: background .2s ease, color .2s ease;
  }
  .filter-drawer .mobile-drawer-close:hover { background: var(--mt-plum, #7B4361); color: #fff; }

  /* ── Acordeao ────────────────────────────────────────────────────────── */
  .filter-drawer .mobile-drawer-accordion { border-bottom: 1px solid var(--mt-line-soft, #ECE3E6); }
  .filter-drawer .mobile-drawer-accordion-trigger {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.95rem 1.15rem;
    background: transparent; border: 0; cursor: pointer;
    font-family: inherit; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--mt-plum, #7B4361);
    text-align: left;
  }
  .filter-drawer .mobile-drawer-accordion-trigger:active { background: rgba(123, 67, 97, 0.05); }
  .filter-drawer .mobile-drawer-chevron {
    font-size: 0.7rem; color: var(--mt-plum, #7B4361);
    transition: transform .25s ease; flex-shrink: 0;
  }
  .filter-drawer .mobile-drawer-accordion.is-open .mobile-drawer-chevron { transform: rotate(180deg); }
  /* Painel fechado nao pode so "sumir": some do fluxo, senao sobra o vao. */
  .filter-drawer .mobile-drawer-accordion-panel { display: none; padding-bottom: 0.65rem; }
  .filter-drawer .mobile-drawer-accordion.is-open .mobile-drawer-accordion-panel { display: block; }

  /* ── Busca dentro do acordeao ────────────────────────────────────────── */
  .filter-drawer .filter-drawer-search { padding: 0 1.15rem 0.6rem; }
  .filter-drawer .filter-drawer-search input {
    width: 100%; box-sizing: border-box;
    padding: 0.62rem 0.85rem;
    border: 1px solid var(--mt-line-soft, #ECE3E6); border-radius: 8px;
    background: var(--mt-sand-soft, #FAF7F5);
    font-size: 0.85rem; color: var(--mt-ink, #2B2A28);
    transition: border-color .2s ease, background .2s ease;
  }
  .filter-drawer .filter-drawer-search input::placeholder { color: var(--mt-muted, #9C9591); }
  .filter-drawer .filter-drawer-search input:focus {
    outline: none; background: #fff;
    border-color: var(--mt-plum, #7B4361);
  }

  /* ── Lista de opcoes ─────────────────────────────────────────────────── */
  .filter-drawer .filter-drawer-list {
    max-height: 290px; overflow-y: auto;
    padding: 0 0.65rem;
  }
  .filter-drawer .filter-drawer-list label {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.6rem 0.5rem;
    border-radius: 8px;
    font-size: 0.87rem; color: var(--mt-ink, #2B2A28);
    cursor: pointer;
    transition: background .15s ease;
  }
  .filter-drawer .filter-drawer-list label:hover,
  .filter-drawer .filter-drawer-list label:active { background: var(--mt-sand, #ECE7E3); }
  .filter-drawer .filter-drawer-list label input[type="checkbox"] {
    width: 18px; height: 18px; flex-shrink: 0;
    accent-color: var(--mt-plum, #7B4361);
    cursor: pointer;
  }

  /* ── Faixa de preco ──────────────────────────────────────────────────── */
  .filter-drawer .filter-drawer-price-row {
    display: flex; gap: 0.75rem; padding: 0 1.15rem 0.35rem;
  }
  .filter-drawer .filter-drawer-price-field { flex: 1 1 0; min-width: 0; }
  .filter-drawer .filter-drawer-price-field label {
    display: block; margin-bottom: 0.3rem;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--mt-muted, #9C9591);
  }
  .filter-drawer .filter-drawer-price-field input {
    width: 100%; box-sizing: border-box;
    padding: 0.62rem 0.75rem;
    border: 1px solid var(--mt-line-soft, #ECE3E6); border-radius: 8px;
    background: var(--mt-sand-soft, #FAF7F5);
    font-size: 0.9rem; color: var(--mt-ink, #2B2A28);
  }
  .filter-drawer .filter-drawer-price-field input:focus {
    outline: none; background: #fff; border-color: var(--mt-plum, #7B4361);
  }

  /* ── Acoes ───────────────────────────────────────────────────────────── */
  .filter-drawer .filter-drawer-actions {
    display: flex; flex-direction: column; gap: 0.55rem;
    padding: 0.9rem 1.15rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--mt-line-soft, #ECE3E6);
    background: #fff;
  }
  .filter-drawer .filter-drawer-btn {
    width: 100%; min-height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px; cursor: pointer;
    font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .filter-drawer .filter-drawer-btn--apply {
    background: var(--mt-plum, #7B4361) !important;
    border: 1px solid var(--mt-plum, #7B4361) !important;
    color: #fff !important;
  }
  .filter-drawer .filter-drawer-btn--apply:active { background: #6A3550 !important; }
  .filter-drawer .filter-drawer-btn--clear {
    background: transparent !important;
    border: 1px solid var(--mt-plum, #7B4361) !important;
    color: var(--mt-plum, #7B4361) !important;
  }
  .filter-drawer .filter-drawer-btn--clear:active { background: var(--mt-sand, #ECE7E3) !important; }
}