/* Dreambooks - instant product search.
   Results-page cards reuse the theme's UIkit classes (uk-card / el-title /
   el-meta / el-content); the chrome (search bars, dropdown panel, drawer)
   follows the dreambooks mockup design language (brandbook blues, pills). */

.dbps,
.dbps-page {
  --dbps-primary: #6AAFDC;
  --dbps-primary-dark: #4A8AB0;
  --dbps-primary-light: #EAF4FA;
  --dbps-border: #ECECEC;
  --dbps-bg-alt: #F2F7F8;
  --dbps-text: #33363B;
  --dbps-subtle: #A9AAAA;
  --dbps-pill: 36px;
}

.dbps {
  position: relative;
  /* width: 100%; */
  width: 560px;
  /* A largura fixa é o desenho do DESKTOP; abaixo dela transbordava o ecrã
     (visto no painel do menu móvel). Nunca exceder o contentor. */
  max-width: 100%;
}

/* Shared search field (header dropdown + results page): same pill look. */
.dbps-field { position: relative; flex: 1 1 auto; min-width: 0; }
/* Página de resultados: a barra tem a largura do desenho (560) e PÁRA aí, para
   os botões Filtros/Ordenar ficarem logo ao lado em vez de encostados à direita.
   Em ecrãs estreitos a coluna passa a 1-1 e o max-width deixa-a encolher. */
.dbps-page .dbps-field { flex: 0 0 auto; width: 560px; max-width: 100%; }
/* Filtros + Ordenar são UM bloco: nunca se separam um do outro, seja qual for
   a largura. Encostam à direita quando partilham a linha com a barra; quando a
   linha não chega, DESCEM JUNTOS e alinham à esquerda, com a barra a ocupar a
   largura toda por cima. */
.dbps-toolbar-actions { display: flex; align-items: center; gap: 10px; }

@media (min-width: 960px) {
  .dbps-toolbar-actions { justify-content: flex-end; }
}

/* Abaixo do ponto de quebra a barra deixa de ter a largura fixa do desenho:
   sozinha na linha, ocupa-a inteira — era esta a regra que faltava e que fazia
   a barra ficar a 560px com um vazio à direita. */
@media (max-width: 959px) {
  .dbps-page .dbps-field { width: 100%; }
}
.dbps-search-ico {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--dbps-subtle);
  pointer-events: none;
}
.dbps-input,
.dbps-page-input {
  /* 100%, NÃO 560px fixos: o campo herda a largura do contentor, e é o
     contentor que manda (`.dbps` no cabeçalho, `.dbps-field` na página de
     resultados). Com uma largura fixa aqui, o input deixava de encolher no
     telemóvel e ficava um vazio entre a barra e o botão Filtros no desktop,
     porque a coluna continuava a esticar. */
  width: 100%;
  height: 34px;
  padding: 0 44px 0 20px;
  box-sizing: border-box;
  border: 1.5px solid var(--dbps-border);
  border-radius: var(--dbps-pill);
  background: var(--dbps-bg-alt);
  color: var(--dbps-text);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
/* Os campos de preço trazem `uk-input`, e o tema define o placeholder do
   uk-input a BRANCO 50% (rgba(255,255,255,.5)) — sobre o fundo claro do painel
   ficava praticamente invisível. Herdam agora o mesmo cinzento dos outros
   campos da suite. */
.dbps-input::placeholder,
.dbps-page-input::placeholder,
.dbps-price-range input::placeholder { color: var(--dbps-subtle); }
.dbps-input:focus,
.dbps-page-input:focus {
  border-color: var(--dbps-primary);
  box-shadow: 0 0 0 3px rgba(106, 175, 220, .14);
  background: #fff;
}

.dbps-results {
  /* Panel constrained to the SITE CONTAINER width (1336px, the customizer page
     width), centered — not edge-to-edge. Fixed to the viewport; the top edge is
     set by JS to sit just under the search input. Mockup look: white, soft
     shadow, rounded, small gap below the input. */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1336px;
  box-sizing: border-box;
  z-index: 1050;
  margin-top: 10px;
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--dbps-border, #ECECEC);
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.12);
  padding: 28px 32px;
}

/* Full-width dropdown ("mega" panel): cards in a responsive grid across the width.
   2 cols (mobile) / 3 (>=640) / 4 (>=960). Compact: no long description. */
/* Colunas/goteiras vêm do grid UIkit nativo no markup (uk-grid uk-grid-small
   uk-child-width-1-2 …-1-6@l uk-grid-match) — sem flexbox próprio. */
.dbps-dd-grid > * > .el-item { height: 100%; }
/* Título e padding do card: NATIVOS (uk-card-title já é 14px/500; uk-card-small
   já tem body 14px) — sem overrides. */

/* Card image: DROPDOWN ONLY keeps a fixed aspect-ratio box (compact, regular
   rows). The results grid shows images exactly like the theme's category pages —
   natural size, no crop. */
.dbps-dd-grid .uk-card-media-top .uk-inline-clip { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.dbps-dd-grid .uk-card-media-top img { width: 100%; height: 100%; object-fit: cover; }

/* Price line: markup mirrors the theme's category card (el-content + <span>
   prefix), so on the results page the native #product-grid rules in styles.css
   do ALL the styling. The amount keeps a .dbps-amount hook span (lazy fetch) —
   shield it from the small/grey prefix-span rule; the dropdown grid (outside
   #product-grid) mirrors the two native price rules, nothing more. */
#product-grid .el-content span.dbps-amount,
.dbps-dd-grid .el-content span.dbps-amount { font-size: inherit; font-weight: inherit; color: inherit; }
.dbps-dd-grid .el-content { font-weight: bold; }
.dbps-dd-grid .el-content span:not(.dbps-amount) { font-size: 11px; font-weight: 400; color: #A9AAAA; }
.dbps-amount { display: inline-block; min-width: 3ch; }
.dbps-eur { color: #6b6b6b; }
.dbps-price-bounds { font-weight: 400; font-size: .8em; color: #6b6b6b; }

/* "See all results" CTA: centered pill button (mockup .btn-primary). */
.dbps-seeall {
  display: block;
  width: fit-content;
  /* à direita do dropdown (coerente com o pill CTA dos cartões) */
  margin: 22px 0 4px auto;
  padding: 12px 30px;
  border-radius: 36px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  background: #6AAFDC;
  transition: background .15s, box-shadow .15s;
}
/* Blindagem da cor do texto: o dropdown também é renderizado DENTRO do menu
   móvel (Maximenu CK), cujo contentor define `color: #808080`. A herança perde
   para a regra acima, mas uma regra do tema que aponte ao <a> (ex.: `.x a`,
   especificidade 0,1,1) ganharia a `.dbps-seeall` (0,1,0). Fixar com elemento +
   estados garante o mesmo branco no desktop e no telemóvel. */
a.dbps-seeall,
a.dbps-seeall:link,
a.dbps-seeall:visited,
a.dbps-seeall:focus {
  color: #fff;
}

.dbps-seeall:hover {
  background: #4A8AB0;
  color: #fff;
  box-shadow: 0 4px 16px rgba(106, 175, 220, .35);
  text-decoration: none;
}

.dbps-empty { padding: 40px 12px; color: #A9AAAA; text-align: center; font-size: 14px; }

/* "Mostrar mais": revela +24 resultados (paginação client-side, sem ?page=). */
.dbps-more { text-align: center; }
.dbps-load-more {
  display: inline-block;
  margin: 22px auto 4px;
  padding: 12px 30px;
  border: 0;
  border-radius: 36px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: #6AAFDC;
  cursor: pointer;
}
.dbps-load-more:hover {
  background: #4A8AB0;
  box-shadow: 0 4px 16px rgba(106, 175, 220, .35);
}

/* Card CTA (Personalizar/Comprar — espelha o botão da página de produto).
   Rodapé como na maquete: separador a toda a largura do corpo + pill à direita.
   É um <span> dentro do <a> do cartão (o clique é a navegação do cartão). */
/* O cartão recorta o rodapé: o sangramento de -30px cobre qualquer padding de
   corpo dos temas (20px pt, valores distintos nos temas es/br) e o overflow
   garante a linha EXATAMENTE de borda a borda, sem sair do card. */
/* Recorta o sangramento do separador do rodapé (só o grid o tem). */
.dbps-cards .uk-card { overflow: hidden; }

/* Preços/CTA alinhados entre cartões (efeito "height-match" dos títulos, sem
   JS): os cartões já têm altura igual (uk-grid-match); o corpo vira coluna
   flex e o bloco de preço encosta ao FUNDO — títulos de 1-3 linhas deixam de
   empurrar o preço para alturas diferentes. */
a.dbps-item,
.dbps-cards .uk-card { display: flex; flex-direction: column; }
a.dbps-item .uk-card-body,
.dbps-cards .uk-card > .uk-card-body { display: flex; flex-direction: column; flex: 1; }
a.dbps-item .uk-card-body .el-content.uk-panel { margin-top: auto; padding-top: 10px; }
/* Rodapé do botão — SÓ nos grids do Builder (.dbps-cards). Os cartões da
   pesquisa deixaram de ter botão e separador. O contentor do link não tem
   classe (com link_margin=remove as condicionais não saem), por isso apanha-se
   por :has() no filho DIRETO, que sobrevive a elementos novos no cartão. */
.dbps-cards .uk-card-body > *:has(> .el-link) {
  /* margin-top auto ancora o rodapé ao fundo do cartão. */
  margin: auto -30px 0;
  padding: 12px 30px 0;
  border-top: 1px solid var(--dbps-border, #ECECEC);
  text-align: right;
}
.dbps-cards .el-link {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 36px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  color: #fff;
  background: #6AAFDC;
}
.dbps-cards .uk-card:hover .el-link {
  background: #4A8AB0;
  box-shadow: 0 4px 16px rgba(106, 175, 220, .35);
}

/* Preço do grid do Builder: o meta sai como uk-h2 e ficava muito maior que
   o do cartão da pesquisa (16px/700 + 10px de padding). A margem de 20px
   vem do prop meta_margin=default — o uk-margin-*-top é !important e não se
   vence por especificidade. */
.dbps-cards .el-meta {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  padding-top: 10px;
}

/* Results page toolbar: layout is a native UIkit grid set in results.php
   (search full-row on small, everything on one row from @s up). */
.dbps-filters-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 22px;
  border: 1.5px solid var(--dbps-border, #ECECEC);
  border-radius: 36px;
  background: #fff;
  color: var(--dbps-text, #33363B);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.dbps-filters-open:hover {
  border-color: var(--dbps-primary, #6AAFDC);
  color: var(--dbps-primary-dark, #4A8AB0);
  background: var(--dbps-primary-light, #EAF4FA);
}
.dbps-filters-icon { display: block; }

/* Sort select: pill matching the mockup controls, custom chevron. */
.dbps-sort {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 40px 0 20px;
  border: 1.5px solid var(--dbps-border, #ECECEC);
  border-radius: 36px;
  background-color: #fff;
  color: var(--dbps-text, #33363B);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: border-color .15s, color .15s;
}
.dbps-sort:hover,
.dbps-sort:focus {
  border-color: var(--dbps-primary, #6AAFDC);
  color: var(--dbps-primary-dark, #4A8AB0);
  outline: none;
}
.dbps-page-summary { margin: 8px 0 20px; color: #595959; }

/* Results grid: native UIkit grid, same classes as the site's category pages
   (uk-child-width-1-2 / 1-3@m / 1-4@l + uk-grid-small + uk-grid-match), set on
   the server-rendered container in results.php. The JS calls UIkit.update()
   after each render, so wrapped-row margins stay correct. */
/* Alturas iguais: o uk-grid-match NATIVO já estica os filhos das células —
   sem regra própria. */

/* Mobile: product cards borderless + grid FULL-BLEED to the device edges —
   the gutters BETWEEN cards stay (uk-grid-small); only the container's side
   padding (15px below @s) is cancelled. Products only — toolbar keeps padding.
   margin-left = -15px gutter offset (uk-grid-small) + -15px container padding. */
@media (max-width: 639px) {
  #product-grid.dbps-grid .uk-card-secondary,
  .dbps-dd-grid .uk-card-secondary { border: none; box-shadow: none; }
  #product-grid.dbps-grid { margin-left: -30px; margin-right: -15px; }
}

/* Facets (results page) — ACORDEÃO, igual ao filtro do catálogo (JA MegaFilter
   em /molduras-fotos). Os valores abaixo são os que a folha do site aplica lá:
   título 18px #A9AAAA sem maiúsculas e peso normal, chevron encostado à
   direita, separador 1px #CAD6D6 entre grupos e opções a 16px #333.
   O chevron é desenhado em CSS (bordas rodadas) e NÃO com um ícone de fonte:
   o MegaFilter usa \f078/\f054 do FontAwesome, que só existe naquelas páginas —
   depender dele deixaria a seta invisível na pesquisa. */
.dbps-facet-group { border-bottom: 1px solid #CAD6D6; padding: 18px 0; }
/* O primeiro grupo MANTÉM o padding de topo: acima dele está sempre a linha do
   bloco de preço, e sem espaço o separador ficava colado ao título "Secções". */

.dbps-facet-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: #A9AAAA;
  text-align: left;
  text-transform: none;
}
/* Só o botão do acordeão é clicável — o bloco do preço reutiliza esta classe
   para o título e não abre nem fecha nada. */
button.dbps-facet-title { cursor: pointer; }
.dbps-facet-chevron {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);   /* aberto: aponta para baixo */
  transition: transform .15s ease;
}
.dbps-facet-title[aria-expanded="false"] .dbps-facet-chevron {
  transform: translateX(-2px) rotate(-45deg);  /* fechado: aponta para a direita */
}
.dbps-facet-title[aria-expanded="false"] + .dbps-facet-list { display: none; }

/* Vertical list in the sidebar (like the catalog layered navigation). */
.dbps-facet-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.dbps-facet-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.4;
  color: #333333;
}
.dbps-facet-item input { margin: 0; }
.dbps-facet-count { color: #A9AAAA; font-size: 0.85em; }
/* Zero-result options are hidden (not greyed); a group with nothing visible hides too. */
.dbps-facet-item--empty { display: none; }
.dbps-facet-group--empty { display: none; }

/* Primeiro bloco do painel: mesmo separador e espaçamento dos grupos de
   facetas, para ler como o primeiro deles e não como algo colado à parte. */
.dbps-price:not(:empty) { border-bottom: 1px solid #CAD6D6; padding-bottom: 18px; margin-bottom: 0; }
.dbps-price .dbps-facet-title { margin-bottom: 14px; }
.dbps-price-range { display: flex; align-items: center; gap: 6px; max-width: 260px; }
.dbps-price-range input { width: 90px; }

/* Active-filter chips + clear-all (results page). */
.dbps-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.dbps-active-filters:empty { display: none; }
.dbps-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border: 1px solid #cfd8e3; border-radius: 14px;
  background: #f2f6fb; color: #33475b; font-size: .82rem; line-height: 1.6; cursor: pointer;
}
.dbps-chip:hover { background: #e6eef7; }
.dbps-chip span { font-size: 1.15em; line-height: 1; }
.dbps-chip-clear {
  padding: 2px 8px; border: 0; background: none; color: #0a66c2;
  font-size: .82rem; cursor: pointer; text-decoration: underline;
}

/* Filters drawer (own implementation — the theme's compiled offcanvas CSS has
   aggressive overrides, so no uk-offcanvas): left panel 340px on desktop,
   full-screen on small viewports, dark backdrop, ESC/backdrop/× to close. */
/* Acima do chat de apoio, que se empilha em 999999 (medido na página: o
   `#launcher` do Zendesk flutuava por cima do rodapé "Ver resultados" em
   telemóvel). Fica DELIBERADAMENTE abaixo do menu móvel, cujo valor CALCULADO
   é 2147483647 — atenção que o inline do módulo diz 100000 e é sobreposto por
   uma regra `!important`; quem for pelos ficheiros lê o número errado. Só conta
   com o painel aberto — fechado, o elemento está `hidden`. */
.dbps-drawer { position: fixed; inset: 0; z-index: 1000000; }
.dbps-drawer[hidden] { display: none; }
.dbps-drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.dbps-drawer-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 340px;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff;
  color: #333;
  padding: 48px 24px 28px;
  overflow-y: auto;
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.18);
  outline: none;
}
/* NOTA: este × é `absolute` dentro do painel, que é o scroller — sobe com o
   conteúdo. É defeito ANTIGO, não desta mudança; fica registado em vez de
   corrigido à pressa, porque mexer no posicionamento dele sem ver o resultado
   arrisca mais do que resolve. */
.dbps-drawer-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #666;
  cursor: pointer;
  padding: 4px 8px;
}
.dbps-drawer-close:hover { color: #000; }

/* "Limpar filtros" dentro do painel: encostado ao fundo, à largura toda, para
   ser alcançável com o polegar no telemóvel (onde o painel ocupa o ecrã). Fica
   desativado quando não há nada selecionado — ver syncDrawerClear(). */
/* No TOPO do painel (a seguir ao fechar): com listas de facetas longas, um
   botão no fundo obrigava a percorrer tudo para desfazer uma escolha. */
.dbps-drawer-actions { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid #CAD6D6; }
.dbps-drawer-clear {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border: 1.5px solid #6AAFDC;
  border-radius: 36px;
  background: none;
  color: #6AAFDC;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.dbps-drawer-clear:hover:not(:disabled) { background: #6AAFDC; color: #fff; }
.dbps-drawer-clear:disabled { border-color: #CAD6D6; color: #A9AAAA; cursor: default; }
/* Contador de seleções no título do grupo: com os grupos fechados, é o que
   diz o que está ligado sem os abrir. */
.dbps-facet-badge {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--dbps-primary, #6AAFDC);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Grupos longos com rótulos CURTOS vão a duas colunas (medidas, anos). Com
   rótulos compridos mantém-se a coluna única — ver SHORT_LABEL no JS. */
.dbps-facet-list--two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: start; }

/* Chips das seleções dentro do painel (espelho dos que estão sobre a grelha). */
.dbps-drawer-chips:not(:empty) { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

/* Rodapé de ação: SÓ em telemóvel. No computador o painel é uma coluna estreita
   que se vê inteira e um rodapé fixo só roubaria espaço. */
.dbps-drawer-foot { display: none; }

@media (max-width: 639px) {
  /* COLUNA FLEX: é o que resolve os DOIS casos. Com pouco conteúdo, o
     `margin-top:auto` do rodapé empurra-o para o fundo; com conteúdo a mais,
     o `sticky` cola-o ao fundo do que está visível. Sozinho, o sticky só
     funcionava no segundo caso — com a lista curta o botão ficava a meio. */
  .dbps-drawer-panel { width: 100%; padding-bottom: 0; display: flex; flex-direction: column; }
  .dbps-drawer-panel > .dbps-facets { flex: 0 0 auto; }

  .dbps-drawer-foot {
    display: block;
    /* STICKY, não absolute: o painel É o elemento que faz scroll, por isso um
       `position:absolute` fazia parte do conteúdo e subia com ele — o rodapé
       fugia do fundo e pintava por cima das opções. Assim cola-se ao fundo do
       painel visível, que é a razão de existir. */
    position: sticky;
    bottom: 0;
    /* auto = empurra para o fundo quando sobra espaço; as laterais negativas
       fazem-no encostar às bordas do painel (que tem 24px de padding). */
    margin: auto -24px 0;
    padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #CAD6D6;
    background: #fff;
  }
  .dbps-drawer-apply {
    display: block;
    width: 100%;
    padding: 13px;
    border: 0;
    border-radius: var(--dbps-pill, 36px);
    background: var(--dbps-primary, #6AAFDC);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
  }
  /* Com o rodapé a dar a ação principal, o limpar recolhe para ligação. O
     espaçamento é o da maquete (18/20) — a redução para 12/14 apertava o bloco
     contra o preço. */
  .dbps-drawer-actions { padding-bottom: 18px; margin-bottom: 20px; }
  .dbps-drawer-clear {
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dbps-primary-dark, #4A8AB0);
    font-size: 13px;
    font-weight: 400;
    text-decoration: underline;
  }
  .dbps-drawer-clear:disabled { color: #A9AAAA; text-decoration: none; }
}

/* "Filters" button count badge (hidden when empty). */
.dbps-filters-count {
  display: inline-block;
  margin-left: 2px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--dbps-primary, #6AAFDC);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.dbps-filters-count:empty { display: none; }

/* Instance inside the MOBILE MENU panel: the module is published in the
   `mobilemenuck-top` position; the MobileMenuCK JS MOVES the rendered node
   into its panel (.mobilemenuck, id maximenuck<id>-mobile) when it builds it.
   Inside a sliding/transformed panel position:fixed re-anchors, so the results
   flow IN-PLACE under the input instead (nicer UX in a fullscreen menu anyway).
   Same treatment for the theme dialog (#tm-dialog-mobile), if ever used. */
.mobilemenuck .dbps,
#tm-dialog-mobile .dbps { width: auto; max-width: 100%; }
.mobilemenuck .dbps { padding: 12px 16px 4px; box-sizing: border-box; }
.mobilemenuck .dbps-results,
#tm-dialog-mobile .dbps-results {
  position: static;
  transform: none;
  width: auto;
  max-width: none;
  margin-top: 12px;
  max-height: 55vh;
  padding: 16px;
}

/* Keyboard-highlighted dropdown option (ARIA activedescendant). */
.dbps-item.dbps-opt-active { outline: 2px solid var(--dbps-primary, #6AAFDC); outline-offset: -2px; }

/* Respect reduced-motion: no hover-image cross-fade. */
@media (prefers-reduced-motion: reduce) {
  .dbps-dd-grid .el-hover-image, .dbps-grid .el-hover-image { transition: none !important; }
}

/* Título dos cartões do DROPDOWN a 500: a regra equivalente vivia no styles.css
   do tema e caiu numa edição de 2026-09; sem ela o .uk-card-title do tema
   impõe 700 e o dropdown deixa de bater com a grelha. A suite passa a ser dona
   do seu próprio peso. */
.dbps-dd-grid .el-title { font-weight: 500; }