/* Angoprocurement 07/11/2026 — rebranding "Portal B2B" (opção A). Cor #ffc403 e logo mantidas. */
:root { --ango-ink: #1a1a1a; --ango-ink-2: #262624; --ango-bg: #f4f4f2; --ango-line: #e2e2de; --ango-muted: #5c5c57; }

/* ---------- barra escura do topo ---------- */
.ango-topbar { background: var(--ango-ink); color: #e8e8e8; font-size: 13px; }
.ango-topbar .ps-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 8px; padding-bottom: 8px; }
.ango-topbar a { color: #e8e8e8; }
.ango-topbar a:hover { color: #ffc403; }
.ango-topbar__links { display: flex; flex-wrap: wrap; gap: 20px; }
@media (max-width: 1199px) { .ango-topbar { display: none; } }

/* ---------- cabeçalho branco ---------- */
.header .header__top { background-color: #fff; border-bottom: 1px solid var(--ango-line); }
.ps-form--quick-search { border: 2px solid var(--ango-ink); border-radius: 6px; overflow: hidden; }
.ps-form--quick-search .form-group--icon { border-right: 1px solid var(--ango-line); }
.ps-form--quick-search input { border: 0 !important; }
.ps-form--quick-search button { background-color: var(--primary-color) !important; color: var(--ango-ink) !important; border-radius: 0 !important; font-weight: 700; }
.ps-form--quick-search button:hover { background-color: #e6b000 !important; }
.header .header__extra span { background-color: var(--primary-color); }
.header .header__extra span i { color: var(--ango-ink); }

/* barra de navegação: escura, com acento amarelo */
.navigation { background-color: var(--ango-ink); }
.navigation .menu > li > a,
.navigation .navigation__extra > li > a,
.navigation .navigation__extra > li > .ps-dropdown > a,
.navigation .menu--product-categories .menu__toggle,
.navigation .menu--product-categories .menu__toggle i { color: #f2f2f2; }
.navigation .menu > li > a:hover,
.navigation .navigation__extra > li > a:hover { color: #ffc403; }
.navigation .menu--product-categories .menu__toggle { background: var(--primary-color); color: var(--ango-ink); padding-left: 16px; padding-right: 16px; }
.navigation .menu--product-categories .menu__toggle i,
.navigation .menu--product-categories .menu__toggle span { color: var(--ango-ink); }
.navigation .navigation__extra > li:after { background-color: rgba(255,255,255,.2); }
.navigation .menu > li > .sub-toggle:before, .navigation .menu > li > .sub-toggle:after { background-color: #f2f2f2; }

/* telemóvel: cabeçalho branco, pesquisa com botão amarelo */
.header--mobile .navigation--mobile { background-color: #fff; border-bottom: 1px solid var(--ango-line); }
.ps-search--mobile { background-color: var(--ango-bg); }
.ps-search--mobile .form-group--nest { border: 2px solid var(--ango-ink); border-radius: 6px; overflow: hidden; background: #fff; }
.ps-search--mobile .form-group--nest input { border: 0; }
.ps-search--mobile .form-group--nest button { background-color: var(--primary-color); color: var(--ango-ink); }

/* ---------- página inicial ---------- */
#homepage-1 { background: var(--ango-bg); padding-bottom: 32px; }
.ango-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 22px; border-radius: 6px; font-weight: 700; font-size: 15px; line-height: 1.2; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, border-color .15s; text-align: center; }
.ango-btn--yellow { background: var(--primary-color); color: var(--ango-ink) !important; }
.ango-btn--yellow:hover { background: #e6b000; }
.ango-btn--ghost { background: transparent; color: #fff !important; border-color: #5a5a55; }
.ango-btn--ghost:hover { border-color: #fff; }

.ango-b2b { padding: 24px 0 8px; }
.ango-b2b__row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.ango-b2b__depts { flex: 1 1 260px; max-width: 290px; background: #fff; border: 1px solid var(--ango-line); border-radius: 8px; overflow: hidden; }
.ango-b2b__depts-title { background: var(--primary-color); color: var(--ango-ink); padding: 14px 18px; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.ango-b2b__depts ul { list-style: none; margin: 0; padding: 4px 0; }
.ango-b2b__depts li + li { border-top: 1px solid #f0f0ec; }
.ango-b2b__depts a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 18px; color: var(--ango-ink); font-size: 15px; font-weight: 500; }
.ango-b2b__depts a:hover { background: #fffbea; color: #000; }
.ango-b2b__depts a i { color: #8a8a84; font-size: 12px; }
.ango-b2b__depts-all { font-weight: 700 !important; }
.ango-b2b__main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ango-b2b__hero { background: var(--ango-ink); color: #fff; border-radius: 8px; padding: 40px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.ango-b2b__hero-text { flex: 1 1 380px; }
.ango-b2b__eyebrow { margin: 0 0 10px; color: var(--primary-color); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.ango-b2b__hero h1 { margin: 0 0 14px; color: #fff; font-size: 38px; line-height: 1.12; font-weight: 800; }
.ango-b2b__lead { margin: 0 0 24px; color: #cfcfca; font-size: 16px; line-height: 1.55; }
.ango-b2b__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ango-b2b__quick { flex: 1 1 290px; background: var(--ango-ink-2); border-radius: 8px; padding: 22px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ango-b2b__quick-title { margin: 0 0 4px; color: #fff; font-weight: 700; font-size: 16px; }
.ango-b2b__quick label { margin: 4px 0 0; color: #cfcfca; font-size: 13px; font-weight: 500; }
.ango-b2b__quick input { height: 46px; padding: 0 12px; border-radius: 6px; border: 1px solid #4a4a46; background: var(--ango-ink); color: #fff; font-size: 15px; }
.ango-b2b__quick input::placeholder { color: #9a9a94; }
.ango-b2b__quick input:focus { outline: 2px solid var(--primary-color); outline-offset: 1px; border-color: transparent; }
.ango-b2b__quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ango-b2b__quick-actions .ango-btn { flex: 1 1 140px; font-size: 14px; padding: 10px 14px; }
.ango-b2b__trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ango-b2b__trust > div { background: #fff; border: 1px solid var(--ango-line); border-radius: 8px; padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; border-top: 3px solid var(--primary-color); }
.ango-b2b__trust strong { color: var(--ango-ink); font-size: 15px; }
.ango-b2b__trust span { color: var(--ango-muted); font-size: 13px; }

.ango-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.ango-section-head h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--ango-ink); }
.ango-section-head a { font-size: 14px; font-weight: 600; color: var(--ango-ink); text-decoration: underline; text-underline-offset: 3px; }

.ango-subcats { padding: 24px 0 8px; }
.ango-subcats__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ango-subcats__item { background: #fff; border: 1px solid var(--ango-line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; color: var(--ango-ink); font-weight: 600; font-size: 14px; line-height: 1.3; transition: border-color .15s, box-shadow .15s; }
.ango-subcats__item:hover { border-color: var(--primary-color); box-shadow: 0 4px 14px rgba(0,0,0,.06); color: #000; }
.ango-subcats__img { display: block; aspect-ratio: 4 / 3; background: #f0f0ec; border-radius: 6px; overflow: hidden; }
.ango-subcats__img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

.ango-tabs { padding: 24px 0 8px; }
.ango-tabs__nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--ango-line); margin-bottom: 18px; }
.ango-tabs__nav button { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 12px 16px; font-size: 15px; font-weight: 600; color: var(--ango-muted); cursor: pointer; min-height: 44px; }
.ango-tabs__nav button:hover { color: var(--ango-ink); }
.ango-tabs__nav button.is-active { color: var(--ango-ink); font-weight: 800; border-bottom-color: var(--primary-color); }
.ango-tabs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.ango-tabs__grid .ps-product { background: #fff; border: 1px solid var(--ango-line); border-radius: 8px; padding: 12px; margin: 0; height: 100%; }
.ango-tabs__grid .ps-product:hover { border-color: #c9c9c4; }
.ango-tabs__more { margin-top: 14px; text-align: right; }
.ango-tabs__more a { font-weight: 700; color: var(--ango-ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 991px) {
  .ango-b2b__depts { max-width: none; flex-basis: 100%; }
  .ango-b2b__depts ul { display: flex; flex-wrap: wrap; padding: 8px; gap: 6px; }
  .ango-b2b__depts li + li { border-top: 0; }
  .ango-b2b__depts a { border: 1px solid var(--ango-line); border-radius: 20px; padding: 9px 14px; font-size: 14px; }
  .ango-b2b__depts a i { display: none; }
}
@media (max-width: 767px) {
  .ango-b2b { padding-top: 14px; }
  .ango-b2b__hero { padding: 24px 20px; }
  .ango-b2b__hero h1 { font-size: 28px; }
  .ango-subcats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ango-tabs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ango-tabs__nav { flex-wrap: nowrap; overflow-x: auto; }
  .ango-tabs__nav button { white-space: nowrap; }
}

/* ---------- rodapé escuro ---------- */
.ps-footer { background: var(--ango-ink); color: #cfcfca; }
.ps-footer .widget-title, .ps-footer h3, .ps-footer h4 { color: #fff; }
.ps-footer p, .ps-footer li, .ps-footer a, .ps-footer .widget_content, .ps-footer .site-copyright { color: #cfcfca; }
.ps-footer a:hover { color: var(--primary-color); }
.ps-footer__links, .ps-footer__copyright { border-top-color: #3a3a37; }
.ps-footer__links strong, .ps-footer__links p > a:first-child { color: #fff; }

/* correcções após 1ª revisão visual */
.header .navigation .menu > li > a,
.header .navigation .navigation__extra > li > a,
.header .navigation .navigation__extra > li > .ps-dropdown > a { color: #f2f2f2 !important; }
.header .navigation .menu > li > a:hover,
.header .navigation .navigation__extra > li > a:hover { color: #ffc403 !important; }
.header .navigation .menu > li > .sub-menu a { color: var(--ango-ink) !important; }
.ps-footer .ps-footer__links strong { color: #fff !important; }
.ps-footer .ps-footer__links a, .ps-footer .widget a, .ps-footer .widget li { color: #cfcfca !important; }
.ps-footer .ps-footer__links a:hover, .ps-footer .widget a:hover { color: var(--primary-color) !important; }
.ps-footer .ps-list--social a, .ps-footer .ps-list--social svg { color: #e8e8e8 !important; stroke: currentColor; }
.ps-footer .footer-payments { display: none; }
.ps-footer .widget_contact-us h3 { color: var(--primary-color) !important; }
.ango-section-head a { white-space: nowrap; }
@media (max-width: 767px) {
  .ango-b2b__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ango-b2b__trust > div { padding: 12px 14px; }
}

/* 07/11 (2): banners principais no lugar do destaque escuro — imagem inteira, sem cortes */
.ango-b2b__banners { border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--ango-line); }
.ango-b2b__banners .ps-banner { min-height: 0; height: auto; position: relative; }
.ango-b2b__banners .ps-banner img,
.ango-b2b__banners .owl-loaded .ps-banner img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; }
.ango-b2b__banners .owl-stage-outer, .ango-b2b__banners .owl-stage, .ango-b2b__banners .owl-item { height: auto !important; }
.ango-b2b__banners .owl-dots { bottom: 10px; }
@media (max-width: 991px) {
  .ango-b2b__main { display: contents; }
  .ango-b2b__banners { order: 1; flex: 1 1 100%; min-width: 0; }
  .ango-b2b__depts { order: 2; }
  .ango-b2b__trust { order: 3; flex: 1 1 100%; }
  .ango-b2b__row { gap: 14px; }
}

/* 07/11 (3): banner mais baixo e da mesma altura do bloco de departamentos.
   >=1200: 3 colunas (departamentos | banner | 4 cartões empilhados), todas com a altura do banner. */
@media (min-width: 992px) {
  .ango-b2b__row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: stretch; }
  .ango-b2b__main { display: contents; }
  .ango-b2b__depts { max-width: none; display: flex; flex-direction: column; }
  .ango-b2b__depts-title { padding: 11px 16px; font-size: 13px; }
  .ango-b2b__depts ul { flex: 1; display: flex; flex-direction: column; padding: 0; }
  .ango-b2b__depts li { flex: 1; display: flex; }
  .ango-b2b__depts a { flex: 1; padding: 6px 16px; font-size: 14px; line-height: 1.3; }
  .ango-b2b__banners { align-self: start; }
  .ango-b2b__trust { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .ango-b2b__row { grid-template-columns: 250px minmax(0, 1fr) 230px; }
  .ango-b2b__trust { grid-column: auto; display: flex; flex-direction: column; gap: 10px; }
  .ango-b2b__trust > div { flex: 1; justify-content: center; padding: 10px 14px; }
  .ango-b2b__trust strong { font-size: 14px; }
  .ango-b2b__trust span { font-size: 12.5px; line-height: 1.35; }
}
@media (min-width: 992px) {
  .ango-b2b__depts a { padding-top: 3px; padding-bottom: 3px; }
  .ango-b2b__depts-title { padding-top: 10px; padding-bottom: 10px; }
}
@media (min-width: 1200px) { .ango-b2b__trust > div { padding-top: 6px; padding-bottom: 6px; } }
@media (min-width: 1200px) and (max-width: 1399px) {
  .ango-b2b__row { grid-template-columns: 230px minmax(0, 1fr) 200px; }
  .ango-b2b__trust span { display: none; }
}

/* 07/11 (4): banner até à margem direita; os 4 cartões numa linha por baixo (anula o layout de 3 colunas) */
@media (min-width: 1200px) {
  .ango-b2b__row, .ango-b2b__row { grid-template-columns: 250px minmax(0, 1fr) !important; }
  .ango-b2b__trust { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .ango-b2b__trust > div { padding: 14px 18px !important; }
  .ango-b2b__trust strong { font-size: 15px; }
  .ango-b2b__trust span { display: block !important; font-size: 13px; }
}

/* 07/11 (5): moldura amarela rotativa no bloco de departamentos */
@property --ango-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ango-gira { to { --ango-a: 360deg; } }
.ango-b2b__depts {
  border: 0 !important; padding: 3px; border-radius: 10px;
  background: conic-gradient(from var(--ango-a), #ffc403 0deg 70deg, #e2e2de 110deg 180deg, #ffc403 180deg 250deg, #e2e2de 290deg 360deg);
  animation: ango-gira 4s linear infinite;
}
.ango-b2b__depts-title { border-radius: 7px 7px 0 0; }
.ango-b2b__depts ul { background: #fff; border-radius: 0 0 7px 7px; }
@media (prefers-reduced-motion: reduce) {
  .ango-b2b__depts { animation: none; background: #ffc403; }
}
@media (max-width: 991px) { .ango-b2b__depts ul { border-radius: 0 0 7px 7px; } }

/* 07/11 (6): banners principais em formato panorâmico 3284x1000 (o slider fica baixo mesmo em toda a largura).
   Uma imagem com outra proporção é recortada ao centro em vez de mudar a altura. */
.ango-b2b__banners .ps-banner picture { display: block; aspect-ratio: 3284 / 1000; }
.ango-b2b__banners .ps-banner img,
.ango-b2b__banners .owl-loaded .ps-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
