:root {
  --prf-text: #16142A;
  --prf-text-secondary: #5c5668;
  --prf-text-muted: #6f6978;
  --prf-text-on-dark: #d8d4e8;
  --prf-border: rgba(22, 20, 42, 0.10);
  --prf-radius: 12px;
  --prf-shadow-sm: 0 1px 3px rgba(22, 20, 42, 0.06);
  --prf-shadow-md: 0 4px 16px rgba(22, 20, 42, 0.08);
  --prf-header-h: 96px;
  --prf-safe-top: env(safe-area-inset-top, 0px);
  --prf-safe-bottom: env(safe-area-inset-bottom, 0px);
  --prf-safe-left: env(safe-area-inset-left, 0px);
  --prf-safe-right: env(safe-area-inset-right, 0px);
}

[v-cloak] { display: none; }

* { box-sizing: border-box; }
html, body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
}
html {
  height: 100%;
  overscroll-behavior-y: contain;
}
body {
  min-height: 100%;
  background: #F9FDFC;
  font-family: 'DM Sans', -apple-system, sans-serif;
  color: var(--prf-text);
}

/* Conteúdo do SPA: respeita notch/status bar (web iOS + app nativo) */
#app {
  padding-top: var(--prf-safe-top);
  padding-bottom: var(--prf-safe-bottom);
  padding-left: var(--prf-safe-left);
  padding-right: var(--prf-safe-right);
  box-sizing: border-box;
}

/* Drawers/modais full-screen: position:fixed ignora padding do #app */
.prf-mobile-menu {
  padding-top: calc(18px + var(--prf-safe-top)) !important;
  padding-bottom: calc(28px + var(--prf-safe-bottom)) !important;
  max-height: 100dvh !important;
  box-sizing: border-box;
}
.prf-filters-panel {
  padding-top: calc(24px + var(--prf-safe-top)) !important;
  padding-bottom: var(--prf-safe-bottom) !important;
  max-height: 100dvh !important;
  box-sizing: border-box;
}
.prf-address-gate {
  padding-top: calc(16px + var(--prf-safe-top)) !important;
  padding-bottom: calc(16px + var(--prf-safe-bottom)) !important;
}

/* Desktop: thumb customizado. NÃO usar scrollbar-width/scrollbar-color no Chromium —
   no Windows isso troca para a barra nativa (setas + trilho opaco) e ignora ::-webkit-scrollbar. */
@media (min-width: 1025px) {
  html {
    overflow-y: auto;
    overflow-y: overlay;
  }
  @supports not selector(::-webkit-scrollbar) {
    html {
      scrollbar-width: thin;
      scrollbar-color: rgba(84, 72, 194, 0.32) transparent;
    }
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
  }
  html::-webkit-scrollbar-track,
  html::-webkit-scrollbar-track-piece,
  body::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track-piece {
    background: transparent;
    border: none;
    box-shadow: none;
  }
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    background-color: rgba(84, 72, 194, 0.35);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(84, 72, 194, 0.5);
  }
  html::-webkit-scrollbar-button,
  body::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
  }
  html::-webkit-scrollbar-corner,
  body::-webkit-scrollbar-corner {
    background: transparent;
  }
}

/* Drawers: esconde a barra nativa do Windows (thumb overlay no FiltersPanel) */
.prf-filters-body,
.prf-mobile-menu {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.prf-filters-body::-webkit-scrollbar,
.prf-mobile-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  html.prf-scroll-js {
    scroll-behavior: auto;
  }
}
#app {
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: calc(100dvh - var(--prf-safe-top) - var(--prf-safe-bottom));
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.prf-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* Desktop: header + main ocupam o 1º viewport; o rodapé fica abaixo do fold */
@media (min-width: 1025px) {
  .prf-main {
    flex: 1 0 auto;
    min-height: calc(100vh - var(--prf-header-h));
    min-height: calc(100dvh - var(--prf-header-h));
  }
}
.prf-main > * {
  flex: 1 1 auto;
  width: 100%;
}
a { color: inherit; }
button { font-family: inherit; }

.prf-wrap { max-width: 1536px; width: 100%; margin: 0 auto; }
.prf-wrap h2 {
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
}

.prf-sec-enter {
  animation: prf-sec-in 0.35s ease;
}
@keyframes prf-sec-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.prf-card-enter {
  animation: prf-card-in 0.42s ease both;
}
@keyframes prf-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.mkt-app--listing {
  --prf-header-h: 80px;
  background: #F7F6FD;
}

/* Shell compartilhado: categoria + busca na home */
.cat-page {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: #F7F6FD;
}
.cat-lojas-fill {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cat-bc {
  padding: 36px clamp(20px, 4vw, 56px) 0;
}
.cat-bc-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
  color: #6A6588;
}
.cat-bc-link {
  color: #5448C2;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.cat-bc-link:hover {
  text-decoration: underline;
}
.cat-bc-sep {
  display: flex;
  flex-shrink: 0;
}
.cat-bc-current {
  color: #1C1740;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-hero {
  padding: 24px clamp(20px, 4vw, 56px) 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
}
.cat-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cat-hero-title {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 42px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1C1740;
}
.cat-hero-sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #6A6588;
}
.cat-cats {
  margin-top: 24px;
  margin-bottom: 32px;
  padding: 0 clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-cats::-webkit-scrollbar { display: none; }
.cat-cat {
  height: 44px;
  box-sizing: border-box;
  padding: 0 20px;
  border-radius: 22px;
  border: 1px solid #D9D4EE;
  background: #fff;
  color: #3A3560;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cat-cat:hover {
  border-color: #5448C2;
}
.cat-cat--on {
  border-color: #5448C2;
  background: #5448C2;
  color: #fff;
}
@media (max-width: 768px) {
  .cat-bc {
    padding: 16px 16px 0;
  }
  .cat-bc-list {
    font-size: 12px;
    gap: 6px;
  }
  .cat-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 16px 0;
  }
  .cat-hero-title { font-size: 28px; }
  .cat-hero-sub { font-size: 14px; }
  .cat-cats {
    margin-top: 16px;
    margin-bottom: 20px;
    padding: 0 16px;
  }
  .cat-cat {
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
  }
}
@media (max-width: 380px) {
  .cat-bc { padding: 12px 12px 0; }
  .cat-hero { padding: 12px 12px 0; }
  .cat-cats { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .prf-sec-enter,
  .prf-card-enter { animation: none; }
  html { scroll-behavior: auto; }
}

/* Mobile/tablet: esconde a barra, mantém o scroll por gesto */
@media (max-width: 1024px) {
  html {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}

/* Gate de endereço: CSS no app.css para não perder a 1ª carga (estilo do header
   chega depois e o card com .prf-address-modal ia para baixo da tela). */
.prf-address-gate {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.prf-address-gate-overlay {
  position: absolute;
  inset: 0;
  background: rgba(22, 20, 42, 0.45);
}
.prf-address-gate-card {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 1;
  width: min(440px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 36px 36px 32px;
  margin: 0;
  background: #fff;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 20px 48px rgba(22, 20, 42, 0.2);
  box-sizing: border-box;
  overflow: visible;
  cursor: default;
}
html.prf-address-gate-lock,
body.prf-address-gate-lock {
  overflow: hidden;
}
.prf-address-gate-card .prf-address-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #EEEBFB;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #5448C2;
}
.prf-address-gate-card .prf-address-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #16142A;
  margin-bottom: 20px;
  line-height: 1.3;
}
.prf-address-gate-card .prf-address-form {
  position: relative;
  z-index: 2;
  margin-bottom: 12px;
  text-align: left;
}
.prf-address-gate-card .prf-address-sr {
  position: absolute;
  left: -9999px;
}
.prf-address-gate-card .prf-address-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.prf-address-gate-card .prf-address-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  background: #F5F3FA;
  border-radius: 12px;
  padding: 0 16px;
  min-height: 46px;
  text-align: left;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: #16142A;
}
.prf-address-gate-card .prf-address-input input {
  border: none;
  background: transparent;
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
  padding: 13px 0;
}
.prf-address-gate-card .prf-address-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 46px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: #5448C2;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.prf-address-gate-card .prf-address-confirm:disabled,
.prf-address-gate-card .prf-address-confirm.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.prf-address-gate-card .prf-address-gps {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid #E4E1EE;
  border-radius: 12px;
  padding: 13px 16px;
  text-align: left;
  cursor: pointer;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #16142A;
}
.prf-address-gate-card .prf-address-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 168px;
  overflow: auto;
  text-align: left;
  background: #faf9fc;
  border: 1px solid rgba(22, 20, 42, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(22, 20, 42, 0.16);
}
.prf-address-gate-card .prf-address-suggest li {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #4a4658;
  cursor: pointer;
}

/* Endereço (gate + modal do header): mobile — coluna, bottom sheet, toque confortável */
@media (max-width: 620px) {
  .prf-address-gate {
    align-items: flex-end;
    justify-content: center;
    padding: 0 !important;
  }
  .prf-address-gate-card {
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 28px 20px calc(24px + var(--prf-safe-bottom));
    max-height: min(92dvh, 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .prf-address-gate-card .prf-address-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
  }
  .prf-address-gate-card .prf-address-title {
    font-size: 17px;
    margin-bottom: 16px;
  }
  .prf-address-modal {
    position: fixed;
    left: 0 !important;
    right: 0 !important;
    bottom: 0;
    top: auto !important;
    width: 100% !important;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 28px 20px calc(24px + var(--prf-safe-bottom));
    max-height: min(92dvh, 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 10001;
  }
  .prf-address-modal .prf-address-close {
    width: 40px;
    height: 40px;
    top: 12px;
    right: 12px;
  }
  .prf-address-gate-card .prf-address-row,
  .prf-address-modal .prf-address-row {
    flex-direction: column;
    gap: 10px;
  }
  .prf-address-gate-card .prf-address-input,
  .prf-address-modal .prf-address-input {
    min-height: 48px;
  }
  .prf-address-gate-card .prf-address-input input,
  .prf-address-modal .prf-address-input input {
    font-size: 16px;
    padding: 12px 0;
  }
  .prf-address-gate-card .prf-address-confirm,
  .prf-address-modal .prf-address-confirm {
    width: 100%;
    min-height: 48px;
    padding: 14px 16px;
    font-size: 15px;
  }
  .prf-address-gate-card .prf-address-gps,
  .prf-address-modal .prf-address-gps {
    min-height: 48px;
    justify-content: center;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .prf-address-gate-card .prf-address-confirm,
  .prf-address-modal .prf-address-confirm {
    touch-action: manipulation;
  }
  .prf-address-gate-card .prf-address-suggest {
    max-height: min(38dvh, 220px);
  }
  .prf-address-gate-card .prf-address-suggest li,
  .prf-address-modal .prf-address-suggest li {
    padding: 14px 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
}