/* Calendário das Marés — configurador.
   Fonte única: usada pela página autónoma (web/src/index.html) e pelo plugin
   WordPress, que carrega este mesmo ficheiro. Não duplicar.

   **Tudo aqui está escopado a #mares-configurador**, e tem de continuar assim.
   Dentro do WordPress este ficheiro entra numa página do tema Goya: uma regra
   solta em `body`, `.grid`, `.nav` ou `.modal` não estilizava o configurador —
   sequestrava o cabeçalho, o menu e o rodapé da loja. O reset de página que a
   página autónoma precisa vive no <style> do index.html.

   **A linguagem visual é a do site**, das fichas em `eterniza-design-tokens.css`:
   letra Jost, navy #16324f, creme #f6f3ed, e duas regras que valem metade do
   «parecer do mesmo sítio» — nada tem cantos redondos, e os campos não têm
   caixa, só um sublinhado de 2px. Nenhuma cor se escreve à mão: se faltar uma,
   acrescenta-se aos tokens.

   O que NÃO muda: as cinco paletas do poster. Essas são o produto e vivem no
   `configurador.js`. Aqui veste-se a moldura, não o quadro. */

  #mares-configurador{
    box-sizing:border-box;
    font-family:var(--etz-fonte);
    font-size:var(--etz-t-corpo);
    line-height:var(--etz-linha-corpo);
    color:var(--etz-texto);
    /* Obrigatório desde que este elemento é container de consulta: a contenção
       manda ignorar o conteúdo ao calcular a largura, e onde a largura VINHA
       do conteúdo o elemento colapsa. É o caso da página autónoma, que o põe
       num `<body>` flex com `margin:0 auto` — colapsou a zero e a página ficou
       com uma palavra por linha. Na loja é um bloco normal e já enchia o pai;
       aqui fica dito, e passa a valer nos dois sítios. */
    width:100%;
  }
  #mares-configurador *{box-sizing:border-box}

  #mares-configurador header.topo{
    border-bottom:1px solid var(--etz-linha);
    padding:0 0 var(--etz-esp-3);
    margin-bottom:var(--etz-esp-3);
  }
  #mares-configurador header.topo h1{
    margin:0 0 var(--etz-esp-1);
    font-size:var(--etz-t-h2);
    font-weight:var(--etz-peso-normal);
    letter-spacing:var(--etz-etiqueta-espaco);
    text-transform:uppercase;
    color:var(--etz-tinta);
  }
  #mares-configurador .tag{
    font-size:var(--etz-t-pequeno);
    color:var(--etz-cinza);
    line-height:1.5;
  }

  /* ---------- o layout das duas colunas (revisto a 2026-07-31) ----------

     **O layout responde ao espaço do CONFIGURADOR, não ao da janela.** Não é
     preciosismo: é a correcção do defeito que a 0.8.1 pôs em produção. As
     regras eram `@media`, portanto liam a largura da JANELA — e na loja o
     configurador vive dentro de um `col-lg-8` do tema, que lhe dá **66% de
     1140 px = 730 px** por muito larga que a janela seja. Numa janela de
     1280 o layout julgava-se em modo computador e mandava duas colunas para
     730 px: o cartaz transbordava a coluna e ia imprimir-se POR CIMA do
     painel, que ficava ilegível. Localmente nunca aparecia, porque o
     `index.html` dá ao configurador a largura toda — é a lição de sempre,
     em CSS: o que corre na tua máquina não prova nada sobre o servidor.

     Daí `container-type:inline-size` no contentor e `@container` em vez de
     `@media` para tudo o que é LARGURA. O que continua em `@media` é o que
     diz mesmo respeito ao aparelho: a altura da janela e o telemóvel.

     **A base é UMA coluna.** As duas colunas são a melhoria, dentro do
     `@container`. Um browser sem container queries fica com a base, que é
     estreita mas nunca partida — degrada para o lado seguro. */
  #mares-configurador .grid{
    display:flex; flex-direction:column; gap:var(--etz-esp-4);
    padding:var(--etz-esp-4) 0 var(--etz-esp-3);
    max-width:var(--etz-largura-conteudo); margin:0 auto; width:100%;
  }
  #mares-configurador .previewCol{
    min-width:0; width:100%;
    display:flex; flex-direction:column; align-items:center;
  }

  /* O poster é o produto: fica sobre creme, sem moldura pintada nem cantos
     redondos, com uma sombra discreta que sugere papel e não caixa de
     diálogo. */
  #mares-configurador #stage{
    background:var(--etz-creme);
    box-shadow:0 10px 40px rgba(22,50,79,.13);
    line-height:0; padding:var(--etz-esp-2);
    /* **As duas amarras do cartaz, e é esta linha que impede o transbordo.**
       `100%` é a coluna, que tem largura definida; o outro termo é a altura
       que sobra na janela vezes o rácio do cartaz. O `min()` obedece à mais
       apertada das duas, portanto o cartaz nunca passa da coluna nem sai da
       janela — aconteça o que acontecer ao espaço à volta.

       É de propósito que quem manda é a LARGURA e a altura vem atrás: um
       `<svg>` inline com viewBox tem rácio mas não tem tamanho natural, e
       pedir-lhe a altura obriga a `width:auto`, que não se deixa limitar por
       percentagem nenhuma sem cair na circularidade do `fit-content`. Assim
       o palco tem largura definida, o SVG enche-a, e o rácio dá a altura. */
    width:min(100%, calc(var(--mares-alt-cartaz) * var(--mares-racio)));
    /* O cartaz é um SVG cheio de <text> e nada o protegia do toque nem do
       arrasto: um tap num texto seleccionava-o (o realce azul do telemóvel,
       o «activar elementos do mapa»), cada toque pintava o flash do
       tap-highlight, e com rato a lupa deixava um rasto de selecção.
       Seleccionar texto de um cartaz não serve a ninguém. */
    -webkit-user-select:none; user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  #mares-configurador #stage svg{width:100%; height:auto; display:block}
  #mares-configurador #stage.lupa-on svg{cursor:crosshair}

  /* O rácio do cartaz, que o `configurador.js` reescreve a cada desenho a
     partir do viewBox — 0,70 num 21×30, 0,75 num 30×40. O valor aqui é a
     rede para o instante antes do primeiro desenho e para o caso de o
     JavaScript não chegar lá: é o mais ESTREITO dos cartazes, portanto
     errar por aqui encolhe o cartaz, nunca o faz transbordar. */
  #mares-configurador{
    --mares-racio:.7;
    /* Quanto da altura da janela é do cartaz. O resto é o cabeçalho do site,
       o respiro em cima e a dica em baixo. Apertá-lo demais faz o cartaz
       encostar aos bordos; alargá-lo demais deixa espaço vertical por usar,
       que foi o que a primeira versão desta regra fez — 252 px por usar numa
       janela de 958, medidos. */
    --mares-alt-cartaz:calc(100vh - 140px);
    /* O container de consulta é ESTE elemento, e não o `.grid`. Um container
       não se estiliza a si próprio — as regras de um `@container` só valem
       para os DESCENDENTES —, e com o `container-type` no `.grid` a mudança
       de direcção das colunas era ignorada em silêncio: o painel encolhia
       para 400 px e a linha continuava em coluna. Medido. */
    container-type:inline-size; container-name:mares;
  }

  /* Num ecrã de toque, a lupa é uma ferramenta de rato fora do habitat: é
     guiada pelo movimento do cursor e afinada pela roda, e um dedo não tem
     nem um nem outro. Esconde-se o vidro; o zoom de pinça do telemóvel fica
     a ser a lupa. */
  @media (pointer:coarse){
    #mares-configurador #stage svg #lupa{display:none}
  }

  #mares-configurador .previewTools{
    display:flex; align-items:center; gap:var(--etz-esp-3);
    margin-top:var(--etz-esp-2);
  }
  #mares-configurador .dica{
    font-size:var(--etz-t-pequeno); color:var(--etz-cinza); line-height:1.5;
  }
  #mares-configurador button.tool{
    font:var(--etz-peso-medio) 12px/1 var(--etz-fonte);
    letter-spacing:var(--etz-botao-espaco); text-transform:uppercase;
    padding:10px 16px; border-radius:0; cursor:pointer;
    border:1px solid var(--etz-navy); background:transparent; color:var(--etz-navy);
    transition:background var(--etz-transicao), color var(--etz-transicao);
  }
  #mares-configurador button.tool[aria-pressed="true"]{
    background:var(--etz-navy); color:#fff;
  }
  #mares-configurador button.tool:disabled{opacity:.35; cursor:default}
  #mares-configurador a.mini{
    font-size:var(--etz-t-pequeno); color:var(--etz-texto-suave);
    text-decoration:underline; cursor:pointer;
  }
  #mares-configurador a.mini[aria-disabled="true"]{opacity:.4; cursor:default; text-decoration:none}

  /* estados do palco: sem dados nunca se mostra um poster (regra 1).
     A largura mínima existe porque o palco envolve o conteúdo: sem ela, uma
     mensagem curta encolhia o palco a um postal perdido no meio da página. */
  #mares-configurador .estado{
    padding:var(--etz-esp-5) var(--etz-esp-4); text-align:center;
    line-height:1.7; font-size:var(--etz-t-corpo); color:var(--etz-texto-suave);
    min-width:min(480px, 82vw);
  }
  #mares-configurador .estado .t{
    display:block; font-size:var(--etz-t-h3); font-weight:var(--etz-peso-normal);
    color:var(--etz-tinta); margin-bottom:var(--etz-esp-2);
  }
  #mares-configurador .estado.erro .t{color:var(--etz-erro)}
  #mares-configurador .estado code{
    background:var(--etz-fundo-alt); border:1px solid var(--etz-linha);
    padding:3px 7px; font-size:12px; display:inline-block;
    margin-top:var(--etz-esp-2); color:var(--etz-tinta);
  }

  /* O painel deixou de ser um cartão. O tema não usa caixas — usa espaço e
     filetes finos, e é por isso que o configurador parecia de outro site. */
  /* Em coluna (a base) o painel enche a linha, com um tecto de leitura. As
     duas colunas — e a largura fixa do painel — são a melhoria do
     `@container` lá em baixo. O `min-width:340px` de antes era o que fazia o
     painel roubar espaço ao cartaz num container estreito. */
  #mares-configurador .painel{
    flex:0 0 auto; min-width:0; width:100%; max-width:560px; margin:0 auto;
  }

  /* --- passos: separadores sublinhados, não medalhas --- */
  #mares-configurador ol.stepper{
    list-style:none; display:flex; gap:0; margin:0 0 var(--etz-esp-4); padding:0;
    border-bottom:1px solid var(--etz-linha);
  }
  #mares-configurador ol.stepper li{
    flex:1; display:flex; align-items:baseline; gap:var(--etz-esp-1);
    cursor:pointer; padding:0 0 var(--etz-esp-2);
    border-bottom:2px solid transparent; margin-bottom:-1px;
    transition:border-color var(--etz-transicao), color var(--etz-transicao);
  }
  #mares-configurador ol.stepper li .n{
    font-size:var(--etz-t-pequeno); font-weight:var(--etz-peso-medio);
    color:var(--etz-cinza-claro); flex:none;
  }
  #mares-configurador ol.stepper li .l{
    font-size:var(--etz-etiqueta-t); letter-spacing:var(--etz-etiqueta-espaco);
    text-transform:uppercase; color:var(--etz-cinza);
  }
  #mares-configurador ol.stepper li.ativo{border-bottom-color:var(--etz-navy)}
  #mares-configurador ol.stepper li.ativo .n,
  #mares-configurador ol.stepper li.ativo .l{color:var(--etz-navy)}
  #mares-configurador ol.stepper li.feito .n{color:var(--etz-dourado)}

  #mares-configurador .passo{display:none}
  #mares-configurador .passo.ativo{display:block}
  #mares-configurador .passo h2{
    margin:0 0 var(--etz-esp-1); font-size:var(--etz-t-h2);
    font-weight:var(--etz-peso-normal); line-height:var(--etz-linha-titulos);
    color:var(--etz-tinta);
  }
  #mares-configurador .passo p.ajuda{
    margin:0 0 var(--etz-esp-3); font-size:var(--etz-t-corpo);
    color:var(--etz-texto-suave); line-height:var(--etz-linha-corpo);
  }

  /* --- campos: sublinhado, nunca caixa --- */
  #mares-configurador label.campo{
    display:block; font-size:var(--etz-etiqueta-t);
    letter-spacing:var(--etz-etiqueta-espaco); text-transform:uppercase;
    color:var(--etz-navy); font-weight:var(--etz-peso-medio);
    margin:var(--etz-esp-3) 0 var(--etz-esp-1);
  }
  #mares-configurador select,
  #mares-configurador input[type=date],
  #mares-configurador input[type=time],
  #mares-configurador input[type=text]{
    width:100%; font:var(--etz-t-corpo)/1.5 var(--etz-fonte);
    color:var(--etz-campo-cor); background:var(--etz-campo-fundo);
    border-style:solid; border-color:var(--etz-campo-borda-cor);
    border-width:var(--etz-campo-borda); border-radius:0;
    padding:var(--etz-esp-1) 0;
    transition:border-color var(--etz-transicao);
  }
  #mares-configurador select:focus,
  #mares-configurador input:focus{
    outline:none; border-color:var(--etz-campo-borda-cor-foco);
  }
  #mares-configurador ::placeholder{color:var(--etz-cinza-claro)}

  /* --- selector de data (Mapa de Maré do Dia) ---
     O `<input type=date>` do browser traz um relógio interno próprio e um botão
     de calendário que os motores desenham à maneira deles. O que se faz aqui é
     só o que faz falta para ele não destoar dos outros campos: a altura do
     Safari, que sem isto encolhe, e o ícone na cor da tinta em vez do cinzento
     do sistema. O resto do desenho é do browser de propósito — é o selector que
     o cliente já sabe usar no telemóvel dele, e substituí-lo por um nosso
     custava uma biblioteca que o CLAUDE.md não deixa entrar. */
  #mares-configurador input[type=date],
  #mares-configurador input[type=time]{
    min-height:2.4em; -webkit-appearance:none; appearance:none;
  }
  #mares-configurador input[type=date]::-webkit-calendar-picker-indicator,
  #mares-configurador input[type=time]::-webkit-calendar-picker-indicator{
    cursor:pointer; opacity:.55;
  }
  #mares-configurador input[type=date]:hover::-webkit-calendar-picker-indicator,
  #mares-configurador input[type=time]:hover::-webkit-calendar-picker-indicator{opacity:1}
  /* Só a margem é própria. O tamanho e a cor são os da `.ajuda` de toda a gente:
     um terceiro grau de texto de apoio — 13 px em cinza-claro — fazia este
     produto parecer de outro sítio ao lado do calendário, que tem um só. */
  #mares-configurador p.ajuda.dica-data{
    margin-top:var(--etz-esp-1); margin-bottom:0;
  }

  /* --- busca com sugestões: praias e lugares ---
     A regra vale para as DUAS listas, e por classe e não por id. Nasceu presa ao
     `#praiaSugestoes` e a lista de lugares do Mapa de Estrelas apareceu sem
     estilo nenhum — com marcas de lista, sem caixa flutuante, e o nome colado à
     região. Um selector por id é uma regra que não se estende ao terceiro
     produto, e este projecto já tem três. */
  #mares-configurador .busca{position:relative}
  #mares-configurador ul.sugestoes{
    position:absolute; z-index:20; left:0; right:0; top:100%;
    margin:0; padding:0; list-style:none; max-height:280px; overflow-y:auto;
    background:#fff; border:1px solid var(--etz-linha); border-top:0;
    box-shadow:0 14px 34px rgba(22,50,79,.12);
  }
  #mares-configurador ul.sugestoes li{
    padding:var(--etz-esp-2) var(--etz-esp-2); cursor:pointer;
    font-size:var(--etz-t-corpo); color:var(--etz-tinta);
    display:flex; justify-content:space-between; align-items:baseline;
    gap:var(--etz-esp-2); border-bottom:1px solid var(--etz-fundo-alt2);
  }
  #mares-configurador ul.sugestoes li:last-child{border-bottom:0}
  #mares-configurador ul.sugestoes li:hover{background:var(--etz-creme)}
  #mares-configurador ul.sugestoes li span{
    font-size:11.5px; color:var(--etz-cinza); text-transform:uppercase;
    letter-spacing:1px; flex:none;
  }
  #mares-configurador ul.sugestoes li.vazio{color:var(--etz-texto-suave); cursor:default}
  #mares-configurador ul.sugestoes li.vazio:hover{background:transparent}

  #mares-configurador .nivel{
    font-size:var(--etz-t-pequeno); color:var(--etz-texto-suave);
    margin-top:var(--etz-esp-1); line-height:1.6;
  }
  #mares-configurador .nivel b{color:var(--etz-tinta); font-weight:var(--etz-peso-medio)}

  /* --- segmentos (ano) --- */
  #mares-configurador .seg{display:flex; gap:0; margin-top:var(--etz-esp-1)}
  #mares-configurador .seg button{
    flex:1; font:var(--etz-peso-medio) var(--etz-t-corpo)/1 var(--etz-fonte);
    padding:13px 0; border-radius:0; cursor:pointer;
    border:1px solid var(--etz-linha); border-left-width:0;
    background:transparent; color:var(--etz-texto);
    transition:background var(--etz-transicao), color var(--etz-transicao);
  }
  #mares-configurador .seg button:first-child{border-left-width:1px}
  #mares-configurador .seg button.on{
    background:var(--etz-navy); border-color:var(--etz-navy); color:#fff;
  }
  #mares-configurador .seg button:disabled{opacity:.35; cursor:default; text-decoration:line-through}

  /* --- cartas de estilo --- */
  #mares-configurador .cartas{display:flex; flex-direction:column; gap:0}
  #mares-configurador .carta{
    display:flex; gap:var(--etz-esp-2); align-items:center; text-align:left;
    width:100%; border:0; border-bottom:1px solid var(--etz-linha);
    padding:var(--etz-esp-2) 0; cursor:pointer; background:transparent;
    transition:background var(--etz-transicao);
  }
  #mares-configurador .carta:hover{background:var(--etz-fundo-alt)}
  #mares-configurador .carta.on{background:var(--etz-creme)}
  #mares-configurador .carta svg{width:92px; height:64px; flex:none; display:block}
  #mares-configurador .carta .t{
    font-size:var(--etz-t-corpo); font-weight:var(--etz-peso-medio);
    color:var(--etz-tinta);
  }
  #mares-configurador .carta .d{
    font-size:var(--etz-t-pequeno); color:var(--etz-texto-suave); line-height:1.45;
  }
  #mares-configurador .carta .ok{
    margin-left:auto; padding-right:var(--etz-esp-1);
    color:var(--etz-navy); visibility:hidden;
  }
  #mares-configurador .carta.on .ok{visibility:visible}

  #mares-configurador .contador{
    font-size:var(--etz-t-pequeno); color:var(--etz-cinza);
    text-align:right; margin-top:var(--etz-esp-1);
  }

  /* --- resumo --- */
  #mares-configurador .resumo{
    background:var(--etz-creme); border-left:2px solid var(--etz-navy);
    padding:var(--etz-esp-2) var(--etz-esp-3);
    font-size:var(--etz-t-corpo); line-height:1.7; margin-top:var(--etz-esp-3);
    color:var(--etz-texto);
  }
  #mares-configurador .resumo b{font-weight:var(--etz-peso-medio); color:var(--etz-tinta)}

  /* --- navegação --- */
  #mares-configurador .nav{
    display:flex; gap:var(--etz-esp-2); margin-top:var(--etz-esp-4);
  }
  #mares-configurador .nav button{
    font:var(--etz-botao-peso) var(--etz-botao-t)/1 var(--etz-fonte);
    letter-spacing:var(--etz-botao-espaco); text-transform:var(--etz-botao-caixa);
    padding:var(--etz-botao-padding); border-radius:var(--etz-botao-raio);
    cursor:pointer; transition:background var(--etz-transicao), color var(--etz-transicao);
  }
  #mares-configurador #voltar{
    background:var(--etz-botao2-fundo); color:var(--etz-botao2-cor);
    border:var(--etz-botao2-borda);
  }
  #mares-configurador #voltar:hover:not(:disabled){background:var(--etz-creme)}
  #mares-configurador #voltar:disabled{opacity:.3; cursor:default}
  #mares-configurador #seguinte{
    flex:1; border:0;
    background:var(--etz-botao-fundo); color:var(--etz-botao-cor);
  }
  #mares-configurador #seguinte:hover:not(:disabled){background:var(--etz-botao-fundo-hover)}
  #mares-configurador #seguinte:disabled{opacity:.35; cursor:default}

  /* --- modal (só na página autónoma) --- */
  #mares-configurador .veu{
    position:fixed; inset:0; background:rgba(22,50,79,.5); display:none;
    place-items:center; padding:var(--etz-esp-3); z-index:50;
  }
  #mares-configurador .veu.on{display:grid}
  #mares-configurador .modal{
    background:#fff; border-radius:0; max-width:480px; width:100%;
    padding:var(--etz-esp-4);
  }
  #mares-configurador .modal h3{
    margin:0 0 var(--etz-esp-1); font-size:var(--etz-t-h3);
    font-weight:var(--etz-peso-normal); color:var(--etz-tinta);
  }
  #mares-configurador .modal p{
    font-size:var(--etz-t-corpo); line-height:1.7;
    color:var(--etz-texto-suave); margin:0 0 var(--etz-esp-2);
  }
  #mares-configurador .modal details{
    font-size:var(--etz-t-pequeno); background:var(--etz-fundo-alt);
    padding:var(--etz-esp-2); margin-bottom:var(--etz-esp-3);
  }
  #mares-configurador .modal pre{
    white-space:pre-wrap; word-break:break-all; margin:var(--etz-esp-1) 0 0;
    font-size:11px;
  }
  #mares-configurador .modal button{
    font:var(--etz-botao-peso) var(--etz-botao-t)/1 var(--etz-fonte);
    letter-spacing:var(--etz-botao-espaco); text-transform:uppercase;
    padding:var(--etz-botao-padding); border-radius:0; cursor:pointer;
    border:0; background:var(--etz-navy); color:#fff;
  }

  #mares-configurador footer.note{
    text-align:center; font-size:var(--etz-t-pequeno); color:var(--etz-cinza);
    padding:var(--etz-esp-4) var(--etz-esp-3) var(--etz-esp-5); line-height:1.6;
    border-top:1px solid var(--etz-linha); margin-top:var(--etz-esp-4);
  }

  /* ---------- as duas colunas, quando o CONFIGURADOR tem espaço ----------
     Repara que o corte é `@container` e não `@media`: 900 px é o que este
     bloco tem de largura, não o que a janela tem. Na loja, uma janela de
     1600 px dá-lhe cerca de 1030 (um `col-lg-8` de 1140), e uma de 1280 dá
     730 — que é menos do que 900, e por isso fica em coluna, que é o certo:
     duas colunas em 730 px foi exactamente o defeito da 0.8.1.

     O painel leva largura FIXA. Os controlos são uma coluna de leitura e não
     ganham nada em esticar; todo o espaço que sobra é do produto. */
  @container mares (min-width:900px){
    #mares-configurador .grid{
      flex-direction:row; gap:var(--etz-esp-4);
      /* A variável vive AQUI e não no `#mares-configurador`: aquele é o
         container de consulta, e um `@container` não estiliza o próprio
         container — escrita lá, esta linha era ignorada em silêncio e o
         cartaz ficava com o orçamento de altura do modo de uma coluna. É a
         mesma armadilha que já tinha comido a direcção das colunas, e
         reapareceu duas regras abaixo. O `.grid` é descendente, e apanha. */
      --mares-alt-cartaz:calc(100vh - 110px);
      /* Esticar, não alinhar ao topo: o sticky do palco só desliza dentro do
         espaço que o pai lhe der, e com as colunas alinhadas ao topo esse
         espaço era zero — medido na demo: rolava-se 300 px e o cartaz fugia. */
      align-items:stretch;
    }
    #mares-configurador .previewCol{flex:1}
    /* 380 e não 420: os controlos são uma coluna de leitura e não ganham nada
       em esticar, e cada píxel que aqui sobra é do cartaz. Abaixo disto os
       três botões de tamanho começam a partir a etiqueta em duas linhas. */
    #mares-configurador .painel{
      flex:0 0 380px; width:380px; max-width:380px; margin:0;
    }
    /* Cola enquanto o painel rola: nos passos 2 e 3 o painel é comprido, e
       sem isto o cartaz saía do ecrã precisamente quando se escolhia o
       estilo — o momento em que mais falta faz vê-lo. */
    #mares-configurador #stage{position:sticky; top:var(--etz-esp-3)}
  }

  /* Telemóvel: o cartaz COLA AO TOPO e os controlos rolam por baixo dele —
     mexe-se na data e vê-se o céu a mudar, que é o argumento do produto. Os
     botões Voltar/Seguinte ficam fixos no fundo, sempre à mão. É o modelo do
     Mapiful vestido à Eterniza: eles põem o cartaz gigante e escondem os
     controlos atrás de separadores; nós mantemos os controlos à vista, que é
     o registo da casa. */
  @media (max-width:760px){
    #mares-configurador .grid{gap:var(--etz-esp-3)}
    #mares-configurador .painel{max-width:none}

    #mares-configurador .previewCol{
      position:sticky; top:0; z-index:5;
      width:100%;
      background:var(--etz-fundo);
      padding:var(--etz-esp-1) 0 var(--etz-esp-2);
      border-bottom:1px solid var(--etz-linha);
    }
    #mares-configurador #stage{
      padding:var(--etz-esp-1);
      box-shadow:0 6px 22px rgba(22,50,79,.10);
    }
    /* 42vh: grande o suficiente para se ver a mudar, e sobra mais de meio
       ecrã para os controlos. Vai pela mesma amarra dos outros regimes — a
       altura disponível, que o `min()` do palco converte em largura. */
    #mares-configurador{--mares-alt-cartaz:42vh}
    /* A dica da lupa é coisa de rato; num ecrã de dedo só ocupa altura. */
    #mares-configurador .previewTools{display:none}

    /* O título da página autónoma encolhe para o sticky ganhar espaço útil.
       Na loja não existe — o título é da página WordPress. */
    #mares-configurador header.topo h1{
      font-size:var(--etz-t-h3); margin:0 0 var(--etz-esp-1);
    }

    /* `sticky` e não `fixed`, e é obrigatório: o `container-type` do
       contentor traz contenção de layout, que o torna bloco de contenção dos
       descendentes `position:fixed` — um `fixed` aqui deixava de se agarrar à
       janela e ia colar-se ao fundo do configurador, ou seja ao fundo da
       página. O `sticky` dá o mesmo efeito e é imune a isso. */
    #mares-configurador .nav{
      position:sticky; bottom:0; z-index:6;
      margin:0; padding:var(--etz-esp-2) 0;
      background:var(--etz-fundo);
      border-top:1px solid var(--etz-linha);
      display:flex; gap:var(--etz-esp-2);
    }
    #mares-configurador .nav button{flex:1}
  }

  /* --- tamanhos (variações do WooCommerce) --- */
  #mares-configurador .tamanhos{display:flex; gap:0; margin-top:var(--etz-esp-1)}
  #mares-configurador .tamanhos button{
    flex:1; display:flex; flex-direction:column; gap:3px; align-items:center;
    font:var(--etz-peso-medio) var(--etz-t-corpo)/1.3 var(--etz-fonte);
    padding:var(--etz-esp-2) 4px; border-radius:0; cursor:pointer;
    border:1px solid var(--etz-linha); border-left-width:0;
    background:transparent; color:var(--etz-texto);
    transition:background var(--etz-transicao), color var(--etz-transicao);
  }
  #mares-configurador .tamanhos button:first-child{border-left-width:1px}
  #mares-configurador .tamanhos button:hover{background:var(--etz-fundo-alt)}
  #mares-configurador .tamanhos button.on{
    background:var(--etz-navy); border-color:var(--etz-navy); color:#fff;
  }
  #mares-configurador .tamanhos button .p{
    font-size:var(--etz-t-pequeno); font-weight:var(--etz-peso-normal); opacity:.8;
  }

  /* --- «Define as ondas», do Mapa de Maré do Dia ---
     Só existe naquele produto: o desenho das linhas isométricas deixa escolher
     quantas linhas de nível preenchem a água. O limite do cursor vem do
     JavaScript, do `LINHAS`, que é o que a conta da impressão deixa passar nos
     três tamanhos. A compressão deixou de se oferecer em 2026-07-29 e vai fixa.

     Como todo o resto deste ficheiro, escopado a `#mares-configurador`: uma
     regra solta em `input[type=range]` estilizava os cursores do tema Goya, do
     WooCommerce e de qualquer plugin que partilhe a página. */
  #mares-configurador .ondas{
    margin-top:var(--etz-esp-4); padding-top:var(--etz-esp-3);
    border-top:1px solid var(--etz-linha);
  }
  /* Mesma cor das `label.campo`: este h3 tem o tamanho, o peso, o espaçamento e
     as maiúsculas de uma etiqueta de campo, e estava em cinza enquanto todas as
     outras estavam em navy. Duas coisas com o mesmo posto tipográfico e cores
     diferentes leem-se como dois desenhos. */
  #mares-configurador .ondas h3{
    margin:0; font-family:var(--etz-fonte); font-size:var(--etz-etiqueta-t);
    /* A entrelinha entra explicitamente porque um `h3` herda a dos títulos do
       tema — dava 17,5 px onde todas as outras etiquetas do painel, do mesmo
       corpo, têm 21,25 px. Era a única medida do painel que divergia entre os dois
       configuradores. */
    line-height:var(--etz-linha-corpo);
    letter-spacing:var(--etz-etiqueta-espaco); text-transform:uppercase;
    font-weight:var(--etz-peso-medio); color:var(--etz-navy);
  }
  /* O valor a par da etiqueta: sabe-se sempre em que número está o cursor. */
  #mares-configurador .ondas label.campo{
    display:flex; justify-content:space-between; align-items:baseline; gap:var(--etz-esp-2);
  }

  /* ---- os interruptores do Mapa de Estrelas ----
     Os valores saem todos das variáveis, e não à mão: foi por não o fazer que o
     bloco das ondas nasceu com três medidas fora da escala (ver `DECISOES.md`,
     2026-07-30). Quem acrescentar aqui outro bloco que faça o mesmo. */
  #mares-configurador .ondas label.opcao{
    display:flex; align-items:center; gap:var(--etz-esp-2);
    margin-top:var(--etz-esp-2); cursor:pointer;
    font-family:var(--etz-fonte); font-size:var(--etz-t-corpo);
    line-height:var(--etz-linha-corpo); color:var(--etz-texto);
  }
  #mares-configurador .ondas label.opcao input{
    width:auto; margin:0; accent-color:var(--etz-navy); cursor:pointer;
  }

  /* ---- as duas horas por ano que não têm resposta ----
     A repetida é pergunta, a inexistente é recusa. A recusa é a única coisa do
     painel que leva cor de erro; a pergunta não é um erro do cliente e não se
     lhe pinta de vermelho um facto do calendário. */
  #mares-configurador .aviso-hora{
    margin:var(--etz-esp-2) 0 0; padding:var(--etz-esp-2) var(--etz-esp-3);
    border-left:2px solid var(--etz-navy);
    background:rgba(22,50,79,.04);
    font-family:var(--etz-fonte); font-size:var(--etz-t-corpo);
    line-height:var(--etz-linha-corpo); color:var(--etz-texto-suave);
  }
  #mares-configurador .aviso-hora.erro{
    border-left-color:var(--etz-erro); color:var(--etz-erro);
  }
  #mares-configurador .aviso-hora b{ color:var(--etz-navy); font-weight:var(--etz-peso-medio); }
  #mares-configurador .aviso-hora .duas{
    display:flex; gap:var(--etz-esp-2); margin-top:var(--etz-esp-2);
  }
  #mares-configurador .aviso-hora .duas button{
    flex:1; padding:var(--etz-esp-2); border:1px solid var(--etz-linha);
    background:transparent; cursor:pointer;
    font-family:var(--etz-fonte); font-size:var(--etz-t-corpo); color:var(--etz-texto);
  }
  #mares-configurador .aviso-hora .duas button.on{
    border-color:var(--etz-navy); background:var(--etz-navy); color:#fff;
  }
  #mares-configurador .ondas .val{
    font-variant-numeric:tabular-nums; letter-spacing:0; text-transform:none;
    font-weight:var(--etz-peso-normal); color:var(--etz-texto-suave);
  }
  /* Sem `font-size` próprio: o texto de apoio tem um tamanho só em todo o
     configurador, e tinha aqui 13 px contra os 15 px do resto. */
  #mares-configurador .ondas p.ajuda{
    margin:var(--etz-esp-1) 0 0;
  }
  #mares-configurador input[type=range]{
    -webkit-appearance:none; appearance:none;
    display:block; width:100%; margin:var(--etz-esp-2) 0 0;
    background:transparent; cursor:pointer;
  }
  #mares-configurador input[type=range]:focus{outline:none}
  /* Calha e puxador escrevem-se duas vezes: o WebKit e o Gecko não aceitam os
     dois selectores na mesma regra — um selector que não reconheçam invalida-a
     inteira, e a outra metade deixava de ser estilizada. */
  #mares-configurador input[type=range]::-webkit-slider-runnable-track{
    height:2px; background:var(--etz-linha); border:0; border-radius:0;
  }
  #mares-configurador input[type=range]::-moz-range-track{
    height:2px; background:var(--etz-linha); border:0; border-radius:0;
  }
  /* Quadrado, e é a regra da casa: no site nada tem cantos redondos. */
  #mares-configurador input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:12px; height:12px; margin-top:-5px; border:0; border-radius:0;
    background:var(--etz-navy); transition:background var(--etz-transicao);
  }
  #mares-configurador input[type=range]::-moz-range-thumb{
    width:12px; height:12px; border:0; border-radius:0;
    background:var(--etz-navy); transition:background var(--etz-transicao);
  }
  #mares-configurador input[type=range]:focus-visible::-webkit-slider-thumb{
    box-shadow:0 0 0 3px var(--etz-creme);
  }
  #mares-configurador input[type=range]:focus-visible::-moz-range-thumb{
    box-shadow:0 0 0 3px var(--etz-creme);
  }

  /* --- recusa do servidor no add-to-cart --- */
  #mares-configurador .erro-carrinho{
    margin:var(--etz-esp-2) 0 0; padding:var(--etz-esp-2);
    font-size:var(--etz-t-pequeno); line-height:1.5;
    color:var(--etz-erro); background:#fdf1f1;
    border-left:2px solid var(--etz-erro);
  }

  /* --- estados vazios e avisos de administração --- */
  #mares-configurador .mares-vazio{
    margin:0; padding:var(--etz-esp-2) 0; font-size:var(--etz-t-pequeno);
    line-height:1.5; color:var(--etz-texto-suave);
    border-bottom:1px solid var(--etz-linha);
  }
  .mares-aviso{
    margin:var(--etz-esp-2) 0; padding:var(--etz-esp-2) var(--etz-esp-3);
    font-size:var(--etz-t-corpo); line-height:1.6;
    color:var(--etz-tinta); background:var(--etz-creme);
    border-left:2px solid var(--etz-dourado);
  }
