/* Ultracell V20.82 — proprietário único do shell, layout e navegação estrutural.
   Build: 20-82-shell-layout-navigation-consolidation
   Escopo: escala de camadas, cabeçalho, sidebar, conteúdo principal, drawer,
   navegação inferior, grades estruturais, rolagem e carrinho flutuante.
   O contrato DOM uc-app-shell-v20-73 permanece estável por compatibilidade.
   As folhas históricas permanecem no pacote para rollback, mas este arquivo
   carregado no fim da cascata é o único decisor da geometria estrutural. */

:root {
  --uc-layer-base: 0;
  --uc-layer-content: 2;
  --uc-layer-sticky: 20;
  --uc-layer-sidebar: 70;
  --uc-layer-navigation: 90;
  --uc-layer-floating: 110;
  --uc-layer-header: 120;
  --uc-layer-shell-control: 130;
  --uc-layer-drawer-overlay: 390;
  --uc-layer-drawer: 400;
  --uc-layer-drawer-control: 410;
  --uc-layer-backdrop: 800;
  --uc-layer-modal: 900;
  --uc-layer-toast: 1000;
  --uc-layer-viewer: 2147483000;
  --uc73-header-height: 86px;
  --uc73-sidebar-width: clamp(230px, 18vw, 260px);
  --uc73-sidebar-collapsed-width: 84px;
  --uc73-content-max: 1600px;
  --uc73-content-gap: clamp(16px, 2vw, 28px);
  --uc73-page-bg: #f4f7fb;
  --uc73-line: rgba(148, 163, 184, .22);
  --uc73-elevation: 0 12px 30px rgba(15, 23, 42, .08);
}

html,
body,
#app {
  min-width: 0;
  min-height: 100%;
  max-width: 100%;
}

body:has(.uc-app-shell-v20-73) {
  margin: 0;
  overflow-x: hidden !important;
  background: var(--uc73-page-bg);
}

.uc-app-shell-v20-73 {
  --uc73-active-sidebar-width: var(--uc73-sidebar-width);
  width: 100%;
  min-width: 0;
  min-height: 100dvh;
  background: var(--uc73-page-bg);
  overflow: visible !important;
}

.uc-app-shell-v20-73.is-sidebar-collapsed {
  --uc73-active-sidebar-width: var(--uc73-sidebar-collapsed-width);
}

/* Cabeçalho fixo compensado uma única vez pela margem superior do shell. */
.uc-app-shell-v20-73 > .brand-bar.premium-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  z-index: var(--uc-layer-header) !important;
  display: grid !important;
  grid-template-columns: var(--uc73-active-sidebar-width) minmax(0, 1fr) 88px !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--uc73-header-height) !important;
  min-height: var(--uc73-header-height) !important;
  padding: 0 20px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  background: #050608 !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18) !important;
}

.uc-app-shell-v20-73 > .brand-bar .brand-meta-left,
.uc-app-shell-v20-73 > .brand-bar .brand-center,
.uc-app-shell-v20-73 > .brand-bar .brand-actions {
  min-width: 0 !important;
  position: static !important;
  inset: auto !important;
}

.uc-app-shell-v20-73 > .brand-bar .brand-center {
  justify-self: center !important;
}

.uc-app-shell-v20-73 > .brand-bar .brand-actions {
  justify-self: end !important;
}

.uc-app-shell-v20-73 > .brand-bar .user-chip {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Um único grid controla o afastamento lateral. */
.uc-app-shell-v20-73 > .uc-main-shell-v20-73 {
  position: relative !important;
  display: grid !important;
  grid-template-columns: var(--uc73-active-sidebar-width) minmax(0, 1fr) !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: calc(100dvh - var(--uc73-header-height)) !important;
  margin: var(--uc73-header-height) 0 0 0 !important;
  padding: 0 !important;
  transform: none !important;
  background: transparent !important;
}

.uc-main-shell-v20-73 > .sidebar {
  grid-column: 1 !important;
  position: fixed !important;
  top: var(--uc73-header-height) !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  align-self: start !important;
  width: var(--uc73-active-sidebar-width) !important;
  min-width: var(--uc73-active-sidebar-width) !important;
  max-width: var(--uc73-active-sidebar-width) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 20px 16px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #050608 0%, #101828 100%) !important;
  box-shadow: 10px 0 28px rgba(15, 23, 42, .14) !important;
  z-index: var(--uc-layer-sidebar) !important;
}

.uc-main-shell-v20-73 > .sidebar > .sidebar-scroll {
  display: grid !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 4px 18px 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

.uc-main-shell-v20-73 > .main-content-area {
  grid-column: 2 !important;
  position: relative !important;
  inset: auto !important;
  display: block !important;
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: calc(100dvh - var(--uc73-header-height)) !important;
  margin: 0 !important;
  margin-left: 0 !important;
  padding: var(--uc73-content-gap) !important;
  padding-left: var(--uc73-content-gap) !important;
  box-sizing: border-box !important;
  transform: none !important;
  overflow: visible !important;
  background: var(--uc73-page-bg) !important;
  scroll-margin-top: calc(var(--uc73-header-height) + 12px);
}

.uc-main-shell-v20-73 > .main-content-area > :not(.toast):not(.modal-backdrop) {
  width: min(100%, var(--uc73-content-max));
  min-width: 0;
  margin-inline: auto;
}

.uc-main-shell-v20-73 .sidebar-toggle-floating {
  position: fixed !important;
  z-index: var(--uc-layer-shell-control) !important;
  top: calc(var(--uc73-header-height) + 14px) !important;
  left: calc(var(--uc73-active-sidebar-width) - 18px) !important;
  right: auto !important;
  bottom: auto !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .2) !important;
}

.uc-main-shell-v20-73 .sidebar-toggle-floating .toggle-label {
  display: none !important;
}

.uc-main-shell-v20-73 > .mobile-sidebar-overlay {
  display: none !important;
}

/* Colapso real, sem larguras residuais nem conteúdo invisível reservando espaço. */
.uc-app-shell-v20-73.is-sidebar-collapsed .sidebar {
  padding-inline: 10px !important;
}

.uc-app-shell-v20-73.is-sidebar-collapsed .sidebar .side-btn,
.uc-app-shell-v20-73.is-sidebar-collapsed .sidebar .profile-collapse-btn {
  justify-content: center !important;
  padding-inline: 8px !important;
}

.uc-app-shell-v20-73.is-sidebar-collapsed .sidebar .side-btn-copy,
.uc-app-shell-v20-73.is-sidebar-collapsed .sidebar .profile-toggle-card,
.uc-app-shell-v20-73.is-sidebar-collapsed .sidebar .side-brand-card p,
.uc-app-shell-v20-73.is-sidebar-collapsed .sidebar .side-brand-card h3,
.uc-app-shell-v20-73.is-sidebar-collapsed .sidebar .side-section-label,
.uc-app-shell-v20-73.is-sidebar-collapsed .sidebar .toggle-label {
  display: none !important;
}

/* O conteúdo nunca herda margem lateral de camadas históricas. */
.uc-app-shell-v20-73 .content,
.uc-app-shell-v20-73 .main-content-area,
.uc-app-shell-v20-73 .desktop-premium-store,
.uc-app-shell-v20-73 .desktop-premium-main-content,
.uc-app-shell-v20-73 .section,
.uc-app-shell-v20-73 .store-content-clean {
  min-width: 0 !important;
  max-width: none;
}

.uc-app-shell-v20-73 .desktop-premium-store {
  display: grid !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.uc-app-shell-v20-73 .desktop-premium-hero,
.uc-app-shell-v20-73 .desktop-category-home-head,
.uc-app-shell-v20-73 .desktop-catalog-results-head {
  position: relative !important;
  top: auto !important;
  margin: 0 !important;
}

/* Dashboard proporcional ao espaço real disponível. */
.uc-app-shell-v20-73 .dashboard-focus-grid,
.uc-app-shell-v20-73 .uc-summary-focus-grid,
.uc-app-shell-v20-73 .summary-financial-grid.grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.uc-app-shell-v20-73 .dashboard-panels.grid-2,
.uc-app-shell-v20-73 .grid.grid-2.dashboard-panels {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.uc-app-shell-v20-73 .dashboard-focus-card,
.uc-app-shell-v20-73 .summary-financial-grid > *,
.uc-app-shell-v20-73 .dashboard-panels > * {
  min-width: 0 !important;
  overflow-wrap: anywhere;
}

/* Grade de categorias e produtos sem medidas rígidas. */
.uc-app-shell-v20-73 .desktop-category-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.uc-app-shell-v20-73 .desktop-premium-product-grid,
.uc-app-shell-v20-73 .catalog-grid.store-catalog-grid,
.uc-app-shell-v20-73 .store-catalog-grid-refined {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.uc-app-shell-v20-73 .desktop-premium-product-card {
  display: flex !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.uc-app-shell-v20-73 .desktop-premium-card-body {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
}

.uc-app-shell-v20-73 .desktop-premium-product-media {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 180px !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
}

.uc-app-shell-v20-73 .desktop-premium-product-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.uc-app-shell-v20-73 .desktop-premium-product-media b {
  max-width: 80% !important;
  font-size: 12px !important;
  text-align: center !important;
}

.uc-app-shell-v20-73 .desktop-premium-actions {
  margin-top: auto !important;
}

/* O carrinho nunca cobre o último card. */
.uc-app-shell-v20-73 .desktop-premium-store,
.uc-app-shell-v20-73 .desktop-premium-main-content,
.uc-app-shell-v20-73 .desktop-catalog-results {
  padding-bottom: 96px !important;
}

.uc-app-shell-v20-73 ~ .floating-cart-btn,
.uc-app-shell-v20-73 .floating-cart-btn,
body:has(.uc-app-shell-v20-73) > .floating-cart-btn {
  position: fixed !important;
  right: max(20px, env(safe-area-inset-right)) !important;
  bottom: max(20px, env(safe-area-inset-bottom)) !important;
  left: auto !important;
  max-width: min(340px, calc(100vw - 40px)) !important;
  z-index: var(--uc-layer-floating) !important;
}

/* Tablet: rail lateral estável para não estrangular o conteúdo. */
@media (min-width: 761px) and (max-width: 1099px) {
  .uc-app-shell-v20-73,
  .uc-app-shell-v20-73.is-sidebar-collapsed {
    --uc73-header-height: 76px;
    --uc73-active-sidebar-width: 76px;
    --uc73-content-gap: 16px;
  }

  .uc-app-shell-v20-73 > .brand-bar.premium-bar {
    grid-template-columns: 1fr auto 52px !important;
    height: 76px !important;
    min-height: 76px !important;
    padding-inline: 14px !important;
  }

  .uc-app-shell-v20-73 > .brand-bar .brand-meta-left {
    display: none !important;
  }

  .uc-main-shell-v20-73 > .sidebar {
    top: var(--uc73-header-height) !important;
    bottom: 0 !important;
    width: var(--uc73-active-sidebar-width) !important;
    min-width: var(--uc73-active-sidebar-width) !important;
    max-width: var(--uc73-active-sidebar-width) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 8px !important;
  }

  .uc-main-shell-v20-73 > .main-content-area {
    min-height: calc(100dvh - 76px) !important;
  }

  .uc-main-shell-v20-73 .sidebar-toggle-floating {
    top: 88px !important;
    left: 58px !important;
  }

  .uc-app-shell-v20-73 .sidebar .side-btn-copy,
  .uc-app-shell-v20-73 .sidebar .profile-toggle-card,
  .uc-app-shell-v20-73 .sidebar .side-brand-card p,
  .uc-app-shell-v20-73 .sidebar .side-brand-card h3,
  .uc-app-shell-v20-73 .sidebar .side-section-label,
  .uc-app-shell-v20-73 .sidebar .toggle-label {
    display: none !important;
  }

  .uc-app-shell-v20-73 .sidebar .side-btn {
    justify-content: center !important;
    padding-inline: 7px !important;
  }

  .uc-app-shell-v20-73 .dashboard-focus-grid,
  .uc-app-shell-v20-73 .uc-summary-focus-grid,
  .uc-app-shell-v20-73 .summary-financial-grid.grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .uc-app-shell-v20-73 .desktop-premium-product-grid,
  .uc-app-shell-v20-73 .catalog-grid.store-catalog-grid,
  .uc-app-shell-v20-73 .store-catalog-grid-refined {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1399px) {
  .uc-app-shell-v20-73 .desktop-premium-product-grid,
  .uc-app-shell-v20-73 .catalog-grid.store-catalog-grid,
  .uc-app-shell-v20-73 .store-catalog-grid-refined {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1400px) {
  .uc-app-shell-v20-73 .desktop-premium-product-grid,
  .uc-app-shell-v20-73 .catalog-grid.store-catalog-grid,
  .uc-app-shell-v20-73 .store-catalog-grid-refined {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1800px) {
  .uc-app-shell-v20-73 .desktop-premium-product-grid,
  .uc-app-shell-v20-73 .catalog-grid.store-catalog-grid,
  .uc-app-shell-v20-73 .store-catalog-grid-refined {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Shell mobile de segurança. As telas mobile próprias continuam preservadas. */
@media (max-width: 760px) {
  :root {
    --uc73-header-height: 70px;
  }

  .uc-app-shell-v20-73,
  .uc-app-shell-v20-73.is-sidebar-collapsed {
    --uc73-active-sidebar-width: 0px;
    overflow: visible;
  }

  .uc-app-shell-v20-73 > .brand-bar.premium-bar {
    position: fixed !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    height: 70px !important;
    min-height: 70px !important;
    padding: 0 12px !important;
  }

  .uc-app-shell-v20-73 > .brand-bar .brand-meta-left {
    display: none !important;
  }

  .uc-app-shell-v20-73 > .uc-main-shell-v20-73 {
    display: block !important;
    min-height: calc(100dvh - 70px) !important;
  }

  .uc-main-shell-v20-73 > .main-content-area {
    width: 100% !important;
    min-height: calc(100dvh - 70px) !important;
    padding: 14px 12px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .uc-main-shell-v20-73 > .sidebar {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 320px) !important;
    height: calc(100dvh - 70px) !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: translateX(0) !important;
    transition: transform .2s ease !important;
    z-index: var(--uc-layer-drawer) !important;
  }

  .uc-app-shell-v20-73.is-sidebar-collapsed .sidebar,
  .uc-main-shell-v20-73.is-collapsed > .sidebar {
    transform: translateX(-105%) !important;
  }

  .uc-main-shell-v20-73 > .mobile-sidebar-overlay {
    position: fixed !important;
    inset: 70px 0 0 0 !important;
    display: block !important;
    background: rgba(2, 6, 23, .55) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: var(--uc-layer-drawer-overlay) !important;
  }

  .uc-app-shell-v20-73.is-sidebar-collapsed .mobile-sidebar-overlay,
  .uc-main-shell-v20-73.is-collapsed > .mobile-sidebar-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .uc-main-shell-v20-73 .sidebar-toggle-floating {
    top: 17px !important;
    left: 12px !important;
    width: 38px !important;
    height: 38px !important;
    z-index: var(--uc-layer-drawer-control) !important;
  }

  .uc-app-shell-v20-73 .dashboard-focus-grid,
  .uc-app-shell-v20-73 .uc-summary-focus-grid,
  .uc-app-shell-v20-73 .summary-financial-grid.grid-4,
  .uc-app-shell-v20-73 .dashboard-panels.grid-2,
  .uc-app-shell-v20-73 .grid.grid-2.dashboard-panels,
  .uc-app-shell-v20-73 .desktop-premium-product-grid,
  .uc-app-shell-v20-73 .catalog-grid.store-catalog-grid,
  .uc-app-shell-v20-73 .store-catalog-grid-refined {
    grid-template-columns: 1fr !important;
  }

  .uc-app-shell-v20-73 .desktop-category-home-head,
  .uc-app-shell-v20-73 .desktop-catalog-results-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .uc-app-shell-v20-73 ~ .floating-cart-btn,
  .uc-app-shell-v20-73 .floating-cart-btn,
  body:has(.uc-app-shell-v20-73) > .floating-cart-btn {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    max-width: none !important;
  }

  /* Navegação inferior cliente: um único contrato geométrico final. */
  body.v19-store-mobile-active .v19-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(100vw, 430px) !important;
    height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 auto !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    background: #fff !important;
    border-top: 1px solid #e4e7ec !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .08) !important;
    transform: translateZ(0) !important;
    z-index: var(--uc-layer-navigation) !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    contain: layout paint;
    backface-visibility: hidden;
  }

  body.v19-store-mobile-active .v19-bottom-nav::before,
  body.v19-store-mobile-active .v19-bottom-nav::after {
    content: none !important;
    display: none !important;
    pointer-events: none !important;
  }

  body.v19-store-mobile-active .v19-bottom-nav button,
  body.v19-store-mobile-active .v19-nav-btn {
    min-width: 0 !important;
    touch-action: manipulation !important;
  }

  /* Navegação inferior ADM/vendedor: preserva o desenho V20.82 e centraliza
     somente sua geometria, camada e interação estrutural. */
  body.uc-backoffice-mobile-app-active .uc-mobile-app-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(100vw, 430px) !important;
    display: grid !important;
    grid-template-columns: repeat(var(--uc-mobile-nav-count, 5), minmax(0, 1fr)) !important;
    transform: translateX(-50%) !important;
    z-index: var(--uc-layer-navigation) !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  body.modal-open .v19-bottom-nav,
  body.uc-image-viewer-open .v19-bottom-nav,
  body.modal-open .uc-mobile-app-bottom-nav,
  body.uc-image-viewer-open .uc-mobile-app-bottom-nav {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uc-app-shell-v20-73 *,
  .uc-app-shell-v20-73 *::before,
  .uc-app-shell-v20-73 *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}