/* ==========================================================================
   ConjugaPrisma — header, navegacao, pesquisa e footer
   Replica o "header-2" do Porto: logo | menu + pesquisa | contactos + carrinho
   ========================================================================== */

/* --- Header --------------------------------------------------------------- */
.cp-header{position:relative;background:#fff;box-shadow:var(--cp-shadow-sm);z-index:var(--cp-z-header)}
.cp-header__main{display:flex;align-items:center;gap:var(--cp-5);
  min-height:var(--cp-header-h);padding-block:var(--cp-3)}
/* Sem flex aqui, o botao de menu (inline-flex em mobile) e o logotipo
   (bloco) caiam em linhas separadas. */
.cp-header__left{flex:0 0 auto;display:flex;align-items:center;gap:var(--cp-3)}
.cp-header__center{flex:1 1 auto;display:flex;align-items:center;gap:var(--cp-4);min-width:0}
.cp-header__right{flex:0 0 auto;display:flex;align-items:center;gap:var(--cp-4)}
.cp-logo img{max-height:70px;width:auto}

/* Sticky: encolhe ao fazer scroll, tal como o site actual */
.cp-header.is-sticky{position:fixed;inset-inline:0;top:0;animation:cpSlideDown .3s ease}
.cp-header.is-sticky .cp-header__main{min-height:var(--cp-header-h-sticky)}
.cp-header.is-sticky .cp-logo img{max-height:48px}
@keyframes cpSlideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.cp-header-spacer{display:none}
.cp-header-spacer.is-active{display:block}

/* --- Contactos + conta ---------------------------------------------------- */
.cp-header__contact{font-size:var(--cp-fs-xs);line-height:1.4;text-align:right;color:var(--cp-muted)}
.cp-header__contact strong{display:block;color:var(--cp-dark);font-size:var(--cp-fs-sm)}
.cp-header__account{display:flex;align-items:center;gap:var(--cp-2);
  font-family:var(--cp-font-head);font-size:var(--cp-fs-sm);text-transform:uppercase;
  color:var(--cp-dark);font-weight:600;white-space:nowrap}
.cp-header__account:hover{color:var(--cp-primary)}
.cp-header__account svg{width:20px;height:20px;flex:none}
.cp-header__sep{width:1px;height:28px;background:var(--cp-line)}

/* --- Mini-carrinho -------------------------------------------------------- */
.cp-minicart{position:relative}
.cp-minicart__toggle{display:flex;align-items:center;gap:var(--cp-2);background:none;border:0;
  padding:var(--cp-2);cursor:pointer;color:var(--cp-dark);position:relative}
.cp-minicart__toggle svg{width:24px;height:24px}
.cp-minicart__count{position:absolute;top:0;left:22px;min-width:18px;height:18px;
  display:grid;place-items:center;padding:0 4px;border-radius:9px;
  background:var(--cp-primary);color:#fff;font-size:10px;font-weight:700;line-height:1}
.cp-minicart__total{font-size:var(--cp-fs-sm);font-weight:600}
.cp-minicart__panel{position:absolute;right:0;top:calc(100% + 12px);width:330px;
  background:#fff;border:1px solid var(--cp-line);border-radius:var(--cp-radius-lg);
  box-shadow:var(--cp-shadow-lg);padding:var(--cp-4);z-index:var(--cp-z-dropdown);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:all var(--cp-transition)}
.cp-minicart.is-open .cp-minicart__panel{opacity:1;visibility:visible;transform:translateY(0)}
.cp-minicart__panel::before{content:"";position:absolute;top:-7px;right:22px;width:12px;height:12px;
  background:#fff;border-left:1px solid var(--cp-line);border-top:1px solid var(--cp-line);
  transform:rotate(45deg)}
.cp-minicart__list{list-style:none;margin:0 0 var(--cp-4);padding:0;max-height:300px;overflow-y:auto}
.cp-minicart__item{display:flex;gap:var(--cp-3);padding-block:var(--cp-3);align-items:flex-start;
  border-bottom:1px solid var(--cp-line-soft)}
.cp-minicart__item img{width:54px;height:54px;object-fit:contain;flex:none}
.cp-minicart__item-name{font-size:var(--cp-fs-sm);color:var(--cp-dark);display:block}
.cp-minicart__item-meta{font-size:var(--cp-fs-xs);color:var(--cp-muted)}
.cp-minicart__remove{margin-left:auto;background:none;border:0;color:var(--cp-muted);
  cursor:pointer;font-size:18px;line-height:1;padding:0 var(--cp-1)}
.cp-minicart__remove:hover{color:var(--cp-err)}
.cp-minicart__subtotal{display:flex;justify-content:space-between;font-weight:700;
  color:var(--cp-dark);margin-bottom:var(--cp-3)}
.cp-minicart__actions{display:grid;gap:var(--cp-2)}
.cp-minicart__empty{color:var(--cp-muted);text-align:center;padding-block:var(--cp-4)}

/* ==========================================================================
   PESQUISA com selector de categoria (substitui o YITH Ajax Search)
   ========================================================================== */
.cp-search{position:relative;flex:1 1 auto;max-width:520px}
.cp-search__form{display:flex;border:2px solid var(--cp-primary);border-radius:var(--cp-radius);
  overflow:hidden;background:#fff}
.cp-search__cats{flex:0 0 auto;max-width:170px;border:0;border-right:1px solid var(--cp-line);
  background:var(--cp-bg-alt);font-size:var(--cp-fs-sm);padding-inline:var(--cp-3);
  border-radius:0;cursor:pointer}
.cp-search__cats:focus{box-shadow:none}
.cp-search__input{flex:1 1 auto;border:0;padding:var(--cp-3);border-radius:0;min-width:0}
.cp-search__input:focus{box-shadow:none}
.cp-search__submit{flex:0 0 auto;border:0;border-radius:0;padding-inline:var(--cp-4);
  background:var(--cp-primary);color:#fff;cursor:pointer;display:grid;place-items:center}
.cp-search__submit svg{width:18px;height:18px}
.cp-search__submit:hover{background:var(--cp-primary-dark)}
.cp-search__results{position:absolute;inset-inline:0;top:calc(100% + 4px);background:#fff;
  border:1px solid var(--cp-line);border-radius:var(--cp-radius-lg);box-shadow:var(--cp-shadow-lg);
  max-height:420px;overflow-y:auto;z-index:var(--cp-z-dropdown);display:none}
.cp-search__results.is-open{display:block}
.cp-search__result{display:flex;gap:var(--cp-3);padding:var(--cp-3);align-items:center;
  border-bottom:1px solid var(--cp-line-soft);color:var(--cp-dark)}
.cp-search__result:hover,.cp-search__result.is-active{background:var(--cp-primary-tint)}
.cp-search__result img{width:44px;height:44px;object-fit:contain;flex:none}
.cp-search__result-name{font-size:var(--cp-fs-sm);line-height:1.3;display:block}
.cp-search__result-cat{font-size:var(--cp-fs-xs);color:var(--cp-muted)}
.cp-search__status{padding:var(--cp-4);text-align:center;color:var(--cp-muted);font-size:var(--cp-fs-sm)}
.cp-search__all{display:block;padding:var(--cp-3);text-align:center;font-size:var(--cp-fs-sm);
  font-weight:600;background:var(--cp-bg-alt)}

/* ==========================================================================
   MEGA MENU (substitui o Max Mega Menu Pro)
   ========================================================================== */
.cp-nav{flex:0 1 auto}
.cp-nav__list{display:flex;list-style:none;margin:0;padding:0;gap:var(--cp-1)}
.cp-nav__item{position:relative}
.cp-nav__link{display:flex;align-items:center;gap:var(--cp-1);padding:var(--cp-3);
  font-family:var(--cp-font-head);font-size:var(--cp-fs-sm);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;color:var(--cp-dark);white-space:nowrap;
  background:none;border:0;cursor:pointer}
.cp-nav__link:hover,.cp-nav__item.is-open>.cp-nav__link,
.cp-nav__item.current-menu-item>.cp-nav__link,
.cp-nav__item.current-menu-ancestor>.cp-nav__link{color:var(--cp-primary)}
.cp-nav__item.current-menu-item>.cp-nav__link{box-shadow:inset 0 -2px 0 var(--cp-primary)}
.cp-nav__caret{width:9px;height:9px;transition:transform var(--cp-transition);flex:none}
.cp-nav__item.is-open>.cp-nav__link .cp-nav__caret{transform:rotate(180deg)}

.cp-nav__panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--cp-line);
  border-top:2px solid var(--cp-primary);border-radius:0 0 var(--cp-radius-lg) var(--cp-radius-lg);
  box-shadow:var(--cp-shadow-lg);padding:var(--cp-5);z-index:var(--cp-z-dropdown);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all var(--cp-transition)}
.cp-nav__item.is-open>.cp-nav__panel{opacity:1;visibility:visible;transform:translateY(0)}
.cp-nav__panel--mega{width:min(920px,92vw);left:50%;transform:translate(-50%,-6px)}
/* Em modo ilustrado a largura vem do conteudo (regra acima), nao daqui. */
.cp-nav__panel--mega:has(.cp-nav__sublist--icons){left:50%}
.cp-nav__item.is-open>.cp-nav__panel--mega{transform:translate(-50%,0)}
.cp-nav__panel--simple{min-width:240px;padding:var(--cp-2)}
.cp-nav__cols{display:grid;grid-template-columns:repeat(var(--cp-mega-cols,3),1fr);gap:var(--cp-5)}
.cp-nav__sublist{list-style:none;margin:0;padding:0}
.cp-nav__sublink{display:flex;justify-content:space-between;gap:var(--cp-2);
  padding:var(--cp-2) var(--cp-3);font-size:var(--cp-fs-sm);color:var(--cp-body);
  border-radius:var(--cp-radius)}
.cp-nav__sublink:hover{background:var(--cp-primary-tint);color:var(--cp-primary)}
.cp-nav__colhead{font-family:var(--cp-font-head);font-size:var(--cp-fs-sm);text-transform:uppercase;
  color:var(--cp-dark);padding:var(--cp-2) var(--cp-3);margin:0 0 var(--cp-1);
  border-bottom:1px solid var(--cp-line-soft)}
.cp-nav__count{color:var(--cp-muted);font-size:var(--cp-fs-xs)}

/* Toggle mobile */
.cp-nav-toggle{display:none;align-items:center;gap:var(--cp-2);background:none;border:0;
  padding:var(--cp-2);cursor:pointer;color:var(--cp-dark)}
.cp-nav-toggle__bars,.cp-nav-toggle__bars::before,.cp-nav-toggle__bars::after{
  display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform var(--cp-transition),opacity var(--cp-transition)}
.cp-nav-toggle__bars{position:relative}
.cp-nav-toggle__bars::before,.cp-nav-toggle__bars::after{content:"";position:absolute;left:0}
.cp-nav-toggle__bars::before{top:-7px}
.cp-nav-toggle__bars::after{top:7px}
.cp-nav-toggle[aria-expanded=true] .cp-nav-toggle__bars{background:transparent}
.cp-nav-toggle[aria-expanded=true] .cp-nav-toggle__bars::before{transform:translateY(7px) rotate(45deg)}
.cp-nav-toggle[aria-expanded=true] .cp-nav-toggle__bars::after{transform:translateY(-7px) rotate(-45deg)}
.cp-nav__close{display:none}

@media (max-width:1199px){
  .cp-header__contact{display:none}
  .cp-nav__link{padding-inline:var(--cp-2);font-size:var(--cp-fs-xs)}
}
@media (max-width:991px){
  .cp-nav-toggle{display:inline-flex}
  .cp-header__main{flex-wrap:wrap;gap:var(--cp-3)}
  .cp-header__center{order:3;flex-basis:100%}
  .cp-header__right{margin-left:auto}
  .cp-search{max-width:none}
  .cp-nav{position:fixed;inset:0 30% 0 0;background:#fff;z-index:var(--cp-z-overlay);
    transform:translateX(-100%);transition:transform var(--cp-transition);
    overflow-y:auto;padding:var(--cp-5);box-shadow:var(--cp-shadow-lg)}
  .cp-nav.is-open{transform:translateX(0)}
  .cp-nav__close{display:block;margin-left:auto;background:none;border:0;font-size:24px;
    line-height:1;cursor:pointer;color:var(--cp-dark)}
  .cp-nav__list{flex-direction:column;gap:0}
  .cp-nav__link{padding:var(--cp-3) 0;font-size:var(--cp-fs-base);width:100%;
    border-bottom:1px solid var(--cp-line-soft);justify-content:space-between}
  .cp-nav__panel,.cp-nav__panel--mega{position:static;width:auto;transform:none;opacity:1;
    visibility:visible;display:none;border:0;box-shadow:none;padding:var(--cp-2) 0 var(--cp-3) var(--cp-4)}
  .cp-nav__item.is-open>.cp-nav__panel{display:block;transform:none}
  .cp-nav__cols{grid-template-columns:1fr;gap:var(--cp-3)}
  .cp-nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);
    z-index:calc(var(--cp-z-overlay) - 1);opacity:0;visibility:hidden;
    transition:opacity var(--cp-transition)}
  .cp-nav-backdrop.is-open{opacity:1;visibility:visible}
  body.cp-nav-open{overflow:hidden}
}
@media (max-width:575px){ .cp-nav{inset-inline:0 10%} }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.cp-footer{background:var(--cp-dark);color:#b4b4b4;font-size:var(--cp-fs-sm);margin-top:var(--cp-8)}
.cp-footer a{color:#d8d8d8}
.cp-footer a:hover{color:var(--cp-primary)}
.cp-footer h4,.cp-footer .cp-footer__title{color:#fff;font-size:var(--cp-fs-md);
  margin-bottom:var(--cp-4);padding-bottom:var(--cp-2);
  border-bottom:1px solid rgba(255,255,255,.12)}
.cp-footer__main{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:var(--cp-6);
  padding-block:var(--cp-7)}
.cp-footer__block+.cp-footer__block{margin-top:var(--cp-5)}
.cp-footer__label{color:#fff;font-weight:600;display:block;margin-bottom:var(--cp-1)}
.cp-footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding-block:var(--cp-4);
  display:flex;flex-wrap:wrap;gap:var(--cp-4);align-items:center;justify-content:space-between;
  font-size:var(--cp-fs-xs)}
.cp-social{display:flex;gap:var(--cp-2);list-style:none;margin:var(--cp-4) 0 0;padding:0}
.cp-social a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;transition:background var(--cp-transition)}
.cp-social a:hover{background:var(--cp-primary)}
.cp-social svg{width:16px;height:16px}
.cp-hours{margin:0}
.cp-hours dt{color:#fff;font-weight:600}
.cp-hours dd{margin:0 0 var(--cp-2)}
@media (max-width:991px){ .cp-footer__main{grid-template-columns:repeat(2,1fr)} }
@media (max-width:575px){ .cp-footer__main{grid-template-columns:1fr} }

/* Newsletter (substitui o formulario do MailPoet) */
.cp-newsletter__form{display:flex;gap:var(--cp-2);margin-top:var(--cp-3)}
.cp-newsletter__form input[type=email]{flex:1 1 auto;background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);color:#fff}
.cp-newsletter__form input[type=email]::placeholder{color:#8d8d8d}
.cp-newsletter__msg{margin-top:var(--cp-2);font-size:var(--cp-fs-xs)}
@media (max-width:479px){ .cp-newsletter__form{flex-direction:column} }

/* --- Botao flutuante de WhatsApp (substitui o Joinchat) ------------------- */
/* ==========================================================================
   ACCOES FLUTUANTES
   Uma coluna ancorada ao canto inferior direito. O WhatsApp e' o ultimo item,
   por isso fica sempre encostado em baixo; o "voltar ao topo" cresce por cima
   dele. Nao ha `bottom` a acertar em dois sitios, logo nao ha sobreposicao
   possivel — nem quando um deles aparece ou desaparece.
   ========================================================================== */
.cp-floats{position:fixed;right:20px;bottom:20px;z-index:var(--cp-z-overlay);
  display:flex;flex-direction:column;gap:var(--cp-3);align-items:center;
  pointer-events:none}
.cp-float{pointer-events:auto;display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;border:0;cursor:pointer;color:#fff;
  box-shadow:0 6px 20px rgb(0 0 0 / .22);
  transition:transform var(--cp-transition),background var(--cp-transition),
    opacity var(--cp-transition)}
.cp-float:hover{transform:scale(1.08);color:#fff}
.cp-float:focus-visible{outline:3px solid var(--cp-primary);outline-offset:3px}
.cp-float--wa{background:#25d366}
.cp-float--wa:hover{background:#1ebe5a}
.cp-float--top{background:var(--cp-dark)}
.cp-float--top:hover{background:var(--cp-primary)}
/* [hidden] por omissao no HTML: sem JS nunca aparece um botao que nao faz nada. */
.cp-float--top[hidden]{display:none}

@media (max-width:767px){
  .cp-floats{right:14px;bottom:14px;gap:var(--cp-2)}
  .cp-float{width:46px;height:46px}
  .cp-float svg{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  .cp-float:hover{transform:none}
}

@media print{ .cp-floats,.cp-header,.cp-footer{display:none} }

/* --- Breadcrumbs ---------------------------------------------------------- */
.cp-breadcrumb{background:var(--cp-bg-alt);border-bottom:1px solid var(--cp-line);
  padding-block:var(--cp-3);font-size:var(--cp-fs-xs)}
.cp-breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--cp-2);list-style:none;margin:0;padding:0;
  align-items:center}
.cp-breadcrumb li::after{content:"/";margin-left:var(--cp-2);color:var(--cp-muted)}
.cp-breadcrumb li:last-child::after{content:""}
.cp-breadcrumb li:last-child{color:var(--cp-muted)}
.cp-page-header{background:var(--cp-bg-alt);padding-block:var(--cp-5);
  border-bottom:1px solid var(--cp-line)}
.cp-page-header h1{margin:0}

/* ==========================================================================
   MEGA MENU
   O painel antigo era teal com icones de linha branca. Isso nao e' capricho:
   os icones SAO brancos, num painel branco desapareciam. Por isso o painel
   escurece quando ha icones — e so nesse caso.
   ========================================================================== */

/* --- Modo ilustrado: painel teal, icone por cima do nome ------------------ */
/* O painel acompanha o conteudo em vez de ter largura fixa: com 15 categorias
   fica largo, com 6 fica estreito. A grelha usa auto-fit, por isso o numero de
   colunas resulta da largura disponivel — nao de um numero que eu escolhi. */
.cp-nav__panel--mega:has(.cp-nav__sublist--icons){
  background:var(--cp-gradient);border:0;border-radius:var(--cp-radius-xl);
  padding:clamp(1rem,1.6vw,1.5rem);width:max-content;max-width:92vw;
  box-shadow:0 24px 56px rgba(31,127,134,.32);
  max-height:min(70vh,640px);overflow-y:auto}

.cp-nav__sublist--icons{display:grid;
  /* Numero de colunas vem do PHP, que conhece a contagem de itens. */
  grid-template-columns:repeat(var(--cp-mega-cols,3),minmax(126px,1fr));
  gap:clamp(.15rem,.5vw,.4rem);width:100%}

.cp-nav__sublink--icon{flex-direction:column;align-items:center;text-align:center;
  gap:var(--cp-2);padding:var(--cp-3) var(--cp-2);
  border-radius:var(--cp-radius-lg);height:100%;justify-content:flex-start;
  color:#fff;transition:background .3s var(--cp-ease),transform .3s var(--cp-ease)}
.cp-nav__sublink--icon:hover{background:rgba(255,255,255,.16);color:#fff;
  transform:translateY(-2px)}

.cp-nav__icon{width:42px;height:42px;object-fit:contain;flex:none;
  transition:transform .35s var(--cp-ease)}
.cp-nav__sublink--icon:hover .cp-nav__icon{transform:scale(1.12)}

.cp-nav__sublink--icon .cp-nav__label{font-family:var(--cp-font-head);
  font-size:.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;line-height:1.25;
  /* Duas linhas no maximo: "Gavetas/Automatic Cash" nao pode empurrar a grelha. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;hyphens:auto}
.cp-nav__sublink--icon .cp-nav__count{display:none}

/* Em ecras estreitos o painel nao cabe com 5 colunas. */
@media (max-width:1199px){
  .cp-nav__sublist--icons{grid-template-columns:repeat(min(var(--cp-mega-cols,3),4),minmax(118px,1fr))}
}

/* --- Modo lista: sem icones, mas com hierarquia --------------------------- */
.cp-nav__sublist:not(.cp-nav__sublist--icons) .cp-nav__sublink{
  padding:var(--cp-2) var(--cp-3);border-radius:var(--cp-radius);
  align-items:baseline}
.cp-nav__sublist:not(.cp-nav__sublist--icons) .cp-nav__label{
  flex:1 1 auto;position:relative;padding-left:0;transition:padding-left .25s var(--cp-ease)}
.cp-nav__sublist:not(.cp-nav__sublist--icons) .cp-nav__sublink:hover .cp-nav__label{
  padding-left:var(--cp-3)}
.cp-nav__sublist:not(.cp-nav__sublist--icons) .cp-nav__label::before{
  content:"";position:absolute;left:0;top:50%;width:0;height:1.5px;
  background:var(--cp-primary);transition:width .25s var(--cp-ease)}
.cp-nav__sublist:not(.cp-nav__sublist--icons) .cp-nav__sublink:hover .cp-nav__label::before{
  width:var(--cp-2)}
/* Contagem discreta, alinhada a direita — nao e' o assunto principal. */
.cp-nav__sublist:not(.cp-nav__sublist--icons) .cp-nav__count{
  font-variant-numeric:tabular-nums;font-size:11px;color:var(--cp-line);
  flex:none;transition:color .25s var(--cp-ease)}
.cp-nav__sublist:not(.cp-nav__sublist--icons) .cp-nav__sublink:hover .cp-nav__count{
  color:var(--cp-muted)}

/* Sem icones o painel abre em colunas equilibradas em vez de uma lista longa. */
.cp-nav__panel--mega:not(:has(.cp-nav__sublist--icons)) .cp-nav__sublist{
  columns:var(--cp-mega-cols,3);column-gap:clamp(1rem,2.5vw,2.5rem)}
.cp-nav__panel--mega:not(:has(.cp-nav__sublist--icons)) .cp-nav__subitem{
  break-inside:avoid}

@media (max-width:991px){
  .cp-nav__panel--mega:has(.cp-nav__sublist--icons){background:none;
    box-shadow:none;padding:0;width:auto}
  .cp-nav__sublist--icons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-nav__sublink--icon{flex-direction:row;text-align:left;
    justify-content:flex-start;gap:var(--cp-3);color:var(--cp-body);
    padding:var(--cp-2) 0}
  .cp-nav__sublink--icon:hover{background:var(--cp-primary-tint);
    color:var(--cp-primary-dark);transform:none}
  /* Fora do painel teal, um icone branco precisa de fundo escuro. */
  .cp-nav__icon{width:34px;height:34px;background:var(--cp-primary);
    border-radius:var(--cp-radius);padding:4px}
  .cp-nav__panel--mega:not(:has(.cp-nav__sublist--icons)) .cp-nav__sublist{columns:1}
}
@media (max-width:575px){
  .cp-nav__sublist--icons{grid-template-columns:1fr}
}

/* ==========================================================================
   BARRA SUPERIOR EM ECRAS ESTREITOS
   Ao envolver, o telefone, a nota de tarifario, o email e os dois links de
   conta davam tres linhas empilhadas antes de se chegar ao logotipo. Fica o
   essencial de um site B2B — ligar e entrar — numa linha so.
   ========================================================================== */
@media (max-width:767px){
  .cp-header__top-inner{gap:var(--cp-3);flex-wrap:nowrap}
  .cp-header__top-left small,
  .cp-header__top-email{display:none}
  .cp-header__top-right{margin-left:auto;white-space:nowrap}
}
@media (max-width:400px){
  /* Aqui ja nao cabem os dois: "Revendedores" e' o que leva a conta. */
  .cp-header__top-right a:not(.cp-header__reseller){display:none}
}