/* =========================================
   VARIÁVEIS E CONFIGURAÇÕES GLOBAIS
   ========================================= */
:root {
  /* Cores principais */
  --primary-color: #df1a23;
  --primary-dark: #8f1018;
  --primary-light: #ffe6e8;
  --secondary-color: #b1111b;
  --accent-color: #740409;
  /* Direção B — selos e ênfase */
  --badge-generico: #1b9e57;
  --badge-generico-bg: #e7f6ee;
  --badge-controlado: #b1111b;
  --badge-indisponivel: #8a93a0;
  --price-emphasis: #df1a23;
  --text-on-brand: #ffffff;

  /* Cores de fundo */
  --bg-primary: #f5f7fa;
  --bg-secondary: #ffffff;
  --bg-hover: #f8f9fa;

  /* Cores de texto */
  --text-primary: #000000;
  --text-secondary: #4e4e4e;
  --text-light: #ffffff;

  /* Cores de status */
  --success-color: #4caf50;
  --warning-color: #ff9800;
  --danger-color: #f44336;
  --info-color: #2196f3;

  /* Bordas e sombras */
  --border-color: #e0e0e0;
  --border-radius: 8px;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);

  /* Transições */
  --transition-speed: 0.3s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* Altura do cabeçalho fixo — recalculada em runtime por syncHeaderHeight()
     (script.js). O valor aqui é só o fallback antes do primeiro cálculo. */
  --header-height: 145px;
}

/* =========================================
   RESET E ESTILOS GERAIS
   ========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 14px;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* =========================================
   LAYOUT PRINCIPAL
   ========================================= */
.layout-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout-header {
  background: var(--primary-color);
  color: white;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

.header-brand-block {
  display: flex;
  align-items: center;
}

.header-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.header-title {
  display: flex;
  align-items: center;
  padding: 1rem 0;
}

.header-title i {
  font-size: 2rem;
  margin-right: 1rem;
  color: var(--text-on-brand);
}

.header-title span {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.header-logo {
  height: 45px;
  width: auto;
}

/* =========================================
   MENU PRINCIPAL
   ========================================= */
.main-menu {
  padding: 0 1rem;
  background: var(--accent-color) !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
body .ui-menu.ui-menubar {
  border-radius: 0 !important;
}
.ui-menuitem-link .ui-menuitem-text {
  color: white !important;
}

.main-menu .ui-menu-child .ui-menuitem-link .ui-menuitem-text,
.main-menu .ui-menu-child .ui-menuitem-link .ui-menuitem-icon {
  color: var(--text-primary) !important;
}

.main-menu .ui-menu-child .ui-menuitem-link:hover,
.main-menu .ui-menu-child .ui-menuitem-link:hover .ui-menuitem-text,
.main-menu .ui-menu-child .ui-menuitem-link:hover .ui-menuitem-icon {
  color: var(--text-primary) !important;
}

.main-menu .ui-menuitem-link {
  padding: 0.8rem 1.2rem !important;
  border-radius: var(--border-radius) !important;
  transition: all var(--transition-speed) var(--transition-easing) !important;
  margin: 0 0.2rem !important;
}

.main-menu .ui-menuitem-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  transform: translateY(-2px);
}

.main-menu .ui-menuitem-active > .ui-menuitem-link {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
}

.main-menu .ui-submenu-icon {
  color: var(--text-on-brand) !important;
}

.main-menu .ui-menuitem-icon {
  color: var(--text-on-brand) !important;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.menu-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.menu-toggle-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-on-brand);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-speed) var(--transition-easing);
}

.menu-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.menu-toggle-btn .pi {
  font-size: 1.2rem;
}

.header-mobile-panel {
  display: none;
  background: var(--accent-color);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.85rem 1rem;
  color: var(--text-on-brand);
}

.header-mobile-user {
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.header-mobile-user-name {
  display: block;
  font-size: 0.95rem;
}

.header-mobile-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.header-mobile-btn.ui-button {
  border-radius: 999px !important;
  padding: 0.6rem 1.1rem !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: var(--text-on-brand) !important;
}

.header-mobile-btn.ui-button:hover,
.header-mobile-btn.ui-button:focus,
.header-mobile-btn.ui-button.ui-state-hover,
.header-mobile-btn.ui-button.ui-state-focus {
  background: rgba(255, 255, 255, 0.2) !important;
}

.header-mobile-btn-secondary.ui-button {
  background: transparent !important;
}

.header-auth-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.header-auth-btn.ui-button {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  color: var(--text-on-brand) !important;
  border-radius: 999px !important;
  font-weight: 600;
  transition: all var(--transition-speed) var(--transition-easing) !important;
}

.header-auth-btn.ui-button:hover,
.header-auth-btn.ui-button:focus,
.header-auth-btn.ui-button.ui-state-hover,
.header-auth-btn.ui-button.ui-state-focus {
  background-color: rgba(255, 255, 255, 0.24) !important;
  transform: translateY(-1px);
}

.header-auth-btn-secondary.ui-button {
  background-color: transparent !important;
}

.header-user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  margin-right: 0.6rem;
}

.header-user-label {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.82;
}

.header-user-name {
  font-size: 0.92rem;
  font-weight: 600;
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-welcome {
  margin-right: 0.6rem;
}

.main-header-line {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.header-profile-btn,
.header-orders-btn {
  margin-right: 0.25rem;
}

.profile-button.ui-button {
  background-color: transparent !important;
  border: none !important;
  color: var(--text-on-brand) !important;
}

.logout-button {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: var(--text-on-brand) !important;
  transition: all var(--transition-speed) var(--transition-easing) !important;
}

.logout-button:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px);
}

#menuForm .mainHeader {
  padding: 0.6rem 1rem;
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

/* Ensure search block takes up remaining space */
#menuForm .mainHeader .header-search-block {
  flex: 1;
  min-width: 0;
}

/* O header abaixo de 900px e' decidido de um lugar so': a secao "HEADER
   RESPONSIVO" no fim do arquivo. Nao acrescente regra de header aqui. */

.text-light {
  color: #ffffff;
}

.unauthorized-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(223, 26, 35, 0.14),
      transparent 35%
    ),
    radial-gradient(circle at 82% 88%, rgba(116, 4, 9, 0.14), transparent 38%),
    var(--bg-primary);
}

.unauthorized-card {
  width: min(440px, 100%);
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 2rem 1.7rem;
}

.unauthorized-icon {
  font-size: 2.3rem;
  color: var(--primary-color);
  margin-bottom: 0.7rem;
}

.unauthorized-card h2 {
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}

.unauthorized-card p {
  color: var(--text-secondary);
  margin-bottom: 1.3rem;
}

.unauthorized-login-btn.ui-button {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-dark)
  ) !important;
  color: #ffffff !important;
  border: none !important;
}

/* =========================================
   CONTEÚDO PRINCIPAL
   ========================================= */
.layout-content {
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.layout-content-shell {
  padding: 1.2rem 0 2rem;
}

/* =========================================
   CARTÕES E CONTAINERS
   ========================================= */
.p-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-speed) var(--transition-easing) !important;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.p-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

.p-card .ui-card-header {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-dark)
  ) !important;
  color: white !important;
  padding: 1.5rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.p-card .ui-card-title {
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  display: flex;
  align-items: center;
}

.p-card .ui-card-content {
  padding: 1.5rem !important;
}

/* Cartões do Dashboard */
.dashboard-card {
  background: white;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-speed) var(--transition-easing);
  height: 100%;
  border: 1px solid var(--border-color);
}

.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.dashboard-card i {
  font-size: 2rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.dashboard-card h1 {
  font-size: 3rem;
  font-weight: 300;
  margin: 1rem 0;
  color: var(--text-primary);
}

.dashboard-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* Cartões coloridos */
.card-success {
  border-left: 4px solid var(--success-color) !important;
}

.card-info {
  border-left: 4px solid var(--info-color) !important;
}

.card-warning {
  border-left: 4px solid var(--warning-color) !important;
}

/* =========================================
   FORMULÁRIOS E INPUTS
   ========================================= */
.p-fluid .ui-outputlabel {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-primary);
}

.ui-panel {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 1.5rem !important;
}

.ui-panel .ui-panel-titlebar {
  background: var(--bg-hover) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 1rem 1.5rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.ui-inputfield {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  font-size: 1rem !important;
  transition: all 0.2s ease !important;
  background-color: white !important;
}

.ui-inputfield:focus {
  outline: none !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(223, 26, 35, 0.14) !important;
}

.ui-selectonemenu {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
}

.ui-selectonemenu .ui-selectonemenu-label {
  padding: 0.75rem 1rem !important;
}

/* =========================================
   BOTÕES
   ========================================= */
.p-button {
  border-radius: var(--border-radius) !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 500 !important;
  transition: all var(--transition-speed) var(--transition-easing) !important;
  border: none !important;
}

.ui-button-primary {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-dark)
  ) !important;
  color: white !important;
}

.ui-button-primary:hover {
  background: linear-gradient(
    135deg,
    var(--primary-dark),
    var(--accent-color)
  ) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(177, 17, 27, 0.28) !important;
}

.ui-button-success {
  background: linear-gradient(135deg, var(--success-color), #388e3c) !important;
  color: white !important;
}

.ui-button-warning {
  background: linear-gradient(135deg, var(--warning-color), #f57c00) !important;
  color: white !important;
}

.ui-button-danger {
  background: linear-gradient(135deg, var(--danger-color), #d32f2f) !important;
  color: white !important;
}

/* Botões de ação rápida */
.p-commandbutton {
  background: #ffffff !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
  min-height: 42px !important;
  height: auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
}

.p-commandbutton:hover {
  background: var(--bg-hover) !important;
  border-color: var(--primary-color) !important;
  transform: translateY(-2px);
}

.p-commandbutton .ui-button-text {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}

.form-title {
  margin-right: 5px;
}

/* =========================================
   GRID E ESPAÇAMENTOS
   ========================================= */
.p-grid {
  margin: -0.75rem !important;
}

.p-col-12 {
  padding: 0.75rem !important;
}

.p-p-4 {
  padding: 2rem !important;
}

.p-mt-4 {
  margin-top: 2rem !important;
}

.p-d-flex {
  display: flex !important;
}

.p-ai-center {
  align-items: center !important;
}

.p-jc-end {
  justify-content: flex-end !important;
}

/* =========================================
   FEEDBACK E MENSAGENS
   ========================================= */
.ui-growl {
  top: 80px !important;
  right: 20px !important;
}

.ui-growl-item-container {
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border: none !important;
}

/* =========================================
   PANEL DE CONFIGURAÇÕES
   ========================================= */
.toggleable-panel {
  margin-bottom: 1rem !important;
}

.toggleable-panel .ui-panel-titlebar {
  cursor: pointer !important;
  user-select: none !important;
}

.toggleable-panel .ui-panel-content {
  padding: 1.5rem !important;
}

/* =========================================
   RESPONSIVIDADE
   ========================================= */
@media (max-width: 1200px) {
  .layout-content {
    padding: 0 1rem;
  }
}

@media (max-width: 992px) {
  .header-title span {
    font-size: 1.5rem;
  }

  .main-menu .ui-menuitem-link {
    padding: 0.6rem 0.8rem !important;
    font-size: 0.9rem !important;
  }

  .dashboard-card h1 {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  /* O header nao e' decidido aqui. Toda a sua responsividade mora na secao
     unica de @media 900 ("HEADER RESPONSIVO"), la' no fim do arquivo. Este
     bloco ja' teve dez regras de header que contradiziam aquelas e perdiam na
     cascata so' por virem antes -- nao as traga de volta. */

  .layout-content {
    margin: 1rem auto;
    padding: 0 0.75rem;
  }

  .layout-content-shell {
    padding: 0.7rem 0 1.4rem;
  }

  .p-grid {
    margin: -0.5rem !important;
  }

  .p-col-12 {
    padding: 0.5rem !important;
  }

  .p-card .ui-card-content {
    padding: 1rem !important;
  }
}

/* =========================================
   LOGIN E REGISTRO
   ========================================= */
.auth-page {
  min-height: 100vh;
  margin: 0;
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(223, 26, 35, 0.18),
      transparent 40%
    ),
    radial-gradient(circle at 82% 85%, rgba(116, 4, 9, 0.22), transparent 36%),
    linear-gradient(135deg, #c9c9c9 0%, #adadad 100%);
}

.auth-shell {
  width: min(1080px, 100%);
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(340px, 1fr);
  gap: 1.2rem;
}

.auth-shell--wide {
  width: min(1180px, 100%);
  grid-template-columns: minmax(280px, 0.85fr) minmax(520px, 1.2fr);
}

.auth-brand-panel {
  background: linear-gradient(160deg, var(--accent-color) 0%, var(--primary-color) 74%);
  border-radius: 24px;
  padding: 2rem 1.8rem;
  color: #fff;
  box-shadow: 0 18px 45px rgba(116, 4, 9, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-badge {
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.auth-brand-panel h1 {
  margin: 0.85rem 0 0.5rem;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.15;
}

.auth-brand-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
}

.auth-card {
  background: #fff;
  border-radius: 24px;
  padding: 1.7rem 1.7rem 1.4rem;
  box-shadow: 0 16px 40px rgba(34, 34, 34, 0.2);
  border: 1px solid rgba(116, 4, 9, 0.08);
}

.auth-card--narrow {
  max-width: 450px;
}

.auth-card h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #202020;
}

.auth-subtitle {
  margin: 0.3rem 0 1.2rem;
  color: #6a6a6a;
  font-size: 0.92rem;
}

.auth-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 0.9rem;
}

.auth-field {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

.auth-field--full {
  grid-column: 1 / -1;
}

.auth-label {
  margin-bottom: 0.38rem;
  color: #2f2f2f;
  font-weight: 600;
  font-size: 0.87rem;
}

.auth-field .ui-inputfield,
.auth-field .ui-selectonemenu,
.auth-field .ui-password input {
  width: 100% !important;
  border-radius: 12px !important;
  border: 1px solid #d6d6d6 !important;
  background: #fbfbfb !important;
  padding: 0.72rem 0.82rem !important;
}

.auth-field .ui-inputfield:focus,
.auth-field .ui-password input:focus,
.auth-field .ui-selectonemenu.ui-state-focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(223, 26, 35, 0.14) !important;
}

.auth-actions {
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.auth-btn {
  min-height: 44px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: none !important;
}

.auth-btn--primary {
  background: linear-gradient(140deg, var(--primary-color) 0%, #9f0f16 100%) !important;
  color: #fff !important;
}

.auth-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(159, 15, 22, 0.35) !important;
}

.auth-btn--ghost {
  background: #fff !important;
  color: var(--accent-color) !important;
  border: 1px solid rgba(116, 4, 9, 0.25) !important;
}

.auth-footnote {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  color: #6a6a6a;
  font-size: 0.84rem;
}

@media (max-width: 960px) {
  .auth-shell,
  .auth-shell--wide {
    grid-template-columns: 1fr;
  }

  .auth-card,
  .auth-card--narrow {
    max-width: none;
  }
}

@media (max-width: 680px) {
  .auth-form-grid {
    grid-template-columns: 1fr;
  }

  .auth-actions,
  .auth-footnote {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =========================================
   PERFIL MODERNO
   ========================================= */
.perfil-page {
  max-width: 1180px;
  margin: 0 auto;
}

.perfil-form {
  display: block;
}

.perfil-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
  padding: 2rem;
  border-radius: 28px;
  color: #f8fafc;
  background: linear-gradient(135deg, #6e0b13 0%, #a9121d 48%, var(--primary-color) 100%);
  box-shadow: 0 18px 40px rgba(127, 11, 20, 0.28);
}

.perfil-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.perfil-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
}

.perfil-hero__badge i {
  font-size: 2rem;
}

.perfil-hero__text h1 {
  margin: 0.1rem 0 0.35rem;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.perfil-hero__text p {
  max-width: 720px;
  margin: 0;
  color: rgba(248, 250, 252, 0.82);
  font-size: 0.98rem;
}

.perfil-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(248, 250, 252, 0.92);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.perfil-hero__summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.perfil-summary-card {
  padding: 1rem 1.1rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.perfil-summary-card__label {
  display: block;
  margin-bottom: 0.4rem;
  color: rgba(226, 232, 240, 0.74);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.perfil-summary-card strong {
  display: block;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 600;
  word-break: break-word;
}

.perfil-tag {
  margin-top: 0.1rem;
}

.perfil-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: 1.25rem;
}

.perfil-card {
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 26px !important;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
}

.perfil-card .ui-card-title {
  padding: 1.5rem 1.5rem 0 !important;
}

.perfil-card .ui-card-content {
  padding: 1.5rem !important;
}

.perfil-card__title {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.perfil-card__title i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(223, 26, 35, 0.12),
    rgba(169, 18, 29, 0.16)
  );
  color: var(--secondary-color);
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.perfil-card__title h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
}

.perfil-card__title span {
  display: block;
  margin-top: 0.15rem;
  color: #64748b;
  font-size: 0.92rem;
}

.perfil-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.perfil-field--full {
  grid-column: 1 / -1;
}

.perfil-label {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: #334155 !important;
  font-size: 0.92rem;
  font-weight: 600;
}

.perfil-input,
.perfil-page .ui-password,
.perfil-page .ui-inputfield {
  width: 100% !important;
}

.perfil-page .ui-inputfield,
.perfil-page .ui-password input {
  width: 100% !important;
  padding: 0.9rem 1rem !important;
  border: 1px solid #dbe4ef !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
}

.perfil-page .ui-inputfield:focus,
.perfil-page .ui-password input:focus {
  border-color: #c21320 !important;
  box-shadow: 0 0 0 4px rgba(194, 19, 32, 0.14) !important;
}

.perfil-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.perfil-actions--end {
  justify-content: flex-end;
}

.perfil-btn.p-commandbutton {
  min-height: 48px !important;
  padding: 1rem 1.2rem !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.perfil-btn--primary {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)) !important;
  color: #ffffff !important;
  border: none !important;
}

.perfil-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(177, 17, 27, 0.28) !important;
}

.perfil-btn--ghost,
.perfil-btn--secondary {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #d9e2ec !important;
}

.perfil-btn--ghost:hover,
.perfil-btn--secondary:hover {
  background: #f8fafc !important;
  transform: translateY(-1px);
}

.perfil-note {
  color: #64748b;
  font-size: 0.9rem;
}

@media (max-width: 992px) {
  .perfil-hero__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .perfil-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .perfil-page {
    padding: 0 0 1rem;
  }

  .perfil-hero {
    padding: 1.35rem;
    border-radius: 22px;
  }

  .perfil-hero__content {
    align-items: flex-start;
  }

  .perfil-hero__summary {
    grid-template-columns: 1fr;
  }

  .perfil-fields {
    grid-template-columns: 1fr;
  }

  .perfil-card .ui-card-title,
  .perfil-card .ui-card-content {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }

  .perfil-actions {
    flex-direction: column;
  }

  .perfil-actions .perfil-btn {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .header-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .header-title i {
    margin-right: 0;
    font-size: 1.5rem;
  }

  .header-title span {
    font-size: 1.2rem;
  }

  .main-menu {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .dashboard-card {
    padding: 1rem;
  }

  .dashboard-card h1 {
    font-size: 2rem;
  }
}

/* =========================================
   ANIMAÇÕES E EFEITOS ESPECIAIS
   ========================================= */
@keyframes fadeInSoft {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeInSoft 0.5s var(--transition-easing);
}

/* Efeito de loading */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================
   UTILITÁRIOS
   ========================================= */
.text-center {
  text-align: center;
}

.text-muted {
  color: var(--text-light);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.rounded {
  border-radius: var(--border-radius);
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-emitida {
  background-color: rgba(76, 175, 80, 0.1);
  color: var(--success-color);
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.status-pendente {
  background-color: rgba(255, 152, 0, 0.1);
  color: var(--warning-color);
  border: 1px solid rgba(255, 152, 0, 0.2);
}

.status-erro {
  background-color: rgba(244, 67, 54, 0.1);
  color: var(--danger-color);
  border: 1px solid rgba(244, 67, 54, 0.2);
}
/* =========================================
   ESTILOS E-COMMERCE - PÁGINA INDEX
   ========================================= */

.ecommerce-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0 1rem;
}

.content-with-padding {
  padding: 0;
}

.home-banner-carousel {
  margin: 0 0 1.4rem;
}

.home-banner-carousel__frame {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #f7f7f7;
  aspect-ratio: 118 / 37;
  min-height: 220px;
}

.home-banner-carousel__track {
  display: flex;
  width: 500%;
  height: 100%;
  animation: homeBannerScroll 25s infinite;
}

.home-banner-carousel__slide {
  flex: 0 0 20%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: #f7f7f7;
}

.home-banner-carousel__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes homeBannerScroll {
  0% {
    transform: translateX(0);
  }

  16% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-20%);
  }

  36% {
    transform: translateX(-20%);
  }

  40% {
    transform: translateX(-40%);
  }

  56% {
    transform: translateX(-40%);
  }

  60% {
    transform: translateX(-60%);
  }

  76% {
    transform: translateX(-60%);
  }

  80% {
    transform: translateX(-80%);
  }

  96% {
    transform: translateX(-80%);
  }

  100% {
    transform: translateX(0);
  }
}

.home-hero-card {
  position: relative;
  background: linear-gradient(125deg, #59090f 0%, #920f18 42%, var(--primary-color) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  margin: 0 0 2rem;
  overflow: hidden;
}

.home-hero-card::before,
.home-hero-card::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.home-hero-card::before {
  width: 380px;
  height: 380px;
  right: -110px;
  top: -110px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0) 72%
  );
}

.home-hero-card::after {
  width: 260px;
  height: 260px;
  left: -80px;
  bottom: -120px;
  background: radial-gradient(
    circle,
    rgba(255, 206, 210, 0.22) 0%,
    rgba(255, 206, 210, 0) 72%
  );
}

.home-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr minmax(260px, 360px);
  gap: 2rem;
  align-items: center;
  padding: 2.2rem;
}

.home-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
}

.home-hero-title {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  margin-bottom: 0.9rem;
  color: #ffffff;
  letter-spacing: -0.03em;
}

.home-hero-subtitle {
  font-size: 1.03rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.35rem;
  max-width: 58ch;
}

.home-hero-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

.home-hero-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

.home-hero-benefits li strong {
  display: block;
  color: #ffffff;
  line-height: 1.1;
  margin-top: 0.1rem;
}

.home-hero-benefits li p {
  margin: 0.2rem 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
}

.benefit-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.17);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.benefit-icon i {
  font-size: 0.95rem;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.home-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  border-radius: 12px;
  padding: 0.78rem 1.2rem;
  transition: all var(--transition-speed) var(--transition-easing);
}

.home-hero-cta-primary {
  background: #ffffff;
  color: #8e111a;
}

.home-hero-cta-primary:hover {
  background: #fff2f2;
  transform: translateY(-2px);
}

.home-hero-cta-secondary {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.home-hero-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.home-hero-visual {
  min-height: 320px;
  border-radius: 22px;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.06)
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  backdrop-filter: blur(10px);
}

.home-hero-photo-wrap {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.home-hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.home-hero-kpi-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

.home-hero-kpi-card {
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}

.home-hero-kpi-card span {
  display: block;
  font-size: 0.79rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.25rem;
}

.home-hero-kpi-card strong {
  display: block;
  color: #ffffff;
  font-size: 1.25rem;
}

.home-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  justify-content: center;
  border-radius: 999px;
  padding: 0.65rem 0.9rem;
  font-size: 0.88rem;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.home-products-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.2rem;
  margin-bottom: 1.1rem;
}

.home-products-heading {
  max-width: 740px;
}

.home-products-eyebrow {
  display: inline-flex;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.74rem;
  color: #9f3035;
  font-weight: 700;
}

.home-products-heading h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: #1e293b;
}

.home-products-heading h2 i {
  color: var(--secondary-color);
}

.home-products-heading p {
  margin: 0.45rem 0 0;
  color: #4b5563;
}

.home-sync-panel {
  margin-top: 0;
  border: 1px solid #f4d3d6 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%) !important;
  box-shadow: none !important;
}

.home-sync-panel .ui-panel-titlebar {
  background: transparent !important;
  border: none !important;
  color: #8d1620 !important;
  font-weight: 700 !important;
  padding-bottom: 0 !important;
}

.home-sync-panel .ui-panel-content {
  border: none !important;
  padding-top: 0.6rem !important;
}

.home-sync-btn.ui-button {
  margin-right: 0 !important;
}

/* =========================================
   LABORATÓRIOS PARCEIROS (redesign)
   ========================================= */
.home-partners-section {
  margin: 2.5rem 0 0;
  padding: 2.5rem 2rem;
  background: linear-gradient(135deg, #1a0203 0%, #3a0508 60%, #5a0a0e 100%);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.home-partners-section::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(223, 26, 35, 0.15);
  pointer-events: none;
}

.home-partners-section::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -40px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(223, 26, 35, 0.08);
  pointer-events: none;
}

.home-partners-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.home-partners-header-text {
  /* NAO volte a por flex-shrink:0 aqui. Com ele o bloco mantinha a largura do
     subtitulo numa linha so' (~439px) e, como .home-partners-section tem
     overflow:hidden, o excedente era cortado em vez de rolar -- no celular
     sumia o fim da frase. Encolher so' acontece quando falta espaco, entao o
     desktop nao muda. */
  min-width: 0;
}

.home-partners-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.35rem;
}

.home-partners-title {
  margin: 0 0 0.25rem;
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.home-partners-subtitle {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.home-partners-divider {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(223, 26, 35, 0.6), transparent);
}

.home-partners-track-wrapper {
  position: relative;
  z-index: 1;
}

.home-partners-track {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.home-partner-card {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.4rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  cursor: default;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
  backdrop-filter: blur(4px);
}

.home-partner-card:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(223, 26, 35, 0.55);
  transform: translateY(-4px);
}

.home-partner-logo {
  width: 100%;
  max-width: 110px;
  max-height: 52px;
  object-fit: contain;
  opacity: 0.75;
  transition: opacity 0.25s, filter 0.25s;
}

.home-partner-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  transition: color 0.25s;
}

.home-partner-card:hover .home-partner-name {
  color: rgba(255, 255, 255, 0.85);
}

.home-search-bar {
  position: relative;
  margin-bottom: 1.2rem;
}

.home-search-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  z-index: 2;
}

.home-search-input.ui-inputfield {
  width: 100%;
  padding: 0.88rem 1rem 0.88rem 2.6rem !important;
  border-radius: 12px !important;
  border: 1px solid #d8dee6 !important;
  background: #ffffff !important;
}

.home-search-input.ui-inputfield:focus {
  border-color: #c21320 !important;
  box-shadow: 0 0 0 4px rgba(194, 19, 32, 0.12) !important;
}

.catalog-page {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.catalog-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #f3f3f3;
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
}

.catalog-breadcrumb a {
  color: #f3f3f3;
  text-decoration: none;
}

.catalog-breadcrumb a:hover {
  text-decoration: underline;
}

.catalog-layout {
  display: grid;
  grid-template-columns: minmax(250px, 300px) 1fr;
  gap: 1.5rem;
  align-items: start;
}

.catalog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.catalog-filter-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  padding: 1.2rem;
}

.catalog-filter-header h3 {
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 0.9rem;
}

.catalog-category-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.catalog-category-option {
  display: block;
  width: 100%;
  color: var(--text-secondary) !important;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  transition: all var(--transition-speed) var(--transition-easing);
}

.catalog-category-option:hover {
  background: var(--bg-primary);
  color: var(--text-primary) !important;
}

.catalog-category-option.active {
  background: rgba(223, 26, 35, 0.12);
  color: var(--accent-color) !important;
  font-weight: 600;
}

.catalog-price-fields {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.catalog-input-group label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.catalog-filter-actions {
  display: flex;
  gap: 0.55rem;
  margin-top: 1rem;
}

.catalog-filter-btn {
  flex: 1;
}

/* .catalog-main deixou de ser um cartão: no redesign quem tem fundo/borda é o
   .catalog-results-header e cada .product-card, então a moldura em volta virava
   cartão dentro de cartão. */
.catalog-main {
  min-width: 0;
}

.catalog-results-header {
  margin-bottom: 1rem;
}

.catalog-results-header h1 {
  font-size: 1.8rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.catalog-results-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.catalog-main .ui-datagrid-content {
  padding: 0 !important;
}


.product-category-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

/* Banner Hero */
.hero-banner {
  background: white;
  color: white;
  padding: 3rem 2rem;
  text-align: center;
  border-radius: var(--border-radius);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.hero-title i {
  font-size: 2.5rem;
}

.hero-subtitle {
  font-size: 1.2rem;
  opacity: 0.95;
  font-weight: 300;
}

/* Seção de Busca */
.search-section {
  margin-bottom: 2rem;
}

.search-wrapper {
  display: flex;
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.search-input {
  flex: 1;
  height: 3.5rem !important;
  font-size: 1rem !important;
  border-radius: 50px !important;
  padding: 0 1.5rem !important;
  border: 2px solid var(--border-color) !important;
  transition: all 0.3s ease !important;
}

.search-input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 4px rgba(223, 26, 35, 0.14) !important;
}

.search-button {
  height: 3.5rem !important;
  width: 3.5rem !important;
  border-radius: 50% !important;
  background: var(--primary-color) !important;
  border: none !important;
}

/* Seção de Produtos */
.products-section {
  background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
  padding: 2rem;
  border: 1px solid #f5d9db;
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(31, 41, 55, 0.06);
  max-width: 1400px;
  margin: 0 auto;
}

.products-section div .ui-datagrid-content {
  border: none !important;
}

.home-products-grid .ui-datagrid-content {
  background: transparent;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border-color);
}

.section-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.section-title i {
  color: var(--primary-color);
}

/* Card do Produto */
.product-card {
  background: white;
  border: 1px solid #e9eef5;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(100, 17, 23, 0.16);
  border-color: #d77d84;
}

/* Imagem do Produto */
.product-image-wrapper {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: #cbd5e0;
}

.product-image-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.75rem;
  display: block;
}

.product-badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

.badge-new {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

/* Informações do Produto */
.product-info {
  padding: 1rem 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
  align-items: stretch;
  text-align: left;
}

.product-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
  height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-code {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 500;
}

.product-details {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0.55rem 0;
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.detail-item i {
  color: var(--primary-color);
  font-size: 0.85rem;
}

/* Preço e Footer */
.product-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

.product-price-section {
  margin-bottom: 0.8rem;
  text-align: left;
}

.product-price {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--price-emphasis);
  line-height: 1.1;
  margin-bottom: 0.3rem;
}

.product-installment {
  font-size: 0.8rem;
  color: #6b7280;
}

.product-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.add-cart-btn {
  flex: 1 !important;
  height: 2.7rem !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.product-add-cart-btn.ui-button {
  width: 100%;
  background: var(--primary-color) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 16px rgba(177, 17, 27, 0.24) !important;
  justify-content: center;
}

.product-add-cart-btn.ui-button:hover,
.product-add-cart-btn.ui-button:focus {
  background: var(--primary-dark) !important;
  border-color: transparent !important;
}

.product-add-cart-btn .ui-button-icon-left,
.product-add-cart-btn .ui-button-text {
  color: #ffffff !important;
}

.favorite-btn {
  width: 2.8rem !important;
  height: 2.8rem !important;
}

.product-stock {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: var(--success-color);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 500;
}

.product-stock i {
  font-size: 1rem;
}

/* A grade do p:dataGrid é montada pela camada de redesign (CSS Grid em
   .ui-datagrid-content). As larguras por coluna em flex/max-width que existiam
   aqui foram removidas: elas prendiam o card a 25%/33% do container. */

/* ===== Direção B — ênfase de preço (produto e carrinho) =====
   CTAs mantêm o padrão existente, que já é bom: VERMELHO para "Adicionar"
   e VERDE para finalizar compra (Ir para Checkout / Confirmar). Aqui só
   reforçamos os PREÇOS. O botão de compra da página de produto (que estava
   azul) foi corrigido para vermelho na sua regra original. */
.product-marketplace-price-value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--price-emphasis);
}
.cart-page-item-subtotal strong,
.cart-summary-total strong {
  color: var(--price-emphasis);
  font-weight: 800;
}

/* Catálogo: filtros viram botão/painel sob demanda no mobile (toggle CSS puro) */
.catalog-filters-toggle { display: none; }
.catalog-filters-toggle-btn { display: none; }
/* O painel dobrável por display:none/flex em @media 768 saiu daqui: a camada de
   redesign faz a gaveta em @media 900 com transform, e o toggle agora é irmão
   anterior de .catalog-layout — o seletor antigo nem casaria mais. */

/* Rodapé Informativo */
.info-footer {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius);
  margin-top: 2rem;
  box-shadow: var(--shadow-sm);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.info-item {
  text-align: center;
  padding: 1rem;
}

.info-item i {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.info-item h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0.5rem 0;
}

.info-item p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}

/* =========================================
   VISAO DO PRODUTO - SIMPLES E FUNCIONAL
   ========================================= */
.product-page {
  padding: 1.5rem 0;
}

.product-page-form {
  max-width: 1180px;
  margin: 0 auto;
}

.product-page-top-link {
  margin-bottom: 0.9rem;
}

.product-page-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #3483fa;
  text-decoration: none;
  font-size: 0.95rem;
}

.product-page-back-link:hover {
  text-decoration: underline;
}

.product-marketplace-card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}

.product-marketplace-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
}

.product-marketplace-media {
  border-right: 1px solid #f0f0f0;
  padding-right: 1rem;
}

.product-marketplace-image {
  min-height: 420px;
  border-radius: 6px;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-marketplace-image-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.2rem;
  display: block;
}

.product-marketplace-image i {
  font-size: 5rem;
  color: #c1c1c1;
}

.product-marketplace-details {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.product-marketplace-tag {
  width: fit-content;
}

.product-marketplace-title {
  margin: 0;
  color: #333333;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.3;
}

.product-marketplace-code {
  margin: 0;
  color: #666666;
  font-size: 0.88rem;
}

.product-marketplace-price-box {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 0;
}

.product-marketplace-price-label {
  font-size: 0.82rem;
  color: #666666;
}

.product-marketplace-price-value {
  font-size: 2rem;
  line-height: 1.1;
  color: #111111;
  font-weight: 400;
}

.product-marketplace-price-note {
  font-size: 0.85rem;
  color: #00a650;
}

.product-marketplace-info-list {
  display: grid;
  gap: 0.55rem;
}

.product-marketplace-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #ededed;
  border-radius: 6px;
}

.product-marketplace-info-item span {
  color: #666666;
  font-size: 0.88rem;
}

.product-marketplace-info-item strong {
  color: #000000;
  font-size: 0.9rem;
  text-align: right;
  word-break: break-word;
}

.product-marketplace-buy-btn.ui-button {
  margin-top: 0.35rem;
  min-height: 2.9rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--primary-color) !important;
  background: var(--primary-color) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.product-marketplace-buy-btn.ui-button:hover,
.product-marketplace-buy-btn.ui-button:focus {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

.product-marketplace-buy-btn .ui-button-icon-left,
.product-marketplace-buy-btn .ui-button-text {
  color: #ffffff !important;
}

.product-marketplace-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid #d9e7ff;
  border-radius: 6px;
  text-decoration: none;
  /* #3483fa dava 3,43:1 sobre este fundo, abaixo dos 4,5:1 de AA. O --info do
     proprio tema da' 5,65:1 e mantem a identidade azul. */
  color: var(--info);
  background: #f3f9ff;
  font-weight: 600;
}

.product-marketplace-secondary-btn:hover {
  background: #e8f3ff;
}

.product-marketplace-empty {
  margin: 1rem auto 0;
  max-width: 580px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 2rem 1rem;
}

.product-marketplace-empty i {
  font-size: 3rem;
  color: #bfbfbf;
  margin-bottom: 0.6rem;
}

.product-marketplace-empty h2 {
  margin: 0 0 0.9rem;
  color: #333333;
  font-size: 1.35rem;
  font-weight: 500;
}

.product-marketplace-empty a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.55rem 0.95rem;
  background: #3483fa;
  color: #ffffff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 992px) {
  .product-marketplace-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .product-marketplace-media {
    border-right: 0;
    border-bottom: 1px solid #f0f0f0;
    padding-right: 0;
    padding-bottom: 1rem;
  }

  .product-marketplace-image {
    min-height: 280px;
  }
}

@media (max-width: 576px) {
  .product-marketplace-grid {
    padding: 1rem;
  }

  .home-banner-carousel__frame {
    aspect-ratio: 16 / 9;
    min-height: 180px;
    border-radius: 18px;
  }

  .product-marketplace-title {
    font-size: 1.15rem;
  }

  .product-marketplace-price-value {
    font-size: 1.65rem;
  }

  .product-marketplace-info-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .product-marketplace-info-item strong {
    text-align: left;
  }
}

/* =========================================
   MEUS PEDIDOS - MODERNO VERMELHO/BRANCO
   ========================================= */
.orders-page {
  max-width: 1180px;
  margin: 0 auto;
}

.orders-hero {
  background: linear-gradient(135deg, #770a11 0%, #b4101c 55%, var(--primary-color) 100%);
  color: #fff;
  border-radius: 24px;
  padding: 1.7rem;
  box-shadow: 0 18px 36px rgba(154, 12, 22, 0.25);
  margin-bottom: 1.4rem;
}

.orders-hero__content h1 {
  margin: 0.3rem 0;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  letter-spacing: -0.02em;
}

.orders-hero__content p {
  margin: 0;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.86);
}

.orders-hero__eyebrow {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.14);
}

.orders-kpis {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.orders-kpi {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 0.9rem 1rem;
}

.orders-kpi__label {
  display: block;
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.35rem;
}

.orders-kpi strong {
  display: block;
  font-size: 1.08rem;
}

.orders-empty {
  background: #fff;
  border: 1px solid #f0d1d3;
  border-radius: 22px;
  padding: 2.1rem 1.2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(24, 24, 27, 0.05);
}

.orders-empty i {
  font-size: 2.6rem;
  color: var(--primary-color);
  margin-bottom: 0.6rem;
}

.orders-empty h2 {
  margin-bottom: 0.35rem;
  color: #7e1218;
}

.orders-empty p {
  color: #6b7280;
}

.orders-btn.orders-btn--primary.ui-button {
  margin-top: 0.7rem;
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 0.75rem 1.25rem !important;
}

/* Ações do pedido não pago em "Minhas Compras". Só classes do projeto: as regras
   de .ui-button do tema já cuidam do resto. */
.order-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid #f0d1d3;
  background: #fffaf9;
}

.order-actions__hint {
  flex: 1 1 100%;
  font-size: 0.8125rem;
  color: #6b7280;
}

/* .orders-btn--primary traz margin-top do uso no estado vazio; aqui desalinharia. */
.order-actions .orders-btn.orders-btn--primary.ui-button {
  margin-top: 0;
}

.orders-btn.orders-btn--ghost.ui-button {
  margin-top: 0;
  background: transparent !important;
  border: 1px solid #d1d5db !important;
  color: #4b5563 !important;
  border-radius: 12px !important;
  padding: 0.6rem 1rem !important;
}

.orders-btn.orders-btn--ghost.ui-button:hover {
  background: #f3f4f6 !important;
  color: #b91c1c !important;
}

@media (max-width: 600px) {
  .order-actions {
    padding: 0.75rem 0.9rem;
  }

  .order-actions .ui-button {
    flex: 1 1 auto;
  }
}

.orders-list {
  display: grid;
  gap: 1rem;
}

.order-card {
  border: 1px solid #f0d1d3;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 26px rgba(24, 24, 27, 0.05);
}

.order-card__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid #f5d9db;
  background: linear-gradient(180deg, #fff7f7 0%, #fff 100%);
}

.order-card__label {
  display: inline-block;
  font-size: 0.74rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--secondary-color);
}

.order-card__header h3 {
  margin: 0.22rem 0 0.34rem;
  color: #1f2937;
  font-size: 1.07rem;
}

.order-card__header p {
  margin: 0;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.order-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
}

.order-card__meta strong {
  color: #991b1b;
  font-size: 1rem;
}

.order-card__body {
  padding: 0.9rem 1.2rem 1.1rem;
}

.order-items {
  border: 1px solid #f3e5e6;
  border-radius: 14px;
  overflow: hidden;
}

.order-items__head {
  padding: 0.65rem 0.8rem;
  background: #fff8f8;
  border-bottom: 1px solid #f3e5e6;
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: #9f3035;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.order-item-row {
  display: flex;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.72rem 0.8rem;
  border-bottom: 1px solid #f8eeee;
}

.order-item-row:last-child {
  border-bottom: 0;
}

.order-item-row strong {
  color: #111827;
}

.order-item-row small {
  display: block;
  margin-top: 0.2rem;
  color: #6b7280;
}

.order-extra {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.order-extra__line {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #4b5563;
  font-size: 0.88rem;
  word-break: break-word;
}

.order-extra__line i {
  color: var(--secondary-color);
}

/* Responsividade */
@media (max-width: 1200px) {
  .orders-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-banner-carousel__slide {
    padding: 0.35rem;
  }
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .catalog-layout {
    grid-template-columns: 1fr;
  }

  .orders-kpis {
    grid-template-columns: 1fr;
  }

  .order-card__header {
    flex-direction: column;
  }

  .order-card__meta {
    align-items: flex-start;
  }

  .order-item-row {
    flex-direction: column;
  }

  .home-products-header {
    flex-direction: column;
    align-items: stretch;
  }

  .home-sync-panel {
    width: 100%;
  }

  .home-partners-track {
    flex-wrap: wrap;
  }

  .home-partner-card {
    flex: 0 0 calc(50% - 0.5rem);
  }

  .home-hero-content {
    grid-template-columns: 1fr;
    padding: 1.35rem;
    gap: 1rem;
  }

  .home-hero-card {
    border-radius: 22px;
  }

  .home-hero-title {
    font-size: clamp(1.65rem, 7vw, 2.25rem);
  }

  .home-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .home-hero-cta {
    width: 100%;
  }

  .home-hero-visual {
    min-height: auto;
  }

  .home-hero-photo {
    aspect-ratio: 16 / 10;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .product-price {
    font-size: 1.2rem;
  }

  .product-info {
    padding: 0.9rem;
  }

  .section-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .info-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .home-hero-benefits li {
    padding: 0.65rem;
  }

  .home-hero-pill {
    font-size: 0.8rem;
  }

  .products-section {
    padding: 1.1rem;
  }

  .catalog-main {
    padding: 1rem;
  }

  .search-wrapper {
    flex-direction: column;
  }

  .search-button {
    width: 100% !important;
    border-radius: var(--border-radius) !important;
  }
}

/* Animações */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card {
  animation: fadeIn 0.5s ease-out;
}

/* Melhorias no Paginator */
.ui-paginator {
  background: transparent !important;
  border: none !important;
  padding: 2rem 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.3rem !important;
}

.ui-paginator .ui-paginator-page {
  border-radius: 50% !important;
  min-width: 2.5rem !important;
  height: 2.5rem !important;
  margin: 0 0.2rem !important;
}

.ui-paginator .ui-state-active {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #ffffff;
}

.ui-paginator .ui-paginator-rpp-options {
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--text-primary) !important;
  padding: 0.45rem 2rem 0.45rem 0.75rem !important;
  min-height: 2.4rem !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-sm);
}

.ui-paginator .ui-paginator-rpp-options:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(223, 26, 35, 0.15) !important;
  outline: none !important;
}

.ui-paginator .ui-selectonemenu {
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  min-width: 6rem !important;
  box-shadow: var(--shadow-sm);
}

.ui-paginator .ui-selectonemenu:hover,
.ui-paginator .ui-selectonemenu.ui-state-focus {
  border-color: var(--primary-color) !important;
}

.ui-paginator .ui-selectonemenu .ui-selectonemenu-label {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  padding: 0.5rem 0.75rem !important;
}

.ui-paginator .ui-selectonemenu .ui-selectonemenu-trigger {
  border-left: 1px solid var(--border-color) !important;
  width: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================
   CARRINHO DE COMPRAS
   ========================================= */

.cart-container {
  display: flex;
  align-items: center;
  margin: 0 1.5rem;
  position: relative;
}

.cart-icon-btn {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  color: var(--text-on-brand);
  cursor: pointer;
  position: relative;
  padding: 0.5rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-icon-btn.ui-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 5px !important;
  padding: 10px !important;
  color: var(--text-on-brand) !important;
}

.cart-icon-btn.ui-button .ui-button-icon-left,
.cart-icon-btn.ui-button .ui-button-icon-right {
  color: inherit !important;
}

.cart-icon-btn.ui-button:hover,
.cart-icon-btn.ui-button:focus,
.cart-icon-btn.ui-button.ui-state-hover,
.cart-icon-btn.ui-button.ui-state-focus,
.cart-icon-btn.ui-button:active,
.cart-icon-btn.ui-button.ui-state-active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  transform: scale(1.1);
}

.ui-paginator .ui-paginator-page.ui-state-active {
  color: #ffffff !important;
}

.cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--danger-color);
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cart-sidebar {
  position: fixed;
  right: -400px;
  top: 0;
  width: 400px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  transition: right 0.3s ease;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cart-sidebar.active {
  right: 0;
}

.cart-header {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-dark)
  );
  color: white;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.cart-header h3 {
  margin: 0;
  font-size: 1.3rem;
}

.cart-close-btn {
  background: transparent;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s;
}

.cart-close-btn:hover {
  transform: rotate(90deg);
}

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.cart-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  background: var(--bg-secondary);
}

.cart-item-image {
  width: 80px;
  height: 80px;
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 2rem;
  flex-shrink: 0;
}

.cart-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cart-item-name {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.95rem;
}

.cart-item-price {
  color: var(--success-color);
  font-weight: 600;
  font-size: 0.9rem;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.cart-item-remove {
  background: var(--danger-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
}

.cart-item-remove:hover {
  background: #d32f2f;
  transform: scale(1.1);
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
  text-align: center;
  gap: 1rem;
}

.cart-empty i {
  font-size: 3rem;
  opacity: 0.3;
}

.cart-footer {
  border-top: 2px solid var(--border-color);
  padding: 1.5rem;
  background: var(--bg-primary);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.cart-total-value {
  color: var(--success-color);
  font-size: 1.3rem;
}

.cart-checkout-btn {
  width: 100%;
  padding: 0.8rem;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-dark)
  );
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: var(--shadow-md);
}

.cart-checkout-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  z-index: 1040;
  display: none;
}

.cart-overlay.active {
  background: rgba(0, 0, 0, 0.5);
  display: block;
}

.cart-page {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.cart-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #000000;
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
}

.cart-breadcrumb a {
  color: #000000;
  text-decoration: none;
}

.cart-subtitle {
  color: var(--text-primary);
}

.cart-breadcrumb a:hover {
  text-decoration: underline;
}

.cart-empty-state {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  padding: 3rem 1.5rem;
  text-align: center;
}

.cart-empty-state h2 {
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.cart-empty-state p {
  color: var(--text-secondary);
  margin-bottom: 1.2rem;
}

.cart-continue-link {
  display: inline-block;
  background: var(--primary-color);
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.75rem 1.2rem;
  font-weight: 600;
}

.cart-continue-link:hover {
  background: var(--accent-color);
}

.cart-page-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.5rem;
  align-items: start;
}

.cart-main-panel {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cart-main-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.cart-main-header h1 {
  font-size: 1.8rem;
  color: var(--text-primary);
}

.cart-items-list {
  display: flex;
  flex-direction: column;
}

.cart-page-item-image {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  overflow: hidden;
}

.cart-page-item-image-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.35rem;
  display: block;
}

.cart-page-item-info h3 {
  font-size: 1.08rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.cart-page-item-info p {
  color: var(--text-secondary);
  font-size: 0.86rem;
  margin-bottom: 0.55rem;
}

.cart-page-item-price {
  color: var(--primary-color);
  font-weight: 700;
}

.cart-page-qty-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
}

/* filho direto pelo mesmo motivo da regra equivalente na camada de redesign:
   o <span class="ui-button-text"> de dentro de cada botao nao e' o numero */
.cart-page-qty-controls > span {
  min-width: 1.8rem;
  text-align: center;
  font-weight: 700;
  color: var(--text-primary);
}

.cart-qty-btn.ui-button {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 8px !important;
  border: none !important;
  background: #ffffff !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.cart-qty-btn.ui-button:hover,
.cart-qty-btn.ui-button:focus {
  background: #eceff3 !important;
}

.cart-page-item-subtotal {
  text-align: right;
}

.cart-page-item-subtotal p {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.cart-page-item-subtotal strong {
  color: var(--primary-color);
  font-size: 1rem;
}

.cart-remove-btn.ui-button {
  border: none !important;
  background: #fff5f5 !important;
  color: var(--primary-color) !important;
  border-radius: 8px !important;
  width: 2.3rem !important;
  height: 2.3rem !important;
  box-shadow: none !important;
}

.cart-remove-btn.ui-button:hover,
.cart-remove-btn.ui-button:focus {
  background: #ffe9e9 !important;
}

.cart-main-footer {
  padding: 1.2rem 1.5rem;
}

.cart-back-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}

.cart-back-link:hover {
  text-decoration: underline;
}

.cart-summary-panel {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  padding: 1.3rem;
  position: sticky;
  top: calc(var(--header-height) + 1rem);
}

.cart-summary-panel h2 {
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.cart-summary-items {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  color: var(--text-primary);
}

.cart-summary-row.small {
  font-size: 0.86rem;
  color: var(--text-secondary);
}

.cart-summary-values {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cart-free-shipping-note {
  color: var(--success-color);
  font-size: 0.82rem;
  font-weight: 600;
}

.cart-summary-total {
  margin: 1rem 0 1rem;
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-summary-total span {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cart-summary-total strong {
  font-size: 1.6rem;
  color: var(--primary-color);
}

.cart-checkout-main-btn.ui-button {
  width: 100% !important;
  margin-bottom: 0.7rem;
  border: none !important;
  background: var(--success-color) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 0.75rem !important;
}

.cart-checkout-main-btn.ui-button:hover,
.cart-checkout-main-btn.ui-button:focus {
  background: #3e8d42 !important;
}

.cart-clear-btn.ui-button {
  width: 100% !important;
  border: none !important;
  background: #fff0f0 !important;
  color: var(--primary-color) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 0.75rem !important;
}

.cart-clear-btn.ui-button:hover,
.cart-clear-btn.ui-button:focus {
  background: #ffe2e2 !important;
}

.cart-tip-box {
  margin-top: 1rem;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  border-radius: 8px;
  padding: 0.8rem;
  color: #1e3a8a;
  font-size: 0.85rem;
}

.cart-tip-title {
  font-weight: 700;
  margin-bottom: 0.2rem;
}

/* O carrinho no mobile e' decidido de um lugar so': a secao "CARRINHO
   RESPONSIVO" no fim do arquivo. Nao acrescente regra de carrinho aqui.

   Aqui viviam um @media 1100 que perdia para uma regra posterior e um @media
   860 que reorganizava o item com grid-template-areas -- inerte desde que o
   redesign trocou o .cart-page-item de display:grid para display:flex. */

/* =========================================
   CHECKOUT
   ========================================= */

.checkout-page {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.checkout-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #f3f3f3;
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
}

.checkout-breadcrumb a {
  color: #f3f3f3;
  text-decoration: none;
}

.checkout-breadcrumb a:hover {
  text-decoration: underline;
}

.checkout-steps {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
}

.checkout-step-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.checkout-step-dot {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #d1d5db;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.checkout-step-dot.active {
  background: var(--primary-color);
}

.checkout-step-label {
  color: #9ca3af;
  font-weight: 600;
}

.checkout-step-label.active {
  color: var(--text-primary);
}

.checkout-step-line {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  margin: 0 0.8rem;
  background: #e5e7eb;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.5rem;
  align-items: start;
}

.checkout-form-panel,
.checkout-summary-panel {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.checkout-form-panel {
  padding: 1.4rem;
}

.checkout-form-panel h2 {
  font-size: 1.7rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.checkout-field {
  margin-bottom: 0.9rem;
}

.checkout-field label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-primary);
  font-weight: 600;
}

.checkout-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.checkout-input {
  width: 100%;
}

.checkout-security-tip {
  margin-top: 1rem;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  border-radius: 8px;
  padding: 0.8rem;
  color: #1e3a8a;
}

.checkout-security-tip p {
  margin-top: 0.25rem;
  font-size: 0.88rem;
}

.checkout-actions {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 0.65rem;
}

.checkout-btn.ui-button {
  flex: 1;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 700 !important;
}

.checkout-btn.back.ui-button {
  background: #f3f4f6 !important;
  color: #111827 !important;
}

.checkout-btn.next.ui-button {
  background: var(--primary-color) !important;
  color: #ffffff !important;
}

.checkout-btn.confirm.ui-button {
  background: var(--success-color) !important;
  color: #ffffff !important;
}

.checkout-summary-panel {
  padding: 1.3rem;
  position: sticky;
  top: calc(var(--header-height) + 1rem);
}

.checkout-summary-panel h2 {
  font-size: 1.25rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.checkout-summary-items {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}

.checkout-summary-row.small {
  color: var(--text-secondary);
  font-size: 0.86rem;
}

.checkout-summary-values {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.checkout-summary-total {
  margin-top: 0.9rem;
  border-top: 1px solid var(--border-color);
  padding-top: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.checkout-summary-total span {
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 700;
}

.checkout-summary-total strong {
  color: var(--primary-color);
  font-size: 1.55rem;
}

@media (max-width: 1100px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }

  .checkout-summary-panel {
    position: static;
  }
}

/* O checkout no mobile e' decidido de um lugar so': a secao "CHECKOUT
   RESPONSIVO" no fim do arquivo. Nao acrescente regra de checkout aqui.

   Aqui viviam o flex-direction:column e o align-items:stretch dos passos. O
   redesign redefiniu .checkout-steps sem mencionar flex-direction, entao o
   column daqui sobrevivia e se juntava ao align-items:center de la' -- uma
   combinacao que ninguem escreveu, e que desalinhava as bolinhas 1/2/3. */

/* =========================================
   FOOTER
   ========================================= */
/* O rodapé é escuro (a cor vem de .site-footer na camada de redesign). O fundo
   branco que existia aqui cobria essa cor e só deixava aparecer as faixas
   escuras nas laterais — e ainda deixava o texto claro ilegível. */
.site-footer {
  margin-top: 5rem;
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section {
  display: flex;
  flex-direction: column;
}

/* Company Info Section */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.footer-logo i {
  font-size: 2rem;
  color: #ffffff;
}

.footer-brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
}

.footer-description {
  font-size: 0.9rem;
  color: #c7ced8;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-decoration: none;
  transition: all var(--transition-speed) var(--transition-easing);
}

.social-link:hover {
  transform: translateY(-2px);
}

.social-link i {
  font-size: 1.1rem;
}

/* Footer Sections */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  font-size: 0.9rem;
  color: #c7ced8;
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-easing);
}

/* Contact Section */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #c7ced8;
}

.footer-contact i {
  font-size: 1rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  color: #c7ced8;
}

.footer-contact span {
  line-height: 1.5;
}

/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 2rem;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.85rem;
  color: #8b95a5;
  margin: 0.25rem 0;
}

.footer-cnpj {
  margin-top: 0.5rem;
}

/* Footer Responsiveness */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
  }
}

/* =========================================
   HEADER GLOBAL SEARCH BAR
   ========================================= */
.header-search-block {
  flex: 1;
  max-width: 580px;
  margin: 0 1.2rem;
}

.header-search-bar {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.header-search-bar:focus-within {
  border-color: #ffa726;
  box-shadow: 0 2px 8px rgba(255, 167, 38, 0.25);
}

.header-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  color: var(--text-primary);
  background: transparent;
  min-width: 0;
}

.header-search-input::placeholder {
  color: #9ca3af;
}

.header-search-btn {
  background: var(--primary-color);
  border: none;
  color: white;
  padding: 0.8rem 1.15rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.2s;
  display: flex;
  align-items: center;
}

.header-search-btn:hover {
  background: var(--primary-dark);
}

/* =========================================
   SERVICE HIGHLIGHTS BAR
   ========================================= */
.service-highlights {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  padding: 0;
}

.service-highlights-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.55rem 1rem;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.service-highlights-inner::-webkit-scrollbar {
  display: none;
}

.service-highlight-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 600;
  color: #444;
  padding: 0.35rem 1rem;
  border-right: 1px solid #e5e7eb;
}

.service-highlight-item:last-child {
  border-right: none;
}

.service-highlight-item .pi {
  color: var(--primary-color);
  font-size: 1rem;
}

/* =========================================
   CATEGORY QUICK-ACCESS ROW
   ========================================= */
.category-icons-section {
  background: #fff;
  padding: 1.2rem 0 1rem;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 0;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.category-icons-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: 0 2rem;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.category-icons-inner::-webkit-scrollbar {
  display: none;
}

.category-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-primary);
  min-width: 80px;
  padding: 0.5rem 0.25rem;
  border-radius: 12px;
  transition: all 0.2s;
}

.category-icon-item:hover {
  color: var(--primary-color);
  transform: translateY(-3px);
}

.category-icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--primary-color);
  border: 2px solid #ffe0e0;
  transition: all 0.2s;
}

.category-icon-item:hover .category-icon-circle {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(223, 26, 35, 0.3);
}

.category-icon-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  max-width: 75px;
}

/* =========================================
   SECTION HEADINGS (Drogasil-style)
   ========================================= */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1.8rem 0 1.2rem;
  padding: 0;
}

.section-heading__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: -0.2px;
}

.section-heading__title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background: var(--primary-color);
  border-radius: 2px;
  flex-shrink: 0;
}

.section-heading__link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border: 1.5px solid var(--primary-color);
  border-radius: 999px;
  padding: 0.28rem 0.9rem;
  transition: all 0.2s;
  white-space: nowrap;
}

.section-heading__link:hover {
  background: var(--primary-color);
  color: white;
}

/* =========================================
   PRODUCT CARD IMPROVEMENTS
   ========================================= */
/* Flag badges on product image */
/* Contêiner que empilha os selos verticalmente, logo abaixo da tag de categoria,
   para qualquer combinação (Genérico / Controlado / Indisponível) sem sobreposição. */
.product-flag-badges {
  position: absolute;
  top: 40px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 2;
}

.product-flag-badge {
  font-size: 0.62rem;
  font-weight: 800;
  border-radius: 6px;
  padding: 3px 8px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #fff;
}

.product-flag-badge.generico {
  background: var(--badge-generico);
}

.product-flag-badge.controlado {
  background: var(--badge-controlado);
}

.product-flag-badge.antimicrobiano {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

/* Star ratings */
/* Price improvements */
.product-price {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--price-emphasis);
  line-height: 1.1;
}

/* Quick add button overlay */
.product-quick-add-btn,
.product-quick-add-btn.ui-button {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  background: var(--primary-color) !important;
  color: white !important;
  border: none !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px 0 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transform: translate(6px, 6px) !important;
  transition: opacity 0.2s, transform 0.2s, background 0.2s !important;
  z-index: 3 !important;
  font-size: 1rem !important;
  padding: 0 !important;
  min-width: unset !important;
}

.product-card:hover .product-quick-add-btn,
.product-card:hover .product-quick-add-btn.ui-button {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

.product-quick-add-btn:hover,
.product-quick-add-btn.ui-button:hover,
.product-quick-add-btn.ui-button.ui-state-hover {
  background: var(--primary-dark) !important;
}

/* Catalog product card compact style */
.catalog-product-card .product-title {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  height: 2.7em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.catalog-product-card .product-price {
  font-size: 1.15rem;
}

/* Search result count badge */
.catalog-results-badge {
  display: inline-flex;
  align-items: center;
  background: var(--primary-light);
  color: var(--primary-color);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 0.5rem;
}

/* Busca global highlight */
.catalog-busca-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: #fff8f0;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: #92400e;
}

.catalog-busca-info .pi {
  color: #f97316;
}

.catalog-busca-info a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
  margin-left: auto;
}

/* =========================================
   HOME PAGE IMPROVEMENTS
   ========================================= */
.home-section {
  margin: 1.5rem 0;
}

.home-section-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 1200px) {
  .home-section-content {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .home-section-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .home-section-content {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
}

/* =========================================
   RESPONSIVE IMPROVEMENTS
   ========================================= */
@media (max-width: 768px) {
  /* a busca não some mais no mobile: em @media 900 a camada de redesign a
     joga para uma linha própria (order 3 / flex-basis 100%) */

  .service-highlights-inner {
    justify-content: flex-start;
    padding: 0.4rem 0.75rem;
  }

  .service-highlight-item {
    padding: 0.3rem 0.7rem;
    font-size: 0.73rem;
  }

  .category-icons-inner {
    justify-content: flex-start;
    padding: 0 1rem;
  }

  .category-icon-circle {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }

  .category-icon-label {
    font-size: 0.68rem;
  }

  .section-heading__title {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .category-icon-item {
    min-width: 65px;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-content {
    padding: 2rem 1.5rem;
    background: linear-gradient(180deg, #2a2f36 0%, #1f242b 100%);
  }

  .footer-brand,
  .footer-title,
  .footer-description,
  .footer-links a,
  .footer-contact li,
  .footer-bottom p,
  .footer-contact i {
    color: #e5e7eb;
  }

  .footer-bottom,
  .site-footer {
    border-color: rgba(255, 255, 255, 0.2);
  }

  .social-link {
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
  }

  .footer-section {
    text-align: center;
  }

  .footer-logo {
    justify-content: center;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-contact li {
    justify-content: center;
  }
}

/* =========================================
   KITS E PROMOÇÕES — PÁGINA ADMIN
   ========================================= */
.admin-page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 0;
}

.kits-table .ui-datatable-tablewrapper {
  border-radius: 12px;
  overflow: hidden;
}

.kit-action-btn.ui-button {
  margin: 0 2px;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
}

/* Diálogos de cadastro admin (filiais etc.)
   O .ui-dialog do PrimeFaces é position:fixed com overflow:hidden e tem o topo
   fixado em 0 quando não cabe na tela — sem limitar a altura do conteúdo, o
   rodapé (Salvar/Cancelar) fica fora da viewport e inalcançável por clique/Tab. */
.admin-dialog .ui-dialog-content {
  max-height: 78vh;
  overflow-y: auto;
}

/* Valores do painel de detalhes do produto (somente leitura) */
.detalhe-valor {
  display: block;
  padding-top: 0.4rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Imagem do kit no diálogo admin */
.kit-imagem-bloco {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.kit-imagem-preview {
  width: 150px;
  height: 110px;
  flex: 0 0 150px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.kit-imagem-preview__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.4rem;
  display: block;
}

.kit-imagem-preview__vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  color: #94a3b8;
  font-size: 0.72rem;
  text-align: center;
  padding: 0.4rem;
}

.kit-imagem-preview__vazio .pi {
  font-size: 1.6rem;
}

.kit-imagem-acoes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 220px;
}

.kit-imagem-dica {
  margin: 0;
  font-size: 0.72rem;
  color: #6b7280;
  line-height: 1.45;
}

/* Diálogo de kit */
.kit-dialog .ui-dialog-content {
  padding: 1.2rem 1.5rem;
  max-height: 78vh;
  overflow-y: auto;
}

.kit-form-section {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}

.kit-form-section-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kit-form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.kit-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;

}

.kit-form-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #4b5563;
}

.kit-form-field--wide {
  flex: 1;

}

.kit-form-field--full {
  width: 100%;
}

.kit-input.ui-inputtext,
.kit-input .ui-inputtext,
.kit-input.ui-selectonemenu,
.kit-input.ui-inputtextarea {
  width: 100% !important;
  border-radius: 8px !important;
  border-color: #d1d5db !important;
  font-size: 0.88rem !important;
}

.kit-add-produto-row {
  background: #fff;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  align-items: flex-end;
}

/* Nomes longos de produto não podem transbordar o selectOneMenu e
   sobrepor o campo Qtd — recorta com reticências. */
.kit-add-produto-row .ui-selectonemenu {
  overflow: hidden;
}

.kit-add-produto-row .ui-selectonemenu .ui-selectonemenu-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kit-itens-table {
  margin-top: 0.5rem;
}

.kit-itens-table .ui-datatable-thead th {
  background: #f1f5f9 !important;
  font-size: 0.8rem !important;
}

.kit-price-summary {
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  padding: 0.75rem 0.5rem 0;
  border-top: 1px solid #e5e7eb;
  margin-top: 0.75rem;
  font-size: 0.88rem;
  color: #6b7280;
}

.kit-price-final {
  color: var(--primary-color);
  font-weight: 700;
}

.kit-info-text {
  font-size: 0.78rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.kit-info-text .pi {
  color: #3b82f6;
}

.kit-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  margin-top: 0.5rem;
}

/* =========================================
   KITS — SEÇÃO NO E-COMMERCE (HOMEPAGE)
   ========================================= */
.kits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

@media (max-width: 900px) {
  .kits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
  .kits-grid { grid-template-columns: 1fr; }
}

/* Layout compacto: banner de altura fixa + titulo e itens travados em 1 linha.
   E' isso que mantem todos os cards com a mesma altura — antes o <ul> de itens
   crescia sem limite e um kit com 6 produtos esticava a linha inteira do grid. */
.kit-card {
  background: white;
  border: 1px solid #e9eef5;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
}

.kit-card:hover {
  box-shadow: 0 16px 30px rgba(100, 17, 23, 0.16);
  transform: translateY(-4px);
  border-color: #d77d84;
}

.kit-card-media {
  position: relative;
  height: 105px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

/* contain: foto vertical e horizontal encaixam na mesma moldura sem distorcer */
.kit-card-media__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
  display: block;
}

.kit-card-media__vazio {
  font-size: 2.2rem;
  color: #cbd5e0;
}

.kit-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--primary-color);
  color: white;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.kit-card-badge.bundle {
  background: #3b82f6;
}

.kit-card-body {
  padding: 0.75rem 0.8rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.kit-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Uma linha so'. O texto completo fica no atributo title. */
.kit-card-itens {
  font-size: 0.75rem;
  color: #374151;
  margin: 0;
  line-height: 1.5;
  height: 1.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kit-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid #f0f0f0;
}

.kit-card-precos {
  min-width: 0;
}

.kit-card-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1.15;
}

.kit-card-save {
  font-size: 0.66rem;
  font-weight: 700;
  color: #16a34a;
  white-space: nowrap;
}

.kit-card-add.ui-button {
  flex-shrink: 0;
}

/* ===== Produto Indisponível ===== */
.produto-indisponivel {
    opacity: 0.6;
    filter: grayscale(40%);
}

.produto-indisponivel:hover {
    opacity: 0.75;
    filter: grayscale(20%);
}

.produto-indisponivel-badge {
    background: var(--badge-indisponivel);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 3px 8px;
    border-radius: 6px;
    pointer-events: none;
}

.product-flag-badge.produto-indisponivel-badge {
    background: var(--badge-indisponivel);
}

.produto-indisponivel .add-cart-btn.ui-button.ui-state-disabled,
.produto-indisponivel .product-add-cart-btn.ui-button.ui-state-disabled {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: not-allowed;
}

/* ===== Filtros modernos do catálogo (facetas, chips, ordenação) ===== */
.catalog-facet-option {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 4px; color: var(--text-primary); text-decoration: none; font-size: 0.9rem;
}
.catalog-facet-option:hover { color: var(--primary-color); }
.catalog-facet-option .pi { color: var(--text-secondary); }
.catalog-facet-option.active { color: var(--primary-color); font-weight: 700; }
.catalog-facet-option.active .pi { color: var(--primary-color); }
.catalog-facet-count { margin-left: auto; color: var(--text-secondary); font-size: 0.78rem; }
.catalog-sort { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.catalog-sort label { font-size: 0.85rem; color: var(--text-secondary); }
.catalog-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.catalog-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-light); color: var(--primary-dark);
  border: 1px solid #f3c6c9; border-radius: 999px; padding: 4px 10px; font-size: 0.8rem; font-weight: 600;
}
.catalog-chip-remove { color: var(--primary-dark) !important; font-weight: 800; text-decoration: none; cursor: pointer; font-size: 1rem; line-height: 1; }
.catalog-clear-all { color: var(--primary-color) !important; font-weight: 700; font-size: 0.82rem; text-decoration: underline; cursor: pointer; }

/* ============================================================
   NOVA FARMA — CAMADA DE REDESIGN (v1)
   Cole ESTE BLOCO NO FIM de resources/css/styles.css.
   Nada aqui depende de mudança de DOM: os seletores usam as
   classes que já existem nas suas páginas.
   Exceções (marcadas com  ➕ NOVO ) pedem 1 classe/atributo a
   mais no XHTML — veja GUIA-FRONTEND.md.
   ============================================================ */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  --primary-color: #df1a23;
  --primary-dark:  #8f1018;
  --primary-hover: #b1111b;
  --primary-light: #fff1f1;
  --primary-border:#f2c3c5;
  --accent-color:  #740409;

  --ink:        #101828;
  --ink-2:      #344054;
  --muted:      #667085;
  --muted-2:    #98a2b3;
  --line:       #e4e7ec;
  --line-soft:  #f2f4f7;
  --surface:    #ffffff;
  --surface-2:  #f9fafb;
  --bg-primary: #f4f6f9;

  --ok:      #067647;  --ok-bg:   #ecfdf3;
  --warn:    #b25e00;  --warn-bg: #fff7e6;
  --danger:  #b42318;  --danger-bg:#fef3f2;
  --info:    #175cd3;  --info-bg: #eff8ff;

  --r-sm: 9px;  --r-md: 12px;  --r-lg: 16px;  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16,24,40,.05);
  --sh-2: 0 4px 14px rgba(16,24,40,.07);
  --sh-3: 0 14px 30px rgba(16,24,40,.10);

  --maxw: 1240px;
}

body,
body .ui-widget,
body .ui-widget input,
body .ui-widget button,
body .ui-widget select,
body .ui-widget textarea {
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}
body { background: var(--bg-primary); color: var(--ink); font-size: 14px; }

/* Fonte: adicione no <h:head> do template.xhtml
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="crossorigin" />
   <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> */

/* ---------- 2. HEADER ---------------------------------------------------- */
.layout-header { background: var(--primary-color); box-shadow: var(--sh-2); }
/* o header inteiro é sticky: as três faixas juntas precisam caber sem comer
   meia tela, daí o aperto no padding da faixa da marca e do menu */
.header-content { max-width: none; }

#menuForm .mainHeader {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 11px 22px;
  gap: 22px;
}
.main-header-line { border-bottom: none; }
.header-logo { height: 38px; }

/* busca dominante, estilo marketplace */
.header-search-bar {
  background: #fff;
  border-radius: var(--r-md);
  padding: 4px 4px 4px 16px;
  box-shadow: 0 6px 16px rgba(116,4,9,.22);
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
}
.header-search-input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-size: 14.5px; color: var(--ink); padding: 11px 4px;
}
.header-search-input::placeholder { color: var(--muted-2); }
.header-search-btn {
  border: none; cursor: pointer;
  background: var(--primary-color); color: #fff;
  font-weight: 700; font-size: 13.5px;
  padding: 10px 20px; border-radius: var(--r-sm);
  transition: background .18s ease;
}
.header-search-btn:hover { background: var(--primary-hover); }

/* carrinho com badge escuro (mais legível sobre o vermelho) */
.cart-container { position: relative; }
/* o carrinho passa a ser da mesma família do "Entrar": pílula translúcida sobre
   o vermelho, em vez de um quadrado branco sólido no meio dos outros botões */
body .cart-icon-btn.ui-button.ui-widget {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  border-radius: 999px !important;
  width: 44px; height: 44px;
  transition: background .18s ease, transform .18s ease;
}
body .cart-icon-btn.ui-button.ui-widget:hover,
body .cart-icon-btn.ui-button.ui-widget:focus,
body .cart-icon-btn.ui-button.ui-widget.ui-state-hover,
body .cart-icon-btn.ui-button.ui-widget.ui-state-focus {
  background: rgba(255, 255, 255, .16) !important;
  transform: translateY(-1px);
}
.cart-icon-btn .ui-button-icon-left { font-size: 1.05rem; }
.cart-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: #0f1420; color: #fff;
  border: 2px solid var(--primary-color);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.header-user-label { opacity: .85; }
/* "Entrar" e "Registrar-se" também eram pílulas translúcidas e também perdiam
   para o "body .ui-button.ui-state-default" — apareciam como texto chapado
   sobre o vermelho. Repostas aqui, é o par visual do ícone de carrinho. */
body .header-auth-btn.ui-button.ui-widget {
  padding: .10rem 1.15rem !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .36) !important;
  color: #fff !important;
  border-radius: 999px !important;
}
body .header-auth-btn.ui-button.ui-widget:hover,
body .header-auth-btn.ui-button.ui-widget:focus,
body .header-auth-btn.ui-button.ui-widget.ui-state-hover,
body .header-auth-btn.ui-button.ui-widget.ui-state-focus {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .55) !important;
  transform: translateY(-1px);
}
body .header-auth-btn-secondary.ui-button.ui-widget {
  background: transparent !important;
}

/* Ações do usuário logado (Minhas Compras / Meu Perfil / Sair): uma família só
   de pílulas translúcidas sobre o vermelho, em vez de dois botões de ícone com
   rótulo em branco ao lado de um botão com texto. */
.user-info { display: flex; align-items: center; gap: 8px; flex: none; }
/* o "body .ui-button.ui-state-default" da seção 12 pinta qualquer botão de
   vermelho; sobre o header vermelho isso apagava as pílulas, daí o body aqui */
body .user-info .profile-button.ui-button,
body .user-info .logout-button.ui-button {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .36) !important;
  color: #fff !important;
  height: 40px;
  padding: 0 13px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  white-space: nowrap;
}
body .user-info .profile-button.ui-button:hover,
body .user-info .logout-button.ui-button:hover {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .55) !important;
  transform: translateY(-1px);
}
.header-profile-btn, .header-orders-btn { margin-right: 0 !important; }

/* a busca é o elemento dominante do header: piso de largura, e o resto encolhe
   antes dela (a quebra de linha só entra no @media 900, junto com o hambúrguer) */
#menuForm .mainHeader .header-search-block { flex: 1 1 300px; min-width: 210px; }

/* O logo ocupa ~350px e as três ações do usuário ~420px: com o nome também na
   linha, sobrava menos de 200px para a busca. Quem identifica o usuário passa a
   ser o botão "Meu Perfil" (o nome continua no painel mobile e no perfil).
   Para trazer o nome de volta, basta remover este display:none. */
.user-info .header-user-meta { display: none; }

/* faixa 900–1100: as três pílulas ainda aparecem (o hambúrguer só assume em
   900), então logo e pílulas encolhem para o "Sair" não ser cortado */
@media (max-width: 1100px) {
  #menuForm .mainHeader { gap: 12px; padding: 14px; }
  .header-logo { height: 30px; }
  #menuForm .mainHeader .header-search-block { min-width: 160px; }
  .user-info { gap: 6px; }
  body .user-info .profile-button.ui-button,
  body .user-info .logout-button.ui-button {
    padding: 0 9px !important;
    font-size: 12px !important;
  }
}

/* menu principal: barra branca (mais “ecommerce” que tudo vermelho) */
.main-menu { background: #fff !important; border-bottom: 1px solid var(--line) !important; }
.main-menu > .ui-menu-list {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 14px !important;
}
.main-menu .ui-menuitem-link {
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  border-bottom: 2px solid transparent !important;
}
.main-menu .ui-menuitem-link .ui-menuitem-text,
.main-menu .ui-menuitem-link .ui-menuitem-icon,
.main-menu .ui-submenu-icon { color: var(--ink-2) !important; font-weight: 600; }
.main-menu .ui-menuitem-link:hover {
  background: transparent !important;
  transform: none;
  border-bottom-color: var(--primary-color) !important;
}
.main-menu .ui-menuitem-link:hover .ui-menuitem-text,
.main-menu .ui-menuitem-link:hover .ui-menuitem-icon { color: var(--primary-color) !important; }
.main-menu .ui-menuitem-active > .ui-menuitem-link {
  background: var(--primary-light) !important;
  border-bottom-color: var(--primary-color) !important;
}
/* página atual: sublinhado vermelho, para a barra não parecer inerte */
.main-menu .ui-menuitem-link.menu-atual {
  border-bottom-color: var(--primary-color) !important;
}
.main-menu .ui-menuitem-link.menu-atual .ui-menuitem-text,
.main-menu .ui-menuitem-link.menu-atual .ui-menuitem-icon {
  color: var(--primary-color) !important;
  font-weight: 700;
}
.main-menu .ui-menu-child {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-3) !important;
  padding: 6px !important;
}
.main-menu .ui-menu-child .ui-menuitem-link { border-radius: var(--r-sm) !important; padding: 10px 12px !important; }
.main-menu .ui-menu-child .ui-menuitem-link:hover { background: var(--surface-2) !important; }

/* Faixa de serviços: barra de confiança clara, logo abaixo do menu. A versão
   escura anterior empilhava vermelho + branco + vinho e ainda deixava os ícones
   vermelhos sobre o vinho (o .pi legado ganha do seletor i por especificidade). */
.service-highlights {
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--line);
}
.service-highlights-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 22px;
  display: flex; flex-wrap: nowrap; gap: 0;
  align-items: stretch; justify-content: space-between;
}
.service-highlight-item {
  color: var(--ink-2); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1 1 0; min-width: 0;
  padding: 9px 12px !important;
  border: none !important;
  border-right: 1px solid var(--line-soft) !important;
  white-space: nowrap;
}
.service-highlight-item:last-child { border-right: none !important; }
.service-highlight-item i,
.service-highlight-item .pi {
  font-size: 14px;
  color: var(--primary-color);
  flex: none;
}

/* ---------- 3. CONTEÚDO / SHELL ------------------------------------------ */
.layout-content-shell,
.home-section-content,
.ecommerce-container { max-width: var(--maxw); margin: 0 auto; padding: 22px; }

/* ---------- 4. CARD DE PRODUTO (o item que mais quebrava) ---------------- */
/* grade real: p:dataGrid vira CSS Grid, cards de altura igual */
.ui-datagrid .ui-datagrid-content { border: none !important; background: transparent !important; padding: 0 !important; }
/* layout="grid" do PrimeFaces 10 embrulha as colunas num único div.ui-g;
   layout="tabular" usa table/tbody/tr. Os dois precisam sumir para as
   .ui-datagrid-column virarem itens diretos do CSS Grid abaixo. */
.ui-datagrid .ui-datagrid-content > .ui-g,
.ui-datagrid .ui-datagrid-content > table,
.ui-datagrid .ui-datagrid-content > table > tbody,
.ui-datagrid .ui-datagrid-content > table > tbody > tr {
  display: contents !important;
}
/* .ui-datagrid-content também recebe .ui-grid, e tanto .ui-grid quanto .ui-g
   trazem clearfix (::before/::after com display:table). Com display:contents no
   .ui-g esses pseudos viram itens do grid e empurram os cards de célula. */
.ui-datagrid .ui-datagrid-content::before,
.ui-datagrid .ui-datagrid-content::after,
.ui-datagrid .ui-datagrid-content > .ui-g::before,
.ui-datagrid .ui-datagrid-content > .ui-g::after {
  display: none !important;
}
.ui-datagrid .ui-datagrid-content > table > tbody > tr {
  /* fallback quando display:contents não se aplica */
  background: transparent !important;
}
.ui-datagrid .ui-datagrid-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.ui-datagrid-column {
  display: flex !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  width: auto !important;
  /* sem isto o min-content do card (nome longo, ou o alt de uma imagem que não
     carregou) estica a trilha e a página ganha rolagem horizontal no mobile */
  min-width: 0;
}
.ui-datagrid-column > * { width: 100%; }

.product-card {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: none;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
  border-color: var(--primary-border);
}

.product-image-wrapper {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  height: auto;          /* mata alturas fixas antigas */
  min-height: 0;
}
.product-image,
.product-image-media {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.product-info {
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px 14px 15px;
  flex: 1;                /* garante rodapé alinhado entre cards */
  min-height: 0;
}
.product-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 37px; margin: 0;
}
.product-code, .product-details, .detail-item { font-size: 11.5px; color: var(--muted); }
.product-footer, .product-price-section { margin-top: auto; padding: 0; border: none; }
.product-price {
  font-size: 20px; font-weight: 800; color: var(--primary-color);
  letter-spacing: -.02em; line-height: 1.1;
}
/*  ➕ NOVO  preço "de" riscado + selo de desconto */
.product-price-old { font-size: 12px; color: var(--muted-2); text-decoration: line-through; }
.product-installment { font-size: 11.5px; color: var(--muted); }
.product-discount-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--ok); color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 4px 9px; border-radius: 7px;
}

/* selos controlado / antimicrobiano / genérico */
.product-flag-badges { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; }
.product-flag-badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; border: none;
  background: var(--line-soft); color: var(--muted);
}
.product-flag-badge.controlado      { background: var(--primary-light); color: var(--primary-dark); }
.product-flag-badge.antimicrobiano  { background: var(--warn-bg);       color: var(--warn); }
.product-flag-badge.generico        { background: var(--ok-bg);         color: var(--ok); }
.product-category-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; background: var(--line-soft); color: var(--muted);
}

/* indisponível: véu sobre a imagem, card continua clicável */
.produto-indisponivel .product-image-wrapper::after {
  content: ""; position: absolute; inset: 0; background: rgba(249,250,251,.72);
}
.produto-indisponivel-badge {
  position: absolute; inset: 0; margin: auto;
  width: max-content; height: max-content;
  background: #475467; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 8px; z-index: 2;
  border: none;
}

/* O card do redesign já tem um CTA de largura total no rodapé, então o botão
   sobreposto que aparecia no hover (mesma ação, mesmo destino) sai de cena — ele
   herdava a largura total daqui e cobria a foto inteira. O markup continua no
   XHTML; para trazê-lo de volta basta remover este display:none. */
.product-quick-add-btn,
.product-quick-add-btn.ui-button {
  display: none !important;
}

/* botão de compra ocupa a largura do card */
.add-cart-btn.ui-button {
  width: 100% !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: var(--primary-color) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  justify-content: center;
  transition: background .18s ease !important;
}
.add-cart-btn.ui-button:hover { background: var(--primary-hover) !important; transform: none; }
.produto-indisponivel .add-cart-btn.ui-button {
  background: #fff !important; color: var(--ink-2) !important;
  border: 1px solid #d0d5dd !important;
}
.product-actions { display: flex; gap: 8px; }
.favorite-btn.ui-button {
  width: 42px !important; height: 42px !important; flex: none;
  border-radius: 10px !important; background: #fff !important;
  border: 1px solid #d0d5dd !important; color: var(--muted) !important;
}

/* ---------- 5. CATÁLOGO --------------------------------------------------- */
.catalog-page { max-width: var(--maxw); margin: 0 auto; padding: 22px; }
.catalog-breadcrumb { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.catalog-breadcrumb a { color: var(--muted) !important; text-decoration: none; }
.catalog-breadcrumb a:hover { color: var(--primary-color) !important; }
.catalog-layout { display: grid; grid-template-columns: 268px minmax(0,1fr); gap: 18px; align-items: start; }
.catalog-sidebar { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
.catalog-filter-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 0; overflow: hidden; box-shadow: none;
}
.catalog-filter-card > h3,
.catalog-filter-card > .catalog-filter-title {
  margin: 0; padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px; font-weight: 800; letter-spacing: .02em;
}
.catalog-category-list, .catalog-facet-list { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.catalog-category-option, .catalog-facet-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  transition: background .15s ease;
}
.catalog-category-option:hover, .catalog-facet-option:hover { background: var(--surface-2); }
.catalog-category-option.active, .catalog-facet-option.active {
  background: var(--primary-light); color: var(--primary-dark) !important; font-weight: 700;
}
.catalog-facet-count { color: var(--muted-2); font-size: 11.5px; }
.catalog-price-fields { padding: 14px 16px; display: flex; gap: 10px; }
.catalog-filter-actions { padding: 0 16px 14px; display: flex; gap: 8px; }
.catalog-filter-btn.ui-button {
  flex: 1; height: 38px !important;
  border-radius: var(--r-sm) !important;
  background: var(--primary-color) !important; border: none !important; color: #fff !important;
  font-weight: 700 !important;
}
.catalog-filter-btn.ui-button:hover { background: var(--primary-hover) !important; }
.catalog-filter-btn.secundario.ui-button,
.catalog-filter-btn.ui-button-secondary {
  flex: none; background: #fff !important; color: var(--ink-2) !important;
  border: 1px solid #d0d5dd !important;
}

.catalog-results-header {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 18px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.catalog-results-badge {
  background: var(--line-soft); color: var(--muted);
  border-radius: var(--r-pill); padding: 3px 10px; font-size: 12px; font-weight: 700;
}
.catalog-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--primary-light); color: var(--primary-dark);
  border: 1px solid var(--primary-border);
  border-radius: var(--r-pill); padding: 6px 12px; font-size: 12.5px; font-weight: 600;
}

/* ---------- 6. PÁGINA DE PRODUTO ----------------------------------------- */
.product-marketplace-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: none; padding: 18px;
}
.product-marketplace-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 24px; align-items: start; }
.product-marketplace-media {
  aspect-ratio: 1/1; background: var(--surface-2); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; padding: 26px;
}
.product-marketplace-image, .product-marketplace-image-media {
  max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply;
}
.product-marketplace-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.product-marketplace-code { font-size: 12.5px; color: var(--muted); }
.product-marketplace-price-box {
  padding: 14px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: transparent; border-radius: 0;
}
.product-marketplace-price-value { font-size: 38px; font-weight: 800; color: var(--primary-color); letter-spacing: -.03em; }
.product-marketplace-price-note { font-size: 12.5px; color: var(--muted); }
.product-marketplace-info-item { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.product-marketplace-secondary-btn.ui-button {
  width: 100%; height: 46px !important; border-radius: 11px !important;
  background: #fff !important; border: 1px solid #d0d5dd !important; color: var(--ink) !important; font-weight: 700 !important;
}

/* ---------- 7. CARRINHO --------------------------------------------------- */
.cart-page { max-width: var(--maxw); margin: 0 auto; padding: 22px; }
.cart-page-grid { display: grid; grid-template-columns: minmax(0,1fr) 350px; gap: 16px; align-items: start; }
.cart-main-panel, .cart-summary-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none;
}
.cart-summary-panel { position: sticky; top: 16px; padding: 18px; }
.cart-page-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-bottom: 1px solid var(--line-soft); }
.cart-page-item:last-child { border-bottom: none; }
.cart-page-item-image {
  width: 86px; height: 86px; flex: none; border-radius: 11px;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center; padding: 9px;
}
.cart-page-item-image-media { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* Controle de quantidade: um segmentado [-][n][+] de verdade. Sem o "body" os
   botões caíam no "body .ui-button.ui-state-default" da seção 12 e saíam
   vermelhos dentro da caixa, e o hover era um cinza chapado. */
body .cart-page-qty-controls {
  display: inline-flex; align-items: stretch;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  height: 40px;
  padding: 0; gap: 0;
}
body .cart-page-qty-controls .ui-button,
body .cart-page-qty-controls .cart-qty-btn.ui-button {
  width: 38px !important; height: auto !important;
  min-height: 0 !important;
  border: none !important;
  background: #fff !important;
  color: var(--ink-2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease !important;
}
body .cart-page-qty-controls .ui-button:hover,
body .cart-page-qty-controls .ui-button:focus,
body .cart-page-qty-controls .ui-button.ui-state-hover,
body .cart-page-qty-controls .ui-button.ui-state-focus {
  background: var(--primary-light) !important;
  color: var(--primary-color) !important;
  transform: none;
}
/* O combinador de filho direto e' obrigatorio: todo p:commandButton renderiza
   um <span class="ui-button-text"> interno, e sem o ">" estas bordas eram
   pintadas tambem nele — virando tracos verticais soltos nas pontas do grupo.
   So' o numero da quantidade e' filho direto de .cart-page-qty-controls. */
body .cart-page-qty-controls > span {
  display: flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 0 4px;
  font-weight: 700; font-size: 14px; color: var(--ink);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.cart-page-item-subtotal { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.cart-page-item-subtotal strong { white-space: nowrap; }
.cart-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.cart-summary-row .desconto { color: var(--ok); font-weight: 700; }
.cart-summary-total { font-size: 26px; font-weight: 800; color: var(--primary-color); letter-spacing: -.03em; }
.cart-checkout-btn.ui-button {
  width: 100% !important; height: 50px !important; border-radius: var(--r-md) !important;
  background: var(--primary-color) !important; border: none !important; color: #fff !important;
  font-size: 15px !important; font-weight: 700 !important;
}
.cart-checkout-btn.ui-button:hover { background: var(--primary-hover) !important; }

/* "Limpar Carrinho" e o lixeirinha de cada item são ações destrutivas e vinham
   vermelhas e cheias, iguais ao "Ir para Checkout" — o "body .ui-button" da
   seção 12 apagava o estilo suave que existia para elas. Viram secundários
   discretos que só assumem o tom de perigo no hover. */
body .cart-clear-btn.ui-button.ui-widget {
  width: 100% !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  color: var(--muted) !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  padding: .8rem !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;
}
body .cart-clear-btn.ui-button.ui-widget:hover,
body .cart-clear-btn.ui-button.ui-widget:focus,
body .cart-clear-btn.ui-button.ui-widget.ui-state-hover,
body .cart-clear-btn.ui-button.ui-widget.ui-state-focus {
  background: var(--danger-bg) !important;
  border-color: #fca5a5 !important;
  color: var(--danger) !important;
  transform: none;
}

body .cart-remove-btn.ui-button.ui-widget {
  width: 38px !important; height: 38px !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  color: var(--muted) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}
body .cart-remove-btn.ui-button.ui-widget:hover,
body .cart-remove-btn.ui-button.ui-widget:focus,
body .cart-remove-btn.ui-button.ui-widget.ui-state-hover,
body .cart-remove-btn.ui-button.ui-widget.ui-state-focus {
  background: var(--danger-bg) !important;
  border-color: #fca5a5 !important;
  color: var(--danger) !important;
  transform: none;
}
.cart-tip-box {
  background: var(--surface-2); border: none; border-radius: 11px; padding: 12px;
  font-size: 11.5px; color: var(--muted); display: flex; gap: 10px; align-items: flex-start;
}

/* ---------- 8. CHECKOUT --------------------------------------------------- */
.checkout-page { max-width: var(--maxw); margin: 0 auto; padding: 22px; }
.checkout-steps { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 16px; }
.checkout-step-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  background: #fff; color: var(--muted-2); border: 1.5px solid var(--line);
}
.checkout-step-item.ativo .checkout-step-dot { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.checkout-step-item.concluido .checkout-step-dot { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary-border); }
.checkout-step-label { font-size: 13.5px; font-weight: 700; color: var(--muted-2); }
.checkout-step-item.ativo .checkout-step-label,
.checkout-step-item.concluido .checkout-step-label { color: var(--ink); }
.checkout-grid { display: grid; grid-template-columns: minmax(0,1fr) 350px; gap: 16px; align-items: start; }
.checkout-form-panel, .checkout-summary-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; padding: 18px;
}
.checkout-summary-panel { position: sticky; top: 16px; }
.checkout-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout-field { display: flex; flex-direction: column; gap: 6px; }
.checkout-field label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.checkout-security-tip {
  background: var(--surface-2); border: none; border-radius: 11px; padding: 13px;
  font-size: 12px; color: var(--muted); display: flex; gap: 10px; align-items: flex-start;
}
/* ---------- 9. MEUS PEDIDOS ---------------------------------------------- */
.orders-page { max-width: var(--maxw); margin: 0 auto; padding: 22px; }
.order-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: none; margin-bottom: 12px;
}
.order-card > header, .order-card .order-card-header {
  padding: 14px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.status-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 800; border: none;
}
.status-badge.aguardando, .status-pendente { background: var(--warn-bg); color: var(--warn); }
.status-badge.pago, .status-emitida       { background: var(--ok-bg);   color: var(--ok); }
.status-badge.retirada                    { background: var(--info-bg); color: var(--info); }
.status-badge.cancelado, .status-erro     { background: var(--danger-bg); color: var(--danger); }
/* .orders-kpi ficou FORA da repintura clara de propósito: esses quatro cartões
   (Total de pedidos, Em andamento, Entregues, Total gasto) ficam DENTRO do hero
   vermelho de .orders-hero, que define color:#fff. Pintados com var(--surface)
   (#ffffff), rótulo e valor sumiam por completo — branco sobre branco. O estilo
   que vale é o translúcido da seção "MEUS PEDIDOS" original (~linha 2932).
   Mesmo caso de .perfil-summary-card, abaixo. */

/* ---------- 10. PERFIL / AUTENTICAÇÃO ------------------------------------ */
.auth-page { background: var(--bg-primary); }
/* .perfil-summary-card ficou FORA desta regra de propósito: esses quatro cartões
   (Login, Perfil, Membro desde, Última atualização) ficam DENTRO do hero
   vermelho, com rótulo cinza-claro e valor branco. Pintados de branco, o valor
   sumia por completo — branco sobre branco. */
.auth-card, .perfil-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: none;
}
.auth-brand-panel { background: linear-gradient(150deg, var(--primary-dark), var(--primary-color) 70%); }
.auth-btn--primary.ui-button, .perfil-btn--primary.ui-button {
  background: var(--primary-color) !important; border: none !important; color: #fff !important;
  height: 48px !important; border-radius: 11px !important; font-weight: 700 !important;
}
.auth-btn--primary.ui-button:hover, .perfil-btn--primary.ui-button:hover { background: var(--primary-hover) !important; }

/* "Editar"/"Cancelar" são secundários e vinham vermelhos cheios, iguais ao
   "Atualizar Senha" — mesmo atropelo do "body .ui-button" da seção 12. */
body .perfil-btn--ghost.ui-button.ui-widget,
body .perfil-btn--secondary.ui-button.ui-widget {
  background: #fff !important;
  color: var(--ink) !important;
  border: 1px solid #d9e2ec !important;
}
body .perfil-btn--ghost.ui-button.ui-widget:hover,
body .perfil-btn--secondary.ui-button.ui-widget:hover {
  background: var(--surface-2) !important;
  border-color: #c3cfdd !important;
}

/* o p:tag do perfil fica sobre o hero vermelho: azul (info) ou vermelho
   (danger) do tema brigam com o fundo, então vira o mesmo vidro dos cartões */
body .perfil-tag.ui-tag {
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  color: #fff !important;
  font-weight: 700;
}
.perfil-hero { background: linear-gradient(150deg, var(--primary-dark), var(--primary-color) 70%); border-radius: var(--r-lg); }

/* ---------- 11. ADMIN (datatable, formulários, diálogos) ----------------- */
.admin-page-container { max-width: var(--maxw); margin: 0 auto; padding: 22px; }
body .ui-datatable {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
body .ui-datatable thead th {
  background: var(--surface-2) !important; border: none !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: 11.5px !important; font-weight: 800 !important;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted) !important;
  padding: 11px 14px !important;
}
body .ui-datatable tbody td {
  border: none !important; border-bottom: 1px solid var(--line-soft) !important;
  padding: 12px 14px !important; font-size: 13px;
}
body .ui-datatable tbody tr.ui-widget-content { background: #fff !important; }
body .ui-datatable tbody tr:hover { background: #fcfcfd !important; }
body .ui-paginator {
  background: #fff !important; border: none !important;
  border-top: 1px solid var(--line) !important; padding: 12px !important;
}
body .ui-paginator .ui-paginator-page.ui-state-active {
  background: var(--primary-color) !important; border-color: var(--primary-color) !important;
  color: #fff !important; border-radius: var(--r-sm) !important;
}
body .ui-paginator .ui-paginator-page { border-radius: var(--r-sm) !important; min-width: 34px; height: 34px; }

/* ---------- 12. FORM CONTROLS & BOTÕES (base PrimeFaces) ----------------- */
body .ui-inputfield, body .ui-inputtext,
.checkout-input, .perfil-input, .catalog-price-fields input {
  border: 1px solid #d0d5dd !important;
  border-radius: 10px !important;
  padding: 11px 13px !important;
  font-size: 13.5px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body .ui-inputfield:focus, body .ui-inputtext:focus,
body .ui-state-focus.ui-inputfield {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(223,26,35,.12) !important;
}
body .ui-button {
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background .18s ease, border-color .18s ease !important;
}
body .ui-button-primary, body .ui-button.ui-state-default {
  background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important;
}
body .ui-button-primary:hover { background: var(--primary-hover) !important; }
body .ui-button-secondary {
  background: #fff !important; border: 1px solid #d0d5dd !important; color: var(--ink-2) !important;
}
body .ui-dialog { border-radius: var(--r-lg) !important; overflow: hidden; border: none !important; box-shadow: var(--sh-3) !important; }
body .ui-dialog .ui-dialog-titlebar { background: #fff !important; border-bottom: 1px solid var(--line) !important; padding: 16px 18px !important; }

/* ---------- 13. RODAPÉ ---------------------------------------------------- */
.site-footer { background: #0f1420; color: #c7ced8; }
.footer-content, .footer-bottom > div { max-width: var(--maxw); margin: 0 auto; padding: 34px 22px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 26px; }
.footer-title { color: #fff; font-size: 13px; letter-spacing: .02em; }
.footer-links a, .footer-contact a { color: #c7ced8 !important; font-size: 12.5px; text-decoration: none; }
.footer-links a:hover, .footer-contact a:hover { color: #fff !important; }
.social-link { background: rgba(255,255,255,.08); border-radius: var(--r-sm); color: #fff; }
.social-link:hover { background: var(--primary-color); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); font-size: 11.5px; color: #8b95a5; }

/* ============================================================
   14. RESPONSIVO
   ============================================================ */
@media (max-width: 1100px) {
  .catalog-layout { grid-template-columns: 240px minmax(0,1fr); }
  .cart-page-grid, .checkout-grid { grid-template-columns: minmax(0,1fr) 310px; }
  .product-marketplace-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
}

/* ============================================================
   HEADER RESPONSIVO  --  fonte unica de verdade abaixo de 900px

   Nao acrescente regra de header em outro @media. Ate' 27/08/2026 o header
   mobile era decidido por cinco blocos espalhados pelo arquivo, que se
   contradiziam em flex-wrap e em .user-info; como todos tinham a mesma
   especificidade, quem vencia era o ultimo do arquivo, propriedade por
   propriedade. O efeito combinado era .user-info com width:100% E flex:none E
   justify-content:flex-end ao mesmo tempo -- carrinho e hamburguer sozinhos
   numa faixa esticada, logo numa linha e busca em outra, ~210px de header
   sticky num viewport de 667px.

   Layout desta secao, em duas linhas:
       [ logo ]                          [ menu ] [ carrinho ]
       [ busca, largura total                                ]
   ============================================================ */
@media (max-width: 900px) {
  #menuForm .mainHeader { padding: 10px 14px 12px; gap: 10px; row-gap: 10px; flex-wrap: wrap; }
  .header-logo { height: 30px; }

  /* a marca toma o vao ate' as acoes; min-width:0 deixa ela encolher em vez de
     empurrar o carrinho para fora em telas de 320px */
  .header-brand-block { flex: 1 1 auto; min-width: 0; }

  /* encolhe ao proprio conteudo e cola na direita. O width:100% que vivia no
     bloco antigo de 768 e' o que esticava isto por uma linha inteira. */
  .user-info {
    flex: 0 0 auto;
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .menu-toggle-btn, .cart-container { flex-shrink: 0; }
  /* .cart-container nasce com margin: 0 1.5rem para o desktop; aqui sao 48px
     roubados da linha, com a busca ja' disputando espaco */
  .cart-container { margin: 0; }

  /* casa a especificidade de "#menuForm .mainHeader .header-search-block{flex:1}"
     lá de cima, senão a busca fica com flex-basis 0 e some no mobile */
  /* margin: 0 1.2rem herdada da regra antiga somava 38px ao flex-basis 100% e
     dava 5px de rolagem horizontal em 375 */
  /* max-width:580px vem da secao "HEADER GLOBAL SEARCH BAR" e min-width:160px
     do bloco de 1100: em 768px de largura a busca parava nos 580 e deixava um
     vao a' direita. Aqui ela ocupa a linha inteira, sempre. */
  #menuForm .mainHeader .header-search-block {
    order: 3; flex: 0 0 100%; margin-left: 0; margin-right: 0;
    max-width: none; min-width: 0;
  }
  .header-search-bar { padding: 0 6px 0 13px; height: 44px; box-shadow: none; }
  .header-search-btn { padding: 0 14px; height: 34px; }
  /* hambúrguer sem contorno, igual ao ícone de carrinho ao lado */
  .menu-toggle-btn {
    display: inline-flex; order: -1;
    width: 44px; height: 44px;
    background: transparent; border: none;
    border-radius: 999px;
  }
  .menu-toggle-btn:hover { background: rgba(255, 255, 255, .16); }

  /* o que identifica o usuario logado no mobile e' o painel do hamburguer
     (.header-mobile-panel), nao a barra: aqui nao cabe */
  .user-info .header-user-meta,
  .user-info .header-auth-actions,
  .user-info .profile-button,
  .user-info .logout-button {
    display: none !important;
  }
  /* no mobile a faixa rola na horizontal em vez de espremer cinco colunas */
  .service-highlights-inner {
    justify-content: flex-start; padding: 0 8px;
    overflow-x: auto; scrollbar-width: none;
  }
  .service-highlights-inner::-webkit-scrollbar { display: none; }
  .service-highlight-item {
    flex: none;
    padding: 8px 12px !important;
  }
  .service-highlight-item span { font-size: 11.5px; }
  .service-highlight-item i,
  .service-highlight-item .pi { font-size: 13px; }

  /* menu mobile continua 100% CSS (label + checkbox + irmãos). O par
     display:none / :checked ~ display:block e' o hamburguer inteiro -- ele so'
     funciona enquanto #menuToggle, .main-menu e .header-mobile-panel forem
     irmaos diretos, nessa ordem, dentro do #menuForm (ver CLAUDE.md). */
  .main-menu { display: none; border-top: 1px solid rgba(255,255,255,.15) !important; }
  .menu-toggle:checked ~ .main-menu { display: block; }
  .menu-toggle:checked ~ .header-mobile-panel { display: block; }
  .main-menu > .ui-menu-list { padding: 6px !important; }
  /* o menubar do PrimeFaces e' horizontal por padrao: no mobile ele empilha */
  .main-menu .ui-menu-list { display: flex; flex-direction: column; }
  .main-menu .ui-menuitem,
  .main-menu .ui-menuitem-link { width: 100% !important; margin: 0 !important; }
  .main-menu .ui-menuitem-link { border-radius: var(--r-sm) !important; border-bottom: none !important; }

  /* catálogo: filtros viram gaveta lateral (CSS puro, mesmo padrão do menu) */
  .catalog-layout { grid-template-columns: minmax(0,1fr); }
  .catalog-filters-toggle-btn {
    display: inline-flex !important; align-items: center; gap: 8px;
    height: 40px; padding: 0 14px; border-radius: 10px;
    border: 1px solid #d0d5dd; background: #fff; color: var(--ink-2);
    font-weight: 700; font-size: 13px; cursor: pointer;
  }
  .catalog-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 340px);
    z-index: 1200; background: var(--bg-primary);
    padding: 16px; overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 40px rgba(16,24,40,.25);
  }
  .catalog-filters-toggle:checked ~ .catalog-layout .catalog-sidebar,
  .catalog-filters-toggle:checked ~ .catalog-sidebar { transform: translateX(0); }
  /* com a gaveta aberta o próprio label vira o fundo escurecido: é o que fecha
     ela no toque, já que o botão "Filtros" fica embaixo da gaveta */
  .catalog-filters-toggle:checked ~ .catalog-filters-toggle-btn {
    position: fixed; inset: 0; z-index: 1150;
    width: auto; height: auto; padding: 0; margin: 0;
    border: none; border-radius: 0;
    background: rgba(16, 24, 40, .45);
    font-size: 0; color: transparent;
  }

  .cart-page-grid, .checkout-grid { grid-template-columns: minmax(0,1fr); }
  .cart-summary-panel, .checkout-summary-panel { position: static; }
  .product-marketplace-grid { grid-template-columns: minmax(0,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  /* os cinco selos promocionais custam ~40px permanentes de um header sticky.
     Para traz-los de volta, basta remover esta regra. */
  .service-highlights { display: none; }

  .layout-content-shell, .home-section-content, .ecommerce-container,
  .catalog-page, .cart-page, .checkout-page, .orders-page, .admin-page-container { padding: 14px; }

  .ui-datagrid .ui-datagrid-content { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .product-image-wrapper { padding: 12px; }
  .product-info { padding: 11px 12px 13px; gap: 8px; }
  .product-price { font-size: 18px; }
  .add-cart-btn.ui-button { height: 44px !important; }   /* alvo de toque ≥44px */

  /* o p:selectOneMenu de ordenação recebe largura inline do widget e passava da
     borda do painel; o !important vence o style inline */
  .catalog-sort { flex-wrap: wrap; width: 100%; }
  body .catalog-sort .ui-selectonemenu {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
  }

  .product-marketplace-title { font-size: 21px; }
  .product-marketplace-price-value { font-size: 30px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-content { padding: 24px 16px; }

  /* barra fixa de compra no mobile (produto)  ➕ NOVO  */
  .product-buy-bar-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    background: #fff; border-top: 1px solid var(--line);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    display: flex; gap: 10px; align-items: center;
    box-shadow: 0 -6px 20px rgba(16,24,40,.08);
  }
  .product-buy-bar-mobile .ui-button { flex: 1; height: 46px !important; }
  /* espaço para a barra fixa não cobrir o fim da página */
  .product-page { padding-bottom: 78px; }

  /* alvos de toque >= 44px */
  .catalog-filters-toggle-btn { height: 44px; }

  /* --- card em duas colunas: o conteúdo precisa caber em ~165px --- */
  .product-title { font-size: 12.5px; min-height: 34px; }
  .product-price { font-size: 16.5px; }
  .product-code, .product-details, .detail-item { font-size: 10.5px; }
  .product-category-tag { font-size: 9.5px; padding: 2px 6px; top: 7px; left: 7px; }
  .product-flag-badge { font-size: 9.5px; padding: 2px 6px; }
  .add-cart-btn.ui-button { font-size: 12.5px !important; }
  .add-cart-btn.ui-button .ui-button-icon-left { display: none; }
  .add-cart-btn.ui-button .ui-button-text { padding: 0 !important; }

  /* cabeçalho de resultados: tudo numa linha só, sem o bloco alto de antes */
  .catalog-results-header { padding: 10px 12px; gap: 8px; margin-bottom: 10px; }
  .catalog-results-header .section-heading { margin: 0; }
  .catalog-sort { margin-top: 0; gap: 6px; }
  .catalog-sort label { font-size: 11.5px; }

  /* tiras horizontais: um respiro no fim deixa claro que rolam */
  .category-icons-inner { padding-right: 28px; gap: 6px; }
  .category-icon-item { min-width: 84px; max-width: 84px; padding: 0.4rem 0.15rem; }
  .category-icon-circle { width: 44px; height: 44px; font-size: 1.05rem; border-width: 1.5px; }
  /* sem quebra no meio da palavra: "Medicamentos" cabe inteiro em 84px */
  .category-icon-label {
    font-size: 0.66rem; line-height: 1.2; text-align: center; max-width: 100%;
  }
  .category-icons-section { padding: 0.8rem 0 0.6rem; }
  .service-highlights-inner { padding-right: 28px; }

  /* a vitrine da home já é uma grade de cards: a moldura branca em volta só
     roubava largura no celular */
  .products-section {
    background: transparent; border: none; box-shadow: none;
    padding: 0; margin: 0;
  }

  /* perfil: o p-p-4 do markup somava ~24px de cada lado ao padding do shell e
     espremia o conteúdo; e o título não precisa quebrar ao lado do ícone */
  .perfil-page.p-p-4 { padding-left: 0 !important; padding-right: 0 !important; }
  .perfil-card__title h2 { font-size: 1rem; }
  .perfil-card__title span { font-size: 0.82rem; }
  .perfil-card__title i { width: 38px; height: 38px; font-size: 1rem; }
  .perfil-card__title { gap: 0.7rem; }
}

/* Uma coluna só em telas realmente estreitas. O corte antigo em 380px pegava o
   iPhone SE/8 e a maioria dos Android em 360–375, e nesses o catálogo virava um
   card gigante por linha, com a imagem ocupando quase a tela toda. */
@media (max-width: 330px) {
  .ui-datagrid .ui-datagrid-content { grid-template-columns: minmax(0, 1fr); }
}

/* tiras roláveis horizontais (chips, abas) sem barra de rolagem visível */
.catalog-active-filters,
.category-icons-inner,
.orders-filters,
.product-tabs {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.catalog-active-filters::-webkit-scrollbar,
.category-icons-inner::-webkit-scrollbar,
.orders-filters::-webkit-scrollbar,
.product-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* acessibilidade: foco visível em tudo que é interativo */
a:focus-visible, button:focus-visible, input:focus-visible, .ui-button:focus-visible {
  outline: 2px solid var(--primary-color); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===== Timeline de entrega (meus-pedidos) ===== */

.order-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 1rem 1.25rem 0.75rem;
  border-top: 1px solid #e5e7eb;
}

.order-timeline__step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #9ca3af;
}

/* Trilho entre os marcos: desenhado à esquerda de cada passo, menos do primeiro. */
.order-timeline__step::before {
  content: '';
  position: absolute;
  top: 7px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: #e5e7eb;
}

.order-timeline__step:first-child::before {
  display: none;
}

.order-timeline__step.is-done {
  color: #166534;
}

.order-timeline__step.is-done::before {
  background: #16a34a;
}

.order-timeline__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d1d5db;
  position: relative;
  z-index: 1;
}

.order-timeline__step.is-done .order-timeline__dot {
  background: #16a34a;
  border-color: #16a34a;
}

.order-timeline__label {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.order-timeline__step small {
  font-size: 0.75rem;
  color: #9ca3af;
  min-height: 1rem;
}

@media (max-width: 600px) {
  .order-timeline {
    padding: 0.75rem 0.5rem 0.5rem;
  }

  .order-timeline__label {
    font-size: 0.75rem;
  }
}

/* ===== Fila de pedidos do balcão (pedidos.xhtml) ===== */

.admin-orders__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.admin-orders__head h1 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
}

.admin-orders__head p {
  margin: 0;
  color: #6b7280;
  font-size: 0.9375rem;
}

.admin-orders__filter {
  min-width: 200px;
}

.admin-orders__detail {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1rem 1.25rem;
  background: #f9fafb;
}

.admin-orders__detail strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
}

.admin-orders__address {
  flex: 1 1 260px;
}

.admin-orders__address p {
  margin: 0 0 0.25rem;
  color: #4b5563;
}

.admin-orders__items {
  flex: 2 1 320px;
}

.admin-orders__item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
  border-bottom: 1px dashed #e5e7eb;
  color: #4b5563;
}

.admin-orders__item:last-child {
  border-bottom: none;
}

/* ===== Retorno da Cielo (pedido-confirmado.xhtml) ===== */

.order-done {
  display: flex;
  justify-content: center;
  padding: 3rem 1rem;
}

.order-done__card {
  max-width: 560px;
  width: 100%;
  text-align: center;
  padding: 2.5rem 2rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.order-done__icon {
  font-size: 3rem;
  color: #16a34a;
}

.order-done__card h1 {
  margin: 1rem 0 0.5rem;
  font-size: 1.5rem;
}

.order-done__number {
  margin: 0 0 0.75rem;
  font-weight: 600;
  color: #374151;
}

.order-done__message {
  margin: 0 0 1.75rem;
  color: #6b7280;
  line-height: 1.6;
}

.order-done__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ===== Modalidade de entrega (checkout, passo 2) ===== */

.checkout-aviso-retirada {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  color: #92400e;
  line-height: 1.5;
}

.checkout-aviso-retirada i {
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.checkout-modalidade {
  margin-bottom: 1.25rem;
}

.checkout-loja {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
}

.checkout-loja > div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.checkout-loja strong {
  color: #166534;
}

.checkout-loja span {
  color: #4b5563;
  font-size: 0.9375rem;
}

.checkout-ajuda {
  margin: -0.5rem 0 1rem;
  color: #6b7280;
  font-size: 0.9375rem;
}

/* ===== Card de retirada (meus-pedidos) ===== */

.order-retirada {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0 1.25rem 1rem;
  padding: 0.75rem 1rem;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
}

.order-retirada > div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.order-retirada strong {
  color: #166534;
  font-size: 0.9375rem;
}

.order-retirada span {
  color: #4b5563;
  font-size: 0.875rem;
}

/* =========================================================================
   FAQ / CENTRAL DE AJUDA  (faq.xhtml + links de atendimento do rodapé)

   Classes próprias, prefixo faq-, sobre os tokens da camada de redesign.
   Nenhuma regra aqui toca classe interna do PrimeFaces — por isso a sanfona
   é <details>/<summary> puro, e não p:accordionPanel (que viria com o tema
   saga cru: não existe uma única regra .ui-accordion neste arquivo).
   ========================================================================= */

/* Glifo do WhatsApp como máscara. O PrimeIcons do PrimeFaces 10 não tem
   pi-whatsapp (só pi-facebook e pi-phone), e a máscara pinta o ícone com
   currentColor — assim o mesmo elemento serve no rodapé escuro e no botão
   verde, sem repetir o SVG em cada página. */
.icon-whatsapp {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* ---- Links de atendimento no rodapé (index.xhtml) ---------------------- */
.footer-link-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-easing);
}

.footer-link-whatsapp:hover,
.footer-contact-link:hover {
  color: #25d366;
}

/* ---- Página ------------------------------------------------------------ */
.faq-page {
  max-width: 860px;
  margin: 0 auto;
  padding-bottom: 2rem;
}

.faq-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem;
  border: 1px solid var(--primary-border);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #ffffff 0%, var(--primary-light) 100%);
  box-shadow: var(--sh-1);
}

.faq-hero-text h1 {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
  color: var(--ink);
}

.faq-hero-text p {
  margin: 0;
  max-width: 46ch;
  line-height: 1.55;
  color: var(--muted);
}

/* ---- Botão de WhatsApp (hero e rodapé da página) ----------------------- */
.faq-whatsapp-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.35rem;
  border-radius: var(--r-pill);
  background: #25d366;
  color: #ffffff;
  text-decoration: none;
  box-shadow: var(--sh-2);
  transition: background 0.18s ease, transform 0.18s ease;
}

.faq-whatsapp-button:hover {
  background: #1da851;
  transform: translateY(-1px);
}

.faq-whatsapp-button .icon-whatsapp {
  width: 1.6rem;
  height: 1.6rem;
}

.faq-whatsapp-button-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.faq-whatsapp-button-text strong {
  font-size: 1rem;
  font-weight: 700;
}

.faq-whatsapp-button-text small {
  font-size: 0.78rem;
  opacity: 0.92;
}

/* ---- Seções e sanfona -------------------------------------------------- */
.faq-section {
  margin-top: 2.25rem;
}

.faq-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.faq-section-title i {
  font-size: 1rem;
  color: var(--primary-color);
}

.faq-item {
  margin-bottom: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
  /* O offset do header sticky é medido por script.js; sem isto a âncora
     #trocas pararia embaixo do cabeçalho. */
  scroll-margin-top: calc(var(--header-height, 0px) + 1rem);
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

/* Some com o triângulo nativo (Chrome/Safari e Firefox usam seletores
   diferentes) para deixar só o +/− do ::after. */
.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary::marker {
  content: "";
}

.faq-item > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  color: var(--primary-color);
}

.faq-item[open] > summary::after {
  content: "\2212"; /* sinal de menos */
}

.faq-item[open] > summary {
  border-bottom: 1px solid var(--line-soft);
}

.faq-item > summary:hover {
  color: var(--primary-color);
}

.faq-item:target {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.faq-answer {
  padding: 0.95rem 1.15rem 1.15rem;
  color: var(--ink-2);
  line-height: 1.62;
}

.faq-answer p {
  margin: 0 0 0.7rem;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer ul,
.faq-answer ol {
  margin: 0.25rem 0 0.7rem;
  padding-left: 1.3rem;
}

.faq-answer li {
  margin-bottom: 0.35rem;
}

.faq-answer strong {
  color: var(--ink);
}

.faq-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-weight: 600;
  color: #128c7e;
  text-decoration: none;
}

.faq-inline-link:hover {
  text-decoration: underline;
}

/* ---- Chamada final ----------------------------------------------------- */
.faq-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.faq-cta h2 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  color: var(--ink);
}

.faq-cta p {
  margin: 0;
  max-width: 52ch;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 700px) {
  .faq-hero,
  .faq-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .faq-hero-text h1 {
    font-size: 1.35rem;
  }

  .faq-whatsapp-button {
    justify-content: center;
  }
}

/* ---------- FILTRO POR COLUNA — FILA DO BALCÃO (pedidos.xhtml) ----------- */
/* Especificidade maior que "body .ui-inputfield, body .ui-inputtext" (seção 12,
   ~linha 6148) de propósito: o input de filtro do PrimeFaces herda aquelas
   classes e o padding/font-size padrão (11px 13px, 13.5px) sobra na coluna
   "Pedido", que é estreita (130px) para caber "##### de despacho". Reduz só o
   filtro, sem tocar a regra genérica. */
body .ui-datatable th .admin-orders__col-filter.ui-inputfield {
  margin-top: 6px;
  padding: 6px 8px !important;
  font-size: 12.5px !important;
}

/* ============================================================
   CARRINHO RESPONSIVO  --  fonte unica de verdade abaixo de 640px

   Nao acrescente regra de carrinho em outro @media. Ate' 27/08/2026 o item do
   carrinho era um display:grid de cinco colunas, e um @media 860 o reorganizava
   com grid-template-areas. O redesign trocou o container para display:flex e o
   bloco de 860 virou letra morta -- grid-area nao faz nada dentro de um flex.
   Como flex e' nowrap por padrao, os cinco blocos (imagem, info, quantidade,
   subtotal e lixeira) ficavam numa linha so': ~415px de largura minima antes
   mesmo do nome do produto, com white-space:nowrap no subtotal impedindo a
   quebra. Num celular de 375px o nome era espremido ou a pagina rolava de lado.

   Layout desta secao, em duas linhas:
       [ img ]  nome / unidade / preco unitario
       [ - n + ]                    subtotal  [ lixeira ]

   E' flex com wrap, e nao grid com areas, de proposito: quando a largura nao
   da', o subtotal desce sozinho para uma terceira linha em vez de estourar a
   pagina. Grid com areas fixas nao tem essa saida.
   ============================================================ */
@media (max-width: 640px) {
  .cart-page-item { flex-wrap: wrap; }

  .cart-page-item-image { width: 72px; height: 72px; padding: 7px; }

  /* ocupa o resto da linha 1 e, com isso, empurra quantidade, subtotal e
     lixeira para a linha de baixo. Os 100px sao a imagem (72) + o gap (14) +
     uma folga, para a conta nunca fechar exata e sobrar item na primeira linha */
  .cart-page-item-info {
    flex: 1 1 calc(100% - 100px);
    min-width: 0;
  }

  /* cola subtotal e lixeira na direita da linha 2, com a quantidade na esquerda */
  .cart-page-item-subtotal {
    margin-left: auto;
    text-align: right;
    align-self: center;
  }
  .cart-page-item-subtotal p { font-size: 11.5px; }
  body .cart-remove-btn.ui-button.ui-widget { align-self: center; }

  /* alvo de toque >= 44px. O "body" e' obrigatorio: sem ele estas perdem para
     "body .cart-page-qty-controls .ui-button" da secao 7, que fixa 38px --
     era por isso que o alvo de 44px que existia aqui nunca valeu no carrinho. */
  body .cart-page-qty-controls { height: 44px; }
  body .cart-page-qty-controls .ui-button,
  body .cart-page-qty-controls .cart-qty-btn.ui-button {
    width: 44px !important;
  }
}

/* ============================================================
   CHECKOUT RESPONSIVO  --  fonte unica de verdade abaixo de 860px

   Nao acrescente regra de checkout em outro @media. Ate' 27/08/2026 os passos
   do checkout eram meia regra de cada camada: o @media 860 antigo dava
   flex-direction:column + align-items:stretch, e o redesign redefinia
   .checkout-steps com align-items:center sem mencionar flex-direction. Como o
   redesign vem depois no arquivo, sobrava column (do antigo) + center (do
   novo) -- combinacao que ninguem escreveu de proposito. Cada passo virava uma
   linha centralizada na sua propria largura e, como "Dados Pessoais",
   "Endereco" e "Pagamento" tem larguras diferentes, as bolinhas 1/2/3 saiam
   cada uma num recuo.

   A licao: quem redefine um flex container herda o flex-direction de quem veio
   antes. Direcao e alinhamento so' fazem sentido decididos juntos -- e' isso
   que o CheckoutMobileCssTest fixa.
   ============================================================ */
@media (max-width: 860px) {
  /* os tres passos empilhados e alinhados pela esquerda: as bolinhas ficam
     todas no mesmo eixo, independente do tamanho do rotulo */
  .checkout-steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* o tracinho entre passos so' faz sentido na horizontal */
  .checkout-step-line { display: none; }

  /* campos lado a lado nao cabem: uma coluna so' */
  .checkout-field-row { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGINADOR RESPONSIVO  --  fonte unica de verdade abaixo de 640px

   Nao acrescente regra de paginador em outro @media. O paginador do
   PrimeFaces monta 16 elementos numa linha -- "(1 of 277)", ‹‹ ‹, dez numeros
   de pagina, › ›› e o seletor de itens. Com o flex-wrap da secao base, isso
   virava tres linhas e 216px de altura (~31% de um viewport de 690px), com os
   controles de navegacao em cantos opostos: ‹‹ ‹ no fim da primeira linha e
   › ›› no comeco da ultima.

   Aqui sobra o que serve no celular:
       (1 of 277)   ‹   ›              [12]

   Os dez numeros saem porque com 277 paginas eles nao levam a lugar util --
   quem procura algo usa a busca ou os filtros. ‹‹/›› saem porque, com eles,
   a linha cabe justo em 390px mas estoura em 360px; com dois botoes sobra
   folga ate' em 320px. No desktop nada disso muda.
   ============================================================ */
@media (max-width: 640px) {
  body .ui-paginator {
    padding: 8px 10px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  /* o salto direto de pagina nao cabe -- e nao serve -- num celular */
  body .ui-paginator .ui-paginator-pages,
  body .ui-paginator .ui-paginator-first,
  body .ui-paginator .ui-paginator-last { display: none !important; }

  /* "(1 of 277)" empurra ‹ e › para a direita e nao deixa a linha crescer */
  body .ui-paginator .ui-paginator-current {
    margin-right: auto !important;
    font-size: 12.5px !important;
    white-space: nowrap;
  }

  /* alvo de toque >= 44px. Estes NAO sao .ui-paginator-page (que e' so' o
     numero de pagina), entao nao herdam tamanho nenhum das secoes anteriores
     e vinham com o padrao do tema, ~37px. */
  body .ui-paginator .ui-paginator-prev,
  body .ui-paginator .ui-paginator-next {
    min-width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* o seletor de itens por pagina encolhe, mas continua tocavel */
  body .ui-paginator .ui-selectonemenu,
  body .ui-paginator .ui-paginator-rpp-options {
    min-height: 44px !important;
    font-size: 12.5px !important;
  }
}

/* ---- Caixinha vazia das facetas do catálogo ---------------------------- */
/* O PrimeIcons do PrimeFaces 10 tem `pi-check-square` (marcado) mas nenhum
   quadrado vazio para o estado desmarcado. Até 01/09/2026 as facetas usavam
   `pi-stop`, que não existe: a classe não casava, o <i> ficava com largura zero
   e a caixinha do filtro era invisível até o cliente clicar nela.

   Desenhada aqui em vez de trocada por `pi-circle-off`: círculo é vocabulário
   de escolha única, e as facetas são de seleção múltipla. Mesmo caminho da
   `.icon-whatsapp` — classe do projeto quando o PrimeIcons não tem o glifo.
   O tamanho acompanha o `pi-check-square` ao lado, por isso vai em `em`. */
.icon-square-o {
  display: inline-block;
  width: .82em;
  height: .82em;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  opacity: .55;
  vertical-align: -.05em;
}
.catalog-facet-option:hover .icon-square-o { opacity: .9; }

/* ============================================================
   BOTOES DO CARRINHO  --  icone junto do rotulo, glifo centralizado

   O components.css do PrimeFaces 10 posiciona o icone de qualquer botao com
   `position:absolute; top:50%` mais `.ui-button-icon-left{left:.5em}`, e da'
   ao rotulo um padding assimetrico (`.3em 1em .3em 2.1em`). Isso funciona num
   botao estreito e desanda nos dois casos do carrinho:

   - nos botoes de 44px do controle de quantidade, o glifo − / + fica preso a
     ~8px da borda esquerda em vez de centralizado;
   - em "Ir para Checkout" e "Limpar Carrinho", que sao width:100%, o icone
     fica colado na borda esquerda e o rotulo centralizado — a uns 120px de
     distancia, parecendo dois elementos sem relacao.

   A saida e' a mesma nos dois: tirar o icone do fluxo absoluto e deixar o
   proprio botao centralizar, como flex.
   ============================================================ */
body .cart-page-qty-controls .ui-button .ui-icon,
body .cart-checkout-main-btn.ui-button .ui-icon,
body .cart-clear-btn.ui-button .ui-icon {
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
}

/* o botao de quantidade e' so' icone: centraliza o glifo nos 44px */
body .cart-page-qty-controls .ui-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
/* o .ui-button-text vem vazio nesses botoes e so' ocupa espaco */
body .cart-page-qty-controls .ui-button .ui-button-text {
  display: none !important;
}

/* acoes do resumo: icone e rotulo como um par, centralizados juntos */
body .cart-checkout-main-btn.ui-button,
body .cart-clear-btn.ui-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body .cart-checkout-main-btn.ui-button .ui-button-text,
body .cart-clear-btn.ui-button .ui-button-text {
  padding: 0 !important;
  text-indent: 0 !important;
}

/* ============================================================
   HOME RESPONSIVO  --  fonte unica de verdade abaixo de 640px
   ============================================================ */
@media (max-width: 640px) {
  /* o cabecalho dos parceiros empilha: o tracinho decorativo perde a funcao
     quando nao ha' largura para ele separar nada */
  .home-partners-header { flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
  .home-partners-divider { display: none; }
  .home-partners-section { padding: 1.5rem 1.15rem; border-radius: 18px; }

  /* Faixa de categorias: sao 7 itens e so' ~4 cabem. Ela sempre rolou, mas
     terminava limpa depois de "Vitaminas" e nada dizia que havia mais. O
     degrade na borda direita e' a pista -- se um dia tudo couber, ele fica
     sobre o fundo branco da propria secao e some sozinho. */
  .category-icons-section { position: relative; }
  .category-icons-section::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 1px;   /* 1px para nao cobrir o border-bottom */
    width: 36px;
    pointer-events: none;            /* nao pode roubar o toque de quem rola */
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 76%);
  }
}

/* ============================================================
   FORMULARIOS E TEXTO SECUNDARIO  --  contraste e altura de campo

   Tres coisas moram aqui, todas da auditoria de 31/08/2026.
   ============================================================ */

/* 1. Preco e unidade no card do catalogo. Estes textos estavam com
   `color:#9ca3af` escrito direto no style= do medicamentos.xhtml -- 2,54:1
   sobre branco, quando AA pede 4,5:1. Cor inline ainda por cima nao da' para o
   CSS corrigir sem !important. O --muted do tema da' 4,97:1. */
.product-unit {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 1px;
}
.product-price-consulte {
  font-size: 0.85rem;
  color: var(--muted);
}

/* 2. Campo de selecao (UF do cadastro, ordenacao do catalogo).
   O p:selectOneMenu renderiza <label class="ui-selectonemenu-label ui-inputfield">
   por dentro do wrapper. Como a regra generica `body .ui-inputfield` pinta borda
   e padding, o campo saia com borda por fora E por dentro -- 72px de altura
   contra 43px dos vizinhos. Quem carrega a moldura e' o wrapper; o rotulo so'
   escreve o texto. */
body .ui-selectonemenu .ui-selectonemenu-label {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 11px 13px !important;
  line-height: 1.25 !important;
}
body .auth-field .ui-selectonemenu,
body .checkout-field .ui-selectonemenu {
  border: 1px solid #d0d5dd !important;
  border-radius: 10px !important;
  background: #fff !important;
  width: 100%;
}

/* 3. Acao secundaria de login e cadastro.
   `.auth-btn--ghost` ja' existia com o estilo certo, mas tem especificidade
   (0,1,0) contra os (0,2,1) de `body .ui-button.ui-state-default`, que pinta
   qualquer botao de vermelho. As duas com !important, entao quem decide e' a
   especificidade -- e "Registrar" / "Voltar para Login" saiam identicos a'
   acao principal, sem nenhuma hierarquia. */
body .auth-btn--ghost.ui-button,
body .auth-btn--ghost.ui-button.ui-state-default {
  background: #fff !important;
  border: 1px solid #d0d5dd !important;
  color: var(--ink-2) !important;
}
body .auth-btn--ghost.ui-button:hover,
body .auth-btn--ghost.ui-button.ui-state-hover {
  background: var(--surface-2) !important;
  border-color: var(--muted-2) !important;
}