/* UX Pack (mobile-first) — não altera o tema base, só adiciona interações */
:root{
  --ms-primary: var(--primary, #0b3a7a);
  --ms-border: var(--border, rgba(17,24,39,.12));
  --ms-shadow: var(--shadow, 0 10px 30px rgba(17,24,39,.08));
}

/* Barra de progresso (carregando) */
.ms-progress{
  position:fixed;
  top:0;left:0;
  height:3px;
  width:0%;
  background:var(--ms-primary);
  z-index:9999;
  opacity:0;
  transition:width .25s ease, opacity .25s ease;
}
.ms-progress.active{opacity:1}

/* Toast */
.ms-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(20px);
  background:#111827;
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.25);
  font-weight:700;
  font-size:13px;
  opacity:0;
  z-index:10050;
  max-width:min(92vw, 520px);
  transition:opacity .22s ease, transform .22s ease;
}
.ms-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Sugestões da busca (dropdown) */
.searchbar{position:relative;}
.ms-suggest{
  position:absolute;
  top:calc(100% + 10px);
  left:0; right:0;
  margin:0 auto;
  width:min(92vw, 520px);
  background:#fff;
  border:1px solid var(--ms-border);
  border-radius:16px;
  box-shadow:var(--ms-shadow);
  overflow:hidden;
  display:none;
  z-index:1000;
}
.ms-suggest.open{display:block}
.ms-suggest .ms-suggest-hd{
  padding:10px 12px;
  font-size:12px;
  color:var(--muted, #6b7280);
  border-bottom:1px solid var(--ms-border);
}
.ms-suggest button{
  all:unset;
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:10px;
  align-items:center;
  width:100%;
  padding:10px 12px;
  cursor:pointer;
}
.ms-suggest button:hover,
.ms-suggest button:focus{
  background:rgba(11,58,122,.06);
  outline:none;
}
.ms-suggest img{
  width:42px;height:42px;
  border-radius:12px;
  object-fit:contain;
  background:#f2f2f2;
  border:1px solid var(--ms-border);
}
.ms-suggest .name{font-weight:800;font-size:13px;line-height:1.2}
.ms-suggest .price{font-weight:900;color:var(--ms-primary);font-size:12px}

/* Skeleton cards */
.ms-skeleton-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
@media (min-width:720px){.ms-skeleton-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ms-skeleton{
  background:#fff;
  border:1px solid var(--ms-border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--ms-shadow);
}
.ms-skeleton .ph{
  display:block;
  background:linear-gradient(90deg,#f1f5f9 0%,#e5e7eb 40%,#f1f5f9 80%);
  background-size:200% 100%;
  animation:ms-shimmer 1.1s infinite linear;
}
.ms-skeleton .ph.img{height:160px}
.ms-skeleton .ph.line{height:12px;margin:10px;border-radius:999px}
.ms-skeleton .ph.line.short{width:58%}
@keyframes ms-shimmer{to{background-position:-200% 0}}

/* Quick view button (overlay) */
.card.ms-enhanced{position:relative}
.ms-qv-btn{
  z-index:5;
  position:absolute;
  top:10px; right:10px;
  width:38px;height:38px;
  border-radius:999px;
  border:1px solid var(--ms-border);
  background:rgba(255,255,255,.95);
  display:grid;place-items:center;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  cursor:pointer;
}
.ms-qv-btn:focus{outline:2px solid rgba(11,58,122,.25); outline-offset:3px}

/* Modal */
.ms-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10020;
}
.ms-modal-backdrop.open{display:flex}
.ms-modal{
  width:min(92vw, 560px);
  max-height:86vh;
  overflow:auto;
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 60px rgba(0,0,0,.25);
}
@media (max-width:560px){
  .ms-modal{
    width:100vw;
    height:100vh;
    max-height:none;
    border-radius:0;
  }
}
.ms-modal .hd{
  position:sticky; top:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ms-border);
  padding:12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.ms-modal .hd strong{font-size:14px}
.ms-modal .close{
  width:40px;height:40px;border-radius:12px;
  border:1px solid var(--ms-border);
  background:#fff;
  cursor:pointer;
  display:grid;place-items:center;
}
.ms-modal .body{padding:14px}
.ms-modal .pv{
  display:grid;
  gap:12px;
}
@media (min-width:720px){.ms-modal .pv{grid-template-columns:minmax(220px, 260px) 1fr;align-items:start}}
.ms-modal .pv img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:16px;
  background:#f2f2f2;
  border:1px solid var(--ms-border);
}
.ms-modal .meta h3{margin:0 0 6px;font-size:18px}
.ms-modal .meta p{margin:8px 0 0;color:var(--muted,#6b7280);line-height:1.5}
.ms-modal .actions{
  margin-top:12px;
  display:flex;gap:10px;flex-wrap:wrap;
}
.ms-modal .qty{
  width:92px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--ms-border);
}
.ms-modal .btn{
  border-radius:12px;
}

/* Ajustes do Quick View (preencher melhor o espaço e CTA "Comprar") */
.ms-modal .pv .meta{
  max-width:none !important;
  width:100%;
  min-width:0;
}
.ms-modal .pv .media{width:100%}
.ms-modal .buyrow{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
}
.ms-modal .buyrow .qty{
  width:88px;
  flex:0 0 88px;
}
.ms-modal .btn-buy{
  flex:1;
  padding:10px 14px;
  border-radius:12px;
  border:0;
  background:#22c55e;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.ms-modal .btn-buy:hover{filter:brightness(.98)}
.ms-modal .btn-buy:active{transform:translateY(1px)}
.ms-modal .btn-buy.disabled,
.ms-modal .btn-buy:disabled{
  background:#9ca3af;
  cursor:not-allowed;
  transform:none;
}
.ms-modal .desc{
  margin-top:10px;
  color:var(--text,#111827);
  line-height:1.55;
  font-size:14px;
}

/* Botão flutuante: voltar ao início (página de produto) */
.ms-home-fab{
  position:fixed;
  left:16px;
  bottom:16px;
  width:52px;
  height:52px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--ms-border);
  box-shadow:0 14px 36px rgba(0,0,0,.22);
  display:grid;
  place-items:center;
  z-index:10040;
  text-decoration:none;
  font-size:22px;
}
.ms-home-fab:active{transform:translateY(1px)}
@media (max-width:560px){
  .ms-home-fab{bottom:86px;} /* sobe pra não brigar com o WhatsApp */
}


/* Drawer (mini-cart) — removido (substituído pela versão bottom-sheet) */

/* Animação no carrinho (badge / ícone) */
@keyframes ms-bounce {0%,100%{transform:scale(1)} 50%{transform:scale(1.18)}}
.ms-bounce{animation:ms-bounce .28s ease}

/* Respeita redução de movimento */
@media (prefers-reduced-motion: reduce){
  .ms-skeleton .ph{animation:none}
  .ms-drawer{transition:none}
  .ms-toast{transition:none}
  .ms-progress{transition:none}
}



/* ===== Cards: imagem + ações (Comprar) ===== */
.card{position:relative}
.card img{
  object-fit:contain !important;
  background:#fff;
  padding:10px;
  height:200px;
}
@media (max-width: 520px){
  .card img{height:170px}
}

.card-actions{
  padding:10px 12px 12px;
}
.ms-buy-btn{
  width:100%;
  border:0;
  border-radius:12px;
  padding:12px 14px;
  font-weight:900;
  cursor:pointer;
  background:#25D366;
  color:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}
.ms-buy-btn:active{transform:translateY(1px)}
.ms-buy-btn.is-out{
  background:#9CA3AF;
  cursor:not-allowed;
  box-shadow:none;
}



/* =============================
   Ajustes de UX (mobile-first)
   - Filtro ativo com anel animado (sem quadrado cortado)
   - Cards menores e com mais respiro do footer
   - Botões (Comprar/Remover/Continuar comprando) mais bonitos
   ============================= */

/* Stories / filtros */
.category-strip, .stories{overflow:visible}
.story{
  position:relative;
  overflow:visible;
  border:none;
  background:transparent;
  padding:10px 12px;
  border-radius:18px;
}
.story .story-img{
  position:relative;
  width:72px;
  height:72px;
  border-radius:999px;
  padding:3px;
  margin:0 auto;
}
.story .story-img::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:999px;
  background: conic-gradient(from 0deg,
    #ff2d55, #ff9500, #ffd60a, #34c759, #0a84ff, #bf5af2, #ff2d55);
  opacity:0;
  z-index:-1;
}
.story.active .story-img::before{
  opacity:1;
  animation: ms-spin 2.2s linear infinite;
}
@keyframes ms-spin{ to{ transform:rotate(360deg); } }
.story.active{ transform: translateY(-1px); }
.story .story-name{ display:block; margin-top:6px; font-weight:600; }
.story.active .story-name{ font-weight:800; }

/* Subcategorias (pílulas) */
#subcats{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
#subcats button{
  border:1px solid var(--ms-border);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
}
#subcats button.active{
  border-color: rgba(11,58,122,.35);
  box-shadow: 0 12px 24px rgba(11,58,122,.12);
  font-weight:800;
}

/* Grid e cards: impedir que 1 produto vire um “banner” grande */
.products{ padding-bottom:120px; } /* respiro do footer */
.products .grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 240px));
  justify-content:center;
  gap:18px;
  margin-bottom:22px;
}
@media (max-width: 560px){
  .products .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
    padding:0 14px;
  }
}

/* Garantir posicionamento do QuickView e clique + alinhar alturas */
.card{ position:relative; display:flex; flex-direction:column; }
.card-link{ position:relative; z-index:1; display:flex; flex-direction:column; flex:1; gap:8px; text-decoration:none; color:inherit; }
.ms-qv-btn{ z-index:5; pointer-events:auto; }
.card-actions{ position:relative; z-index:2; display:flex; justify-content:center; margin-top:10px; }
.ms-buy-btn{
  width:100%;
  border:none;
  border-radius:12px;
  padding:12px 14px;
  font-weight:900;
  cursor:pointer;
  background:#22c55e;
  color:#fff;
}
.ms-buy-btn:active{ transform: translateY(1px); }
.ms-buy-btn.is-out{
  background:#9ca3af;
  cursor:not-allowed;
}

/* Imagem do card: sempre “encaixar” no quadro */
.card-link img{
  width:100%;
  height:170px;
  object-fit:contain;
  background:#fff;
  border-radius:14px;
  border:1px solid var(--ms-border);
}
@media (max-width:560px){
  .card-link img{ height:140px; }
}

/* Carrinho: botão remover com borda vermelha */
.link-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(220,38,38,.65);
  color: rgb(220,38,38);
  text-decoration:none;
  font-weight:700;
}
.link-danger:hover{ background: rgba(220,38,38,.08); }

/* Carrinho: “Continuar comprando” no lado direito e mais chamativo */
.cart-summary .actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.cart-summary .actions .ms-continue{ order: 3; }
.cart-summary .actions button[type="submit"]{ order: 1; }
.cart-summary .actions a.btn{ order: 2; }


/* ===== Filtros (Story) — remover foco quadrado e manter apenas o anel ===== */
.story,
.story.active{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.story:focus,
.story:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ===== Carrinho — visual melhor + limites de estoque ===== */
.cart-list{ display:flex; flex-direction:column; gap:14px; }
.cart-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:14px;
}
.cart-thumb{
  width:84px;
  height:84px;
  flex:0 0 84px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.cart-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.cart-info{ flex:1; min-width:0; }
.cart-qty{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0 6px;
}
.ms-qty{
  width:92px;
  max-width:92px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  text-align:center;
  font-weight:700;
}
.ms-qty::-webkit-outer-spin-button,
.ms-qty::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0; }
.ms-qty{ -moz-appearance:textfield; }

.ms-stock-msg{
  display:block;
  margin-left:auto;
  font-size:.85rem;
  color:#b45309; /* âmbar */
}

.ms-subtotal-val{
  color:var(--ms-primary);
  font-weight:900;
}
#msCartTotal{
  color:var(--ms-primary);
  font-weight:900;
}

.link-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(220,38,38,.6);
  color:#b91c1c;
  background:#fff;
  font-weight:800;
  text-decoration:none;
}
.link-danger:hover{ background:rgba(220,38,38,.06); }

.ms-continue{
  border-color: rgba(212,164,58,.8);
  background: rgba(212,164,58,.18);
  color: #1f2937;
  font-weight:900;
}
.ms-continue:hover{ background: rgba(212,164,58,.28); }

/* Layout ações carrinho (sem botão Atualizar) */
.cart-summary .actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* ===== Ajustes filtros (remover "quadrado" azul de foco) ===== */
.ms-story-btn:focus,
.ms-story-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ===== Carrinho: botões +/- e espaçamento nos totais ===== */
.ms-qty-wrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:6px;
}
.ms-qty-btn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--ms-border);
  background:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.ms-qty-btn:active{ transform: scale(.98); }
input.ms-qty{
  width:64px;
  text-align:center;
}

.cart-totals .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
}
.cart-totals .row strong{
  white-space:nowrap;
}
.cart-totals .row.total strong{
  font-size:20px;
}
.cart-totals .row.discount strong{
  color:#b91c1c;
}
.ms-continue{
  background: var(--ms-primary);
  color:#fff !important;
  border:1px solid rgba(255,255,255,.25);
}
.ms-continue:hover{ filter: brightness(1.05); }

/* Ajustes para footer responsivo */
@media (max-width: 767px) {
    .footer {
        padding: 10px 20px;  /* Ajusta o padding para dispositivos móveis */
        font-size: 12px;  /* Ajuste do tamanho da fonte */
    }
    .footer-inner {
        grid-template-columns: 1fr;  /* Empilha as colunas no mobile */
    }
    .footer img {
        max-width: 100%;  /* Garante que as imagens não ultrapassem a largura */
        height: auto;
    }
    body, html {
        overflow-x: hidden;  /* Impede overflow horizontal */
    }
}


/* Selos de confiança (footer) */
.ms-trust{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin: 0 0 18px;
}
.ms-trust-item{
  border:1px solid var(--gray-100);
  background: var(--card);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size: 13px;
}
.ms-trust-item strong{
  font-weight: 900;
  color: var(--text);
}
.ms-trust-item span{
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 720px){
  .ms-trust{
    grid-template-columns: 1fr;
  }
}


/* Botão "Acompanhar pedido" no topo (visível no mobile) */
.topnav .track-link{
  display:flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  font-weight:900;
  border:1px solid var(--ms-border);
  background:rgba(255,255,255,.95);
  padding:8px 10px;
  border-radius:14px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  color:var(--text,#111827);
}
.topnav .track-link:hover{filter:brightness(.98)}
.topnav .track-link:active{transform:translateY(1px)}
.topnav .track-label{font-size:12px}
@media (max-width: 520px){
  .topnav .track-link{width:42px; justify-content:center; padding:8px}
  .topnav .track-label{display:none}
}
html.dark-mode .topnav .track-link{
  background:rgba(17,24,39,.55);
  color:#fff;
  border-color:rgba(255,255,255,.12);
}



/* ===== Promoções por quantidade (mobile-first) ===== */
.ms-promo-badge{
  line-height: 1;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display:flex;
  width: fit-content;
  align-items:center;
  justify-content:center;
  text-align:center;
  align-self:center;
  margin: 10px auto 0;
  gap:6px;
  font-weight:1000;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(11,58,122,.10);
  color:#0b3a7a;
  border:1px solid rgba(11,58,122,.18);
}
html.dark-mode .ms-promo-badge{
  line-height: 1;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background:rgba(147,197,253,.12);
  color:#93c5fd;
  border-color:rgba(147,197,253,.22);
}

/* Mantém todos os cards com a mesma altura, mesmo quando não há promoção */
.ms-promo-slot{
  min-height: 28px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ms-promo-slot .ms-promo-badge{
  line-height: 1;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; margin:0; }
.ms-promo-badge.is-empty{ visibility:hidden; }

.story.story-promo .story-img{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.25);
}
.story.story-promo .story-name{font-weight:1000}

/* Carrossel horizontal (usado em "Você também pode gostar" e outras vitrines mobile) */
.ms-promo-row{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding: 6px 2px 10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.ms-promo-row::-webkit-scrollbar{height:6px}
.ms-promo-row .card{min-width:160px; max-width:180px; scroll-snap-align:start}

/* A seção "Ofertas por quantidade" (vitrine separada na home) foi removida para reduzir poluição visual. */

/* Botão flutuante de "Acompanhar pedido" (apenas mobile) */
.ms-track-fab{
  position:fixed;
  right:14px;
  bottom: calc(156px + env(safe-area-inset-bottom));
  z-index:999998;
  width:48px;
  height:48px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:20px;
  font-weight:1000;
  background: rgba(255,255,255,.95);
  border:1px solid var(--ms-border);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  color: var(--text,#111827);
}
.ms-track-fab:active{transform:translateY(1px)}
html.dark-mode .ms-track-fab{
  background:rgba(17,24,39,.55);
  border-color:rgba(255,255,255,.12);
  color:#fff;
}
@media (min-width: 721px){
  .ms-track-fab{display:none;}
}



/* ===== Dark Mode UX Fixes (compat: html.dark-mode / data-theme) ===== */
html.dark-mode .ms-suggest,
html[data-theme="dark"] .ms-suggest,
body.dark-mode .ms-suggest{
  background: var(--surface);
  border-color: var(--border);
}
html.dark-mode .ms-suggest button:hover,
html.dark-mode .ms-suggest button:focus,
html[data-theme="dark"] .ms-suggest button:hover,
html[data-theme="dark"] .ms-suggest button:focus,
body.dark-mode .ms-suggest button:hover,
body.dark-mode .ms-suggest button:focus{
  background: rgba(255,255,255,.06);
}

html.dark-mode .ms-qv-btn,
html[data-theme="dark"] .ms-qv-btn,
body.dark-mode .ms-qv-btn{
  background: rgba(30,41,59,.95);
  border-color: var(--border);
  color: var(--text);
}

html.dark-mode .ms-modal,
html[data-theme="dark"] .ms-modal,
body.dark-mode .ms-modal{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html.dark-mode .ms-modal .hd,
html[data-theme="dark"] .ms-modal .hd,
body.dark-mode .ms-modal .hd{
  background: rgba(30,41,59,.92);
  border-bottom: 1px solid var(--border);
}
html.dark-mode .ms-modal .close,
html[data-theme="dark"] .ms-modal .close,
body.dark-mode .ms-modal .close{
  background: var(--surface);
  color: var(--text);
}
html.dark-mode .ms-modal .pv img,
html[data-theme="dark"] .ms-modal .pv img,
body.dark-mode .ms-modal .pv img{
  background: rgba(255,255,255,.04);
  border-color: var(--border);
}

/* === MS HOTFIX: DARK CONTRAST START === */
/* Ajustes de contraste no tema escuro (topo e botões utilitários)
   Objetivo: manter "Pesquisar", "Acompanhar" e "Limpar filtro" sempre legíveis.
*/
html.dark-mode .topnav .track-link,
html[data-theme="dark"] .topnav .track-link,
body.dark-mode .topnav .track-link{
  background: rgba(255,255,255,.96) !important;
  color: #111827 !important;
  border-color: rgba(17,24,39,.14) !important;
}

html.dark-mode .ms-track-fab,
html[data-theme="dark"] .ms-track-fab,
body.dark-mode .ms-track-fab{
  background: rgba(255,255,255,.96) !important;
  color: #111827 !important;
  border-color: rgba(17,24,39,.14) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.30) !important;
}

/* Botão "Limpar filtro" (home/categorias) */
html.dark-mode #clearFilter,
html[data-theme="dark"] #clearFilter,
body.dark-mode #clearFilter{
  background: rgba(255,255,255,.96) !important;
  color: #111827 !important;
  border-color: rgba(17,24,39,.14) !important;
}
html.dark-mode #clearFilter:hover,
html[data-theme="dark"] #clearFilter:hover,
body.dark-mode #clearFilter:hover{
  filter: brightness(.98);
}

/* Sugestões do autocomplete: acompanha a busca clara no topo */
html.dark-mode .ms-suggest,
html[data-theme="dark"] .ms-suggest,
body.dark-mode .ms-suggest{
  background: rgba(255,255,255,.98) !important;
  border-color: rgba(17,24,39,.14) !important;
  color: #111827 !important;
}
html.dark-mode .ms-suggest .ms-suggest-hd,
html[data-theme="dark"] .ms-suggest .ms-suggest-hd,
body.dark-mode .ms-suggest .ms-suggest-hd{
  color: rgba(17,24,39,.60) !important;
  border-bottom-color: rgba(17,24,39,.10) !important;
}
html.dark-mode .ms-suggest button:hover,
html.dark-mode .ms-suggest button:focus,
html[data-theme="dark"] .ms-suggest button:hover,
html[data-theme="dark"] .ms-suggest button:focus,
body.dark-mode .ms-suggest button:hover,
body.dark-mode .ms-suggest button:focus{
  background: rgba(17,24,39,.06) !important;
}
html.dark-mode .ms-suggest img,
html[data-theme="dark"] .ms-suggest img,
body.dark-mode .ms-suggest img{
  background: rgba(17,24,39,.04) !important;
  border-color: rgba(17,24,39,.10) !important;
}
/* === MS HOTFIX: DARK CONTRAST END === */


/* === MS POLISH: DARK THEME V4 === */
/* Pequenos ajustes visuais para tema escuro (sem afetar funcionalidades) */
html.dark-mode .topbar, body.dark-mode .topbar{
  backdrop-filter: blur(10px);
}

html.dark-mode .search-toggle,
html.dark-mode .search-input,
body.dark-mode .track-link,
body.dark-mode #clearFilter{
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

@media (hover:hover){
  body.dark-mode .track-link:hover,
  body.dark-mode #clearFilter:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0,0,0,.30);
  }

  html.dark-mode .search-toggle:hover{
    box-shadow: 0 14px 28px rgba(0,0,0,.28);
  }
}

html.dark-mode .search-input::placeholder{
  color: rgba(15,23,42,.55);
}

html.dark-mode .search-toggle:focus-visible,
html.dark-mode .search-input:focus-visible,
body.dark-mode .track-link:focus-visible,
body.dark-mode #clearFilter:focus-visible{
  outline: 3px solid rgba(59,130,246,.35);
  outline-offset: 2px;
}
/* === MS POLISH: DARK THEME V4 END === */

/* =====================================================
   Mobile Commerce Enhancements (Sticky Comprar + Drawer)
   ===================================================== */

.ms-stock-slot{ margin-top: 8px; min-height: 28px; height: 28px; display:flex; align-items:center; justify-content:center; }
.ms-stock-badge{
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  background: rgba(245, 158, 11, .14);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, .25);
  text-align:center;
}
html[data-theme="dark"] .ms-stock-badge{
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; background: rgba(245,158,11,.18); color: #ffd08a; border-color: rgba(255,208,138,.25); }
.ms-stock-badge.is-empty{ visibility:hidden; }
.ms-stock-inline{ margin-top: 8px; }

/* Sticky comprar (mobile) */
.ms-sticky-buy{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(92px + env(safe-area-inset-bottom)); /* above bottom-nav */
  z-index: 999998;
  display: none;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (max-width: 768px){
  .ms-sticky-buy{ display:flex; }
}
html[data-theme="light"] .ms-sticky-buy{ background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.06); }
html[data-theme="dark"]  .ms-sticky-buy{ background: rgba(20,26,40,.90); border: 1px solid rgba(255,255,255,.10); }
.ms-sticky-buy-info{ min-width:0; }
.ms-sticky-buy-title{ font-weight: 900; font-size: 12px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-sticky-buy-sub{ display:flex; gap: 8px; align-items:center; margin-top: 2px; }
.ms-sticky-buy-price{ font-weight: 1000; }
html[data-theme="dark"] .ms-sticky-buy-price{ color:#fff; }
.ms-sticky-buy-low{ font-size: 12px; font-weight: 900; opacity: .9; }
.ms-sticky-buy-btn{
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 1000;
  background: var(--primary);
  color: #fff;
  min-width: 110px;
}
.ms-sticky-buy-btn:active{ transform: scale(.98); }

/* Drawer (mini-carrinho) */
.ms-drawer{ position: fixed; inset: 0; z-index: 1000001; display:none; }
.ms-drawer.open{ display:block; }
.ms-drawer-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.45); }
.ms-drawer-panel{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  border-radius: 20px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  overflow:hidden;
  transform: translateY(24px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.ms-drawer.open .ms-drawer-panel{ transform: translateY(0); opacity: 1; }
html[data-theme="light"] .ms-drawer-panel{ background: #fff; border: 1px solid rgba(0,0,0,.06); }
html[data-theme="dark"]  .ms-drawer-panel{ background: rgba(16,20,30,.98); border: 1px solid rgba(255,255,255,.12); }
.ms-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding: 14px 14px; }
.ms-drawer-title{ font-weight: 1000; font-size: 14px; }
.ms-drawer-close{ border:0; background: transparent; font-size: 18px; padding: 6px 10px; border-radius: 12px; cursor:pointer; }
html[data-theme="light"] .ms-drawer-close{ color:#111; }
html[data-theme="dark"] .ms-drawer-close{ color:#fff; }
.ms-drawer-body{ padding: 0 14px 12px; }
.ms-drawer-item{ display:flex; gap: 12px; align-items:center; }
.ms-drawer-thumb{ width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background:#fff; border:1px solid rgba(0,0,0,.08); padding:6px; box-sizing:border-box; flex: 0 0 auto; }
.ms-drawer-meta{ min-width:0; }
.ms-drawer-name{ font-weight: 1000; font-size: 14px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.ms-drawer-sub{ font-weight: 800; font-size: 13px; opacity: .9; margin-top: 2px; }
.ms-drawer-small{ font-size: 12px; opacity: .75; margin-top: 6px; }
.ms-drawer-actions{ display:flex; gap: 10px; padding: 12px 14px 14px; }
.ms-drawer-actions .btn{ flex:1; }
.ms-drawer-actions .btn-secondary{ flex:1; }
.ms-drawer-error{ font-weight: 900; padding: 10px; border-radius: 14px; background: rgba(220,38,38,.12); color: #dc2626; }

/* Lock scroll when drawer open */
html.ms-lock, body.ms-lock{ overflow: hidden !important; }

/* Skeleton (home grid) */
.ms-loading{ opacity: 1; }
.ms-skel-card{ padding: 12px; }
.ms-skel-img{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: rgba(0,0,0,.08);
  overflow:hidden;
  position: relative;
}
html[data-theme="dark"] .ms-skel-img{ background: rgba(255,255,255,.08); }
.ms-skel-line{ height: 12px; border-radius: 999px; margin-top: 10px; background: rgba(0,0,0,.08); position: relative; overflow:hidden; }
html[data-theme="dark"] .ms-skel-line{ background: rgba(255,255,255,.08); }
.ms-skel-line.w-70{ width: 70%; }
.ms-skel-line.w-50{ width: 50%; }
.ms-skel-btn{ height: 40px; border-radius: 14px; margin-top: 12px; background: rgba(0,0,0,.10); position: relative; overflow:hidden; }
html[data-theme="dark"] .ms-skel-btn{ background: rgba(255,255,255,.10); }
.ms-skel-img::after,
.ms-skel-line::after,
.ms-skel-btn::after{
  content: '';
  position:absolute; inset:0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: msShimmer 1.2s infinite;
}
html[data-theme="dark"] .ms-skel-img::after,
html[data-theme="dark"] .ms-skel-line::after,
html[data-theme="dark"] .ms-skel-btn::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); }
@keyframes msShimmer{ 0%{ transform: translateX(-120%);} 100%{ transform: translateX(120%);} }

/* PWA install button */
.ms-install-btn{
  position: fixed;
  left: 12px;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 999997;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 1000;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
html[data-theme="light"] .ms-install-btn{ background: #111; color: #fff; }
html[data-theme="dark"] .ms-install-btn{ background: rgba(255,255,255,.92); color: #111; }
@media (min-width: 769px){ .ms-install-btn{ display:none; } }
.ms-low-stock-note{ margin-top: 6px; font-weight: 900; font-size: 12px; opacity: .9; }
.ms-hp{ position:absolute !important; left:-9999px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; }