/*
 * REVESTE — sistema responsivo compartilhado
 *
 * Faixas adotadas:
 *   mobile pequeno:  até 374px
 *   mobile:          375px–599px
 *   tablet:          600px–1023px
 *   desktop:         1024px+
 *
 * Este arquivo é carregado por último para concentrar o comportamento de
 * componentes compartilhados sem duplicar o DOM entre desktop e mobile.
 */

:root {
  --content-max-width: 1320px;
  --page-padding-mobile: 14px;
  --page-padding-tablet: 24px;
  --page-padding-compact: 32px;
  --page-padding-desktop: 40px;
  --section-gap-mobile: 40px;
  --section-gap-tablet: 56px;
  --control-height: 44px;
  --mobile-header-height: 56px;
  --tablet-header-height: 60px;
  --responsive-card-radius: clamp(12px, 2vw, 18px);
}

/* Corrige a origem dos overflows; não mascara a página inteira. */
html,
body {
  max-width: none;
  overflow-x: visible;
}

.page-main,
.navbar,
.navbar__inner,
.container,
.settings-shell,
.perfil-layout,
.form-produto-layout,
.termos-layout {
  max-inline-size: 100%;
}

img,
video,
canvas,
iframe {
  max-inline-size: 100%;
}

.input-group,
.form-row > *,
.form-row-3 > *,
.form-grid > *,
.config-panel,
.settings-content,
.detalhe__info,
.pcard__body,
.loja-card__body {
  min-inline-size: 0;
}

.input-field,
.input-sm,
.input-field--sm,
select,
textarea {
  max-inline-size: 100%;
}

.perfil-header__info,
.adm-user-meta,
.nav-notif-texto,
.detalhe__desc,
.store-post,
.global-post,
.doc-content,
.modal-card,
.rv-confirm__card {
  overflow-wrap: anywhere;
}

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Dialogs, drawers e confirmações compartilham a mesma geometria segura. */
:where(.modal-overlay, .rv-confirm, .modal-loja-overlay, .adm-details) {
  overscroll-behavior: contain;
}

:where(.modal-card, .rv-confirm__card, .modal-loja-card, .adm-details__card) {
  max-inline-size: min(100%, 760px);
  max-block-size: min(90dvh, 900px);
  overflow: auto;
  overscroll-behavior: contain;
}

body.mobile-menu-open,
body.drawer-open,
body.modal-open,
body.adm-drawer-open,
body.chat-drawer-open {
  overflow: hidden;
  touch-action: none;
}

/* Tablet grande / notebook pequeno: mantém densidade sem comprimir desktop. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .container,
  .navbar__inner {
    padding-inline: var(--page-padding-compact);
  }

  .produtos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lojas-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet: layout intermediário real. */
@media (min-width: 600px) and (max-width: 1023px) {
  .container,
  .navbar__inner {
    padding-inline: var(--page-padding-tablet);
  }

  .page-main {
    min-block-size: calc(100dvh - var(--tablet-header-height));
  }

  .produtos-grid,
  .favoritos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .lojas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .form-row-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detalhe {
    grid-template-columns: minmax(0, 1fr);
  }

  .detalhe__galeria {
    position: static;
  }

  .config-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .config-sidebar {
    position: static;
  }

  .config-sidebar__nav,
  .pf-tabs,
  .store-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  .config-nav-item,
  .pf-tab,
  .store-tabs > * {
    flex: 0 0 auto;
    min-block-size: var(--control-height);
    scroll-snap-align: start;
  }

  :where(button, .btn-primary, .btn-secondary, .btn-ghost, .btn-accent, .btn-danger) {
    min-block-size: var(--control-height);
  }
}

/* Celular. */
@media (max-width: 599px) {
  body {
    padding-block-end: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
  }

  body[data-page="chat"],
  body[data-page="admin"],
  body[data-page="login"],
  body[data-page="cadastro"] {
    padding-block-end: 0;
  }

  .container,
  .navbar__inner {
    inline-size: 100%;
    padding-inline: max(var(--page-padding-mobile), env(safe-area-inset-left, 0px));
  }

  .page-main {
    min-block-size: calc(100dvh - var(--mobile-header-height));
  }

  h1,
  .page-hero h1 {
    font-size: clamp(1.8rem, 9vw, 2.65rem);
    text-wrap: balance;
  }

  h2,
  .section-title {
    text-wrap: balance;
  }

  :where(button, .btn-primary, .btn-secondary, .btn-ghost, .btn-accent, .btn-danger) {
    min-block-size: var(--control-height);
  }

  .input-field,
  .input-sm,
  .input-field--sm,
  select,
  textarea {
    inline-size: 100%;
    min-block-size: var(--control-height);
    font-size: 16px;
  }

  .form-row,
  .form-row-3,
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-actions,
  .config-panel__header,
  .settings-context-header {
    align-items: stretch;
  }

  .form-actions > :where(button, a),
  .config-panel__header > :where(button, a) {
    justify-content: center;
  }

  .produtos-grid,
  .favoritos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .pcard {
    min-inline-size: 0;
    border-radius: var(--responsive-card-radius);
  }

  .pcard__nome {
    overflow-wrap: anywhere;
  }

  .lojas-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .loja-card__body,
  .loja-card__info {
    min-inline-size: 0;
  }

  .lojas-filtros {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .lojas-filtros > * {
    inline-size: 100%;
  }

  .pf-tabs,
  .config-sidebar__nav,
  .store-tabs,
  .home-filter-chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .pf-tabs::-webkit-scrollbar,
  .config-sidebar__nav::-webkit-scrollbar,
  .store-tabs::-webkit-scrollbar,
  .home-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .pf-tab,
  .config-nav-item,
  .store-tabs > *,
  .home-filter-chips > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .config-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .config-sidebar {
    position: static;
  }

  .config-panel,
  .config-section,
  .settings-context-header {
    border-radius: var(--responsive-card-radius);
  }

  .settings-shell,
  .perfil-layout,
  .form-produto-layout {
    padding-inline: var(--page-padding-mobile);
  }

  .settings-content,
  .config-panel,
  .config-panel__body {
    inline-size: 100%;
  }

  .detalhe {
    grid-template-columns: minmax(0, 1fr);
  }

  .detalhe__galeria {
    position: static;
  }

  .detalhe__acoes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .detalhe__acoes > * {
    inline-size: 100%;
    justify-content: center;
  }

  .modal-overlay,
  .rv-confirm,
  .modal-loja-overlay,
  .adm-details {
    align-items: flex-end;
    padding: 12px;
    padding-block-end: max(12px, env(safe-area-inset-bottom, 0px));
  }

  .modal-card,
  .rv-confirm__card,
  .modal-loja-card,
  .adm-details__card {
    inline-size: 100%;
    max-inline-size: none;
    max-block-size: calc(100dvh - 24px - env(safe-area-inset-top, 0px));
    border-radius: 20px 20px 12px 12px;
    padding: 18px;
  }

  .rv-toast-wrap {
    inset-inline: var(--page-padding-mobile);
    inset-block-end: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 12px);
  }

  .rv-toast {
    inline-size: 100%;
    max-inline-size: none;
  }

  .nav-dropdown,
  .nav-notif-dropdown {
    position: fixed;
    inset-inline: var(--page-padding-mobile);
    inset-block-start: calc(var(--mobile-header-height) + 8px + env(safe-area-inset-top, 0px));
    inline-size: auto;
    max-inline-size: none;
    max-block-size: calc(100dvh - var(--mobile-header-height) - 24px);
    overflow: auto;
  }

  .update-banner {
    padding-block-end: max(14px, env(safe-area-inset-bottom, 0px));
  }

  .store-page--wallpaper {
    min-block-size: calc(100dvh - var(--mobile-header-height));
  }

  .store-page--wallpaper::before {
    background-position: var(--store-wallpaper-position-mobile, center top);
  }

  .store-customizer,
  .store-theme-editor,
  .store-typography-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .global-post,
  .store-post {
    overflow-wrap: anywhere;
  }
}

/* Celular pequeno: um card por linha para preservar leitura e ações. */
@media (max-width: 374px) {
  :root {
    --page-padding-mobile: 12px;
  }

  .produtos-grid,
  .favoritos-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .pcard__img {
    padding-block-start: 108%;
  }

  .bottom-nav__item {
    font-size: .55rem;
    padding-inline: 2px;
  }

  .bottom-nav__item svg {
    inline-size: 20px;
    block-size: 20px;
  }

  .lojista-metrics,
  .lojista-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 599px) and (orientation: landscape) {
  .modal-card,
  .rv-confirm__card,
  .modal-loja-card,
  .adm-details__card {
    max-block-size: calc(100dvh - 12px);
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}