/* ============================================================
   JochPlus ERP — Cores da marca nas páginas públicas do Frappe
   (loja, portal e formulários web)

   As páginas da loja são geradas pela app Webshop e não por nós, por
   isso aqui só se aplicam cores e espaçamentos sobre a estrutura que
   ela produz. Nada de mexer em posições: se a Webshop mudar o HTML
   numa actualização, as cores continuam a aplicar-se e no pior caso
   ficam sem efeito, sem partir a página.
   ============================================================ */

:root {
  --jp-azul:     #003087;
  --jp-azul-c:   #0057B8;
  --jp-dourado:  #C8A84B;
  --jp-fundo:    #F8F9FA;
  --jp-texto:    #1A1A1A;
  --jp-cinza:    #6C757D;
  --jp-borda:    #E3E8EF;
}

/* Variáveis do próprio Frappe: apanha os componentes que as respeitam
   sem ser preciso conhecer cada classe da Webshop */
:root {
  --primary:            var(--jp-azul);
  --primary-color:      var(--jp-azul);
  --text-color:         var(--jp-texto);
  --heading-color:      var(--jp-azul);
  --btn-primary-bg:     var(--jp-azul);
  --navbar-height:      60px;
}

body { color: var(--jp-texto); background: #fff; }

/* --- Barra de navegação --- */
.navbar,
.website-navbar {
  background: var(--jp-azul) !important;
  border-bottom: 3px solid var(--jp-dourado);
  box-shadow: 0 2px 12px rgba(0, 48, 135, .25);
}
.navbar .nav-link,
.navbar .navbar-brand,
.navbar a { color: #fff !important; }
.navbar .nav-link:hover { color: var(--jp-dourado) !important; }
/* item activo: sublinhado dourado em vez de fundo cinzento */
.navbar .nav-item.active > .nav-link,
.navbar .nav-link.active {
  color: var(--jp-dourado) !important;
  border-bottom: 2px solid var(--jp-dourado);
}

/* --- Títulos e ligações --- */
h1, h2, h3, h4 { color: var(--jp-azul); font-weight: 700; }
a { color: var(--jp-azul-c); }
a:hover { color: var(--jp-azul); }

/* --- Botões --- */
.btn-primary,
.btn-dark {
  background-color: var(--jp-azul) !important;
  border-color: var(--jp-azul) !important;
  color: #fff !important;
  font-weight: 600;
}
.btn-primary:hover,
.btn-dark:hover {
  background-color: var(--jp-azul-c) !important;
  border-color: var(--jp-azul-c) !important;
}
.btn-outline-primary {
  color: var(--jp-azul) !important;
  border-color: var(--jp-azul) !important;
}
.btn-outline-primary:hover {
  background-color: var(--jp-azul) !important;
  color: #fff !important;
}

/* --- Cartões de produto --- */
.card,
.product-card,
.item-card {
  border: 1px solid var(--jp-borda);
  border-radius: 12px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover,
.product-card:hover,
.item-card:hover {
  box-shadow: 0 8px 28px rgba(0, 48, 135, .12);
  transform: translateY(-3px);
  border-color: var(--jp-azul-c);
}

/* Espaço da imagem: fundo suave em vez do cinzento vazio com as
   iniciais, enquanto os artigos não têm fotografia */
.product-image,
.website-image-placeholder,
.placeholder-div {
  background: linear-gradient(135deg, var(--jp-fundo) 0%, #EDF1F7 100%) !important;
  color: var(--jp-cinza) !important;
  border-radius: 10px;
}

/* --- Preço --- */
.product-price,
.item-price,
.price {
  color: var(--jp-azul) !important;
  font-weight: 800;
}

/* "Kz 42.000,00" partia-se em duas linhas, o Kz numa e o número na
   outra, e o "(Kz 42.000,00 / Unidade)" em quatro. Um preço partido lê-se
   mal e dá ar de coisa avariada.

   O espaço entre a moeda e o valor é um espaço normal, e o navegador
   quebra ali como quebraria entre duas palavras. Isto diz-lhe que não. */
.product-price,
.product-price span,
.formatted-price,
.item-price,
.price {
  white-space: nowrap;
}

/* O preço grande com pouca largura era o que forçava a quebra. Encolhe
   quando o espaço é pouco, em vez de transbordar. */
.product-price {
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  line-height: 1.3;
}

.product-price .formatted-price {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--jp-cinza) !important;
}

/* "Fale Connosco" saía em duas linhas pelo mesmo motivo. */
.btn-inquiry,
.btn-add-to-cart,
.btn-add-to-cart-basic {
  white-space: nowrap;
}

/* --- Migalhas de navegação --- */
.breadcrumb-container,
.breadcrumb { background: transparent; padding-left: 0; }
.breadcrumb a { color: var(--jp-azul-c); }

/* --- Filtros laterais --- */
.filter-section,
.filters-section {
  border: 1px solid var(--jp-borda);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}

/* --- Campo de pesquisa --- */
input.form-control:focus,
.search-box input:focus {
  border-color: var(--jp-azul-c);
  box-shadow: 0 0 0 3px rgba(0, 87, 184, .15);
}

/* --- Rodapé --- */
.web-footer,
footer.footer {
  background: var(--jp-azul);
  color: #fff;
  border-top: 3px solid var(--jp-dourado);
}
.web-footer a,
footer.footer a { color: #fff; }
.web-footer a:hover,
footer.footer a:hover { color: var(--jp-dourado); }

/* ------------------------------------------------------------------
   GRELHA DE PRODUTOS
   O webshop desenha os cartões em duas colunas largas, e numa página de
   catálogo isso obriga a rolar muito para ver pouco. Três por linha, com
   as quebras habituais para ecrãs estreitos.
   ------------------------------------------------------------------ */
.product-container .row > [class*="col-"],
#product-listing .row > [class*="col-"] {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

@media (max-width: 900px) {
  .product-container .row > [class*="col-"],
  #product-listing .row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 600px) {
  .product-container .row > [class*="col-"],
  #product-listing .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}