/** Shopify CDN: Minification failed

Line 565:0 Unexpected "}"

**/
/* Pistacho — ficha de produto alternativa (?view=2).
   Espaço de nomes próprio: tudo aqui começa por .pdp2 e nada toca em classes do
   tema. A paleta é a do protótipo aprovado; o dourado entra só como acento e
   ocupa menos de 5% do ecrã, como manda o DESIGN.md. */

.pdp2 {
  --tinta: #14130e;
  --tinta-media: rgba(20, 19, 14, 0.72);
  --tinta-fraca: rgba(20, 19, 14, 0.55);
  --papel: #f7f7f4;
  --areia: #efece5;
  --fina: #c9c5b8;
  --cota: #8a7c5f;
  --dourado: #c5a059;
  --linha: rgba(20, 19, 14, 0.1);

  background: var(--papel);
  color: var(--tinta);
  transition: background-color 0.6s ease;
  color-scheme: light;
  font-family: var(--base-font-family, "Inter", system-ui, -apple-system, sans-serif);
  font-size: 16px;
  line-height: 1.55;
  padding-bottom: 104px;
  overflow-x: clip;
  --barra-fundo: rgba(247, 247, 244, 0.94);
}

.pdp2 .pdp2-env {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 30px;
  width: 100%;
}
@media (min-width: 760px) { .pdp2 .pdp2-env { padding-inline: 44px; } }

.pdp2-olho {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cota);
}

/* "A peça abre, o nome assina" — e quem assina é a fonte de marca.
   O letter-spacing negativo era para a Inter; a condensada já é estreita por
   desenho e com tracking negativo as hastes tocam-se. Vai a zero. */
.pdp2-h1 {
  margin: 0;
  font-family: var(--display-font-family, inherit);
  font-size: clamp(44px, 8vw, 88px);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pdp2-h2 {
  margin: 0 0 16px;
  text-wrap: balance;
  font-size: clamp(23px, 2.7vw, 33px);
  line-height: 1.16;
  font-weight: 400;
  letter-spacing: -0.012em;
  max-width: 20ch;
}

.pdp2-sub {
  margin: 20px 0 0;
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--tinta-media);
  max-width: 32ch;
}

.pdp2-texto { max-width: 60ch; color: var(--tinta-media); }
.pdp2-texto p { margin: 0 0 14px; text-wrap: pretty; }
.pdp2-texto > div > p:last-child,
.pdp2-texto p:last-child { margin-bottom: 0; }
.pdp2-texto + .pdp2-texto { margin-top: 14px; }

/* Abertura ------------------------------------------------------------- */

.pdp2-abre {
  display: grid;
  gap: 34px;
  padding-top: 56px;
  padding-bottom: 48px;
}
@media (min-width: 900px) {
  .pdp2-abre {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: end;
    gap: 64px;
    padding-top: 88px;
  }
}

.pdp2-abre__lado { border-top: 1px solid var(--linha); padding-top: 20px; }

.pdp2-preco {
  margin: 0;
  font-size: 29px;
  font-weight: 500;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.pdp2-preco small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--tinta-fraca);
}

.pdp2-entrega { margin: 16px 0 0; font-size: 14.5px; color: var(--tinta-media); }
.pdp2-entrega b { font-weight: 500; color: var(--tinta); }

.pdp2-btn {
  display: inline-block;
  margin-top: 22px;
  padding: 14px 26px;
  border: 0;
  border-radius: 2px;
  background: var(--tinta);
  color: var(--papel);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.pdp2-btn:hover { background: #2f2c22; }

/* Fotografias ----------------------------------------------------------- */

/* O herói é uma fotografia de cada vez. O object-position é escrito pelo JS,
   que mede onde a peça está dentro da imagem — não há percentagens à mão aqui,
   senão só serviriam para o produto em que foram afinadas. */
/* ---- a ficha escura dos candeeiros --------------------------------------
   Um candeeiro vende-se pela luz que faz, e luz ve-se no escuro. A mesma
   pagina e os mesmos blocos; muda a paleta, e muda so nos candeeiros — um sofa
   em fundo preto seria pose.

   Os tons nao sao o claro invertido: o papel e um preto quente (o mesmo lado
   quente do dourado) e a tinta e um branco de linho, para o dourado continuar a
   ser o unico acento. */
.pdp2--noite {
  --papel: #0D0C0B;
  --areia: #17150F;
  --tinta: #EDE9E1;
  --tinta-media: rgba(237, 233, 225, 0.74);
  --tinta-fraca: rgba(237, 233, 225, 0.52);
  --linha: rgba(237, 233, 225, 0.14);
  --fina: #4A453B;
  --cota: #B49A6B;
  --dourado: #D2AE68;
  color-scheme: dark;
  --barra-fundo: rgba(13, 12, 11, 0.94);
}
/* o visor de materiais ja era escuro por construcao: fixa-se, para nao inverter
   com a paleta e ficar claro dentro de uma pagina escura */
.pdp2--noite .pdp2-visor { background: #14130E; }
.pdp2--noite .pdp2-visor__barra,
.pdp2--noite .pdp2-visor__x { color: #F7F7F4; }
/* a prova continua a ser o plano claro do dia: aqui inverte-se com a pagina */
.pdp2--noite .pdp2-prova { background: var(--papel); color: var(--tinta); }
/* No escuro o botao e claro com texto escuro; o hover do dia (#2f2c22) punha
   fundo escuro por baixo de texto escuro e a palavra desaparecia. */
.pdp2--noite .pdp2-btn:hover { background: #fff; }
/* as miniaturas e as caixas de fotografia deixam de ter fundo branco */
.pdp2--noite .pdp2-mini,
.pdp2--noite .pdp2-espelho__foto,
.pdp2--noite .pdp2-prova__palco > img { background: var(--areia); }
/* as fotografias de estudio sao em fundo branco: um veu leve tira-lhes o
   choque contra a pagina escura, sem lhes mexer na cor */
.pdp2--noite .pdp2-mini img { filter: brightness(0.93) contrast(1.02); }

/* O cabecalho em passagem foi escrito para paginas claras: aterra em branco com
   tinta escura. Numa ficha escura tem de aterrar em preto com tinta clara. Aqui
   redefinem-se so os dois numeros que a receita usa — o resto (a linha de tempo,
   os tempos, o veu) fica como esta. Vem depois de custom-styles.css na ordem do
   documento, por isso ganha com a mesma especificidade. */
@supports (animation-timeline: view()) and selector(:has(*)) {
  body:has(.pdp2--noite) :is(.header-section, .mobile-header-section).transparent-header {
    /* a tinta quase nao mexe: e clara nos dois estados */
    --pst-t: calc(255 - var(--pst-modo) * 16);
    --layout-text-color: var(--pst-t), var(--pst-t), var(--pst-t) !important;
    background-color: rgb(
      calc(13 * var(--pst-modo)) calc(12 * var(--pst-modo)) calc(11 * var(--pst-modo))
      / calc(var(--pst-veu) * 0.42 * (1 - var(--pst-modo)) + 0.94 * var(--pst-modo))
    ) !important;
    box-shadow: 0 1px 0 rgb(237 233 225 / calc(var(--pst-modo) * 0.1));
  }
  /* o logotipo fica branco nos dois estados, nao so enquanto e transparente */
  body:has(.pdp2--noite) .transparent-header .logo__image:not(.has-two-child) .logo__image-item {
    filter: brightness(0) invert(1) !important;
  }
  body:has(.pdp2--noite) .transparent-header .logo__image.has-two-child > .logo__image-item--transparent { opacity: 1; }
  body:has(.pdp2--noite) .transparent-header .logo__image.has-two-child > .logo__image-item--solid { opacity: 0; }
}

/* "Pedir Proposta" nas paginas escuras: contorno branco, letras brancas, fundo
   transparente — no topo, sobre a cena, e depois de descer, sobre o preto.
   Antes invertia-se para creme, mas o estado transparente do tema
   (custom-styles.css, `.header-section.transparent ...`, !important) repunha o
   texto em dourado-claro por cima do creme e o botao ficava ilegivel.
   O #shopify-section-header da a especificidade que ganha a todas essas regras
   sem depender de qual delas vem primeiro. O span leva a cor porque o tema
   pinta os spans do menu a parte. No hover enche de branco. */
body:has(.pdp2--noite) #shopify-section-header .menu__navigation a.menu__item-link.hover-link.link--highlighted {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
}
body:has(.pdp2--noite) #shopify-section-header .menu__navigation a.menu__item-link.hover-link.link--highlighted span { color: inherit !important; }
body:has(.pdp2--noite) #shopify-section-header .menu__navigation a.menu__item-link.hover-link.link--highlighted:hover,
body:has(.pdp2--noite) #shopify-section-header .menu__navigation a.menu__item-link.hover-link.link--highlighted:focus-visible {
  background: #fff !important;
  color: #14130E !important;
  border-color: #fff !important;
}

/* ---- a cena que abre a pagina ------------------------------------------
   A peca numa sala, nao em estudio. O enquadramento assenta onde o sofa esta
   mesmo — entre os 51% e os 88% da altura da imagem — para nao sobrar meia
   parede por cima nem meio chao por baixo.

   E o fundo da imagem desfaz-se na cor da pagina em vez de acabar numa linha.
   Sem isto a fotografia lia-se como uma faixa colada por cima da pagina; com
   isto ha uma passagem so, da sala para o texto. */
/* O cabecalho passa por cima da cena, transparente, ate a imagem sair do ecra.
   A receita vive em assets/custom-styles.css e e accionada pela classe
   `overlapping-section`; aqui so se corrige quem publica a linha de tempo — a
   receita usa a primeira seccao, e nesta ficha a primeira seccao e a pagina
   inteira, o que poria a passagem a acontecer no fim de tudo. Quem manda e a
   cena. */
.pdp2-cena { position: relative; }
@supports (animation-timeline: view()) {
  body.has-first-overlapping-section main > .shopify-section:first-child { view-timeline: none; }
  body.has-first-overlapping-section .pdp2-cena { view-timeline: --pst-heroi block; }
}
/* Veu no topo, como nos outros herois claros: a tinta do cabecalho e branca e a
   sala tem paredes claras — sem isto o logotipo perde-se na parede. Discreto, e
   so onde o cabecalho passa. */
.pdp2-cena::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 34%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(rgb(0 0 0 / 0.3), rgb(0 0 0 / 0));
}
.pdp2-cena img {
  display: block;
  width: 100%;
  /* Caixa mais baixa aperta o recorte a volta do sofa: a altura que sobrava era
     chao vazio entre a base da peca e o texto, e foi disso que o Pedro se
     queixou. */
  /* Os ambientes sao retrato (1493 x 2000): numa faixa larga ve-se um terco da
     imagem. Por isso o computador leva altura a serio — ha 2 000px de fonte — e
     o enquadramento assenta na peca, nao no tecto. */
  height: clamp(280px, 64vh, 760px);
  object-fit: cover;
  object-position: 50% 68%;
}
.pdp2-cena::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  /* O desvanecimento e curto e comeca tarde: comprido, lavava meio chao e
     devolvia o vazio que a caixa mais baixa tinha tirado. */
  height: 22%;
  /* o transparente tem de ser a MESMA cor do papel, senao a passagem faz um
     halo cinzento a meio. A primeira regra e a de sempre; a segunda so vale
     onde o browser souber ler a cor do token. */
  background: linear-gradient(to bottom, rgba(247, 247, 244, 0) 0%, var(--papel) 78%, var(--papel) 100%);
  background: linear-gradient(to bottom,
    rgb(from var(--papel) r g b / 0) 0%,
    var(--papel) 78%,
    var(--papel) 100%);
  pointer-events: none;
}
@media (max-width: 759px) {
  /* No telemovel fica como estava: era a altura em que o nome, o preco e o
     botao ainda cabiam no primeiro ecra. A altura a mais foi pedida so para o
     computador. */
  .pdp2-cena img { height: clamp(240px, 38vh, 380px); object-position: 50% 72%; }
  .pdp2-cena::after { height: 26%; }
}

/* Com a cena a abrir, a galeria de estudio ja nao precisa de estar no topo:
   as mesmas fotografias vivem no espelho da escolha e nas miniaturas. */
.pdp2-heroi--depois { display: none; }
/* e o nome comeca dentro do desvanecimento, nao depois dele: a passagem da
   sala para o texto e uma so, sem uma faixa de nada pelo meio */
.pdp2-cena ~ .pdp2-abre { margin-top: clamp(-64px, -5vh, -28px); padding-top: 0; position: relative; }
@media (min-width: 900px) { .pdp2-cena ~ .pdp2-abre { margin-top: clamp(-86px, -7vh, -40px); } }

.pdp2-heroi { position: relative; --pdp2-heroi-prop: 1.4; }
.pdp2-heroi__palco img {
  display: block;
  width: 100%;
  /* A proporcao sai da medicao da peca, tambem no telemovel. Estava fixa em
     1.4 aqui em baixo: como os renders sao quadrados, cortavam-se 29% da
     altura e as pecas altas apareciam decapitadas. O 1.4 fica so como valor
     de partida, ate a medicao chegar. */
  aspect-ratio: var(--pdp2-heroi-prop, 1.4);
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--papel);
  transition: aspect-ratio 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* A fotografia acaba em vez de ser cortada. O sitio onde comeca a desvanecer
   e medido em JS, por baixo da peca — nunca lhe toca nos pes. Sem JS fica
   100%, que e nao ter desvanecimento nenhum. */
.pdp2-heroi__palco img,
.pdp2-espelho__foto img {
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--pdp2-fade, 100%), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 var(--pdp2-fade, 100%), transparent 100%);
}


.pdp2-heroi__seta {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 247, 244, 0.86);
  color: var(--tinta);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.32s ease, background 0.32s ease;
}
.pdp2-heroi__seta svg { width: 22px; height: 22px; }
.pdp2-heroi__seta--ant { left: 16px; }
.pdp2-heroi__seta--seg { right: 16px; }
.pdp2-heroi:hover .pdp2-heroi__seta,
.pdp2-heroi__seta:focus-visible { opacity: 1; }
.pdp2-heroi__seta:hover { background: var(--papel); }
@media (hover: none) { .pdp2-heroi__seta { opacity: 1; } }

.pdp2-heroi__conta {
  position: absolute;
  right: 16px; bottom: 14px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 2px;
  background: rgba(247, 247, 244, 0.86);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-media);
}

/* As miniaturas escolhem o que o herói mostra. */
/* A tira vive agora colada a vista grande, dentro do bloco da escolha. Estava
   por baixo dos seletores: quem trocava o tecido via mudar uma fotografia num
   sitio e uma fila de selos noutro, longe um do outro. Coladas, leem-se como
   uma coisa so — a combinacao escolhida, de todos os lados.

   Colunas iguais: no computador as seis cabem na largura; no telemovel
   transbordam e arrasta-se de lado, mas cada uma continua legivel. */
.pdp2-lados { padding: 6px 0 40px; }

/* O palco e a ficha na mesma linha: o palco com 3/5 da largura, a ficha
   (medidas e luz) com 2/5. O palco fica no tom da página e reserva o espaço
   desde o início: quando o modelo chega, nada salta. A ficha é mais comprida
   do que o palco, por isso o palco acompanha a leitura, preso ao topo. */
.pdp2-lados__linha {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 48px;
  align-items: start;
  margin-top: 18px;
  padding-inline: 44px;
}
.pdp2-lados__vista {
  min-width: 0;
  position: sticky;
  top: calc(var(--pdp2-topo, 0px) + 16px);
}
/* Preso ao topo, o palco e as miniaturas têm de caber inteiros entre o
   cabeçalho e a barra de compra fixa em baixo: num ecrã baixo o palco 4:3 era
   mais alto do que a janela, e as miniaturas ficavam por baixo da barra
   enquanto se liam as medidas. O palco encolhe em altura; a largura fica. */
@media (min-width: 760px) {
  .pdp2-lados__vista .pdp2-3d__palco {
    max-height: calc(100vh - var(--pdp2-topo, 0px) - 16px - 74px - 72px - 24px);
    min-height: 280px;
  }
}

/* A fotografia escolhida nas miniaturas, por cima do modelo. Inteira, no seu
   formato: a cena de cartão é vertical e não se amplia até encher. */
.pdp2-3d__foto {
  position: absolute; inset: 0;
  z-index: 2;
  display: block;
  margin: 0; padding: 0;
  border: 0;
  background: var(--areia);
  cursor: zoom-in;
}
.pdp2-3d__foto[hidden] { display: none; }
.pdp2-3d__foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pdp2-3d__palco--foto model-viewer,
.pdp2-3d__palco--foto .pdp2-3d__dica,
.pdp2-3d__palco--foto .pdp2-3d__repor,
.pdp2-3d__palco--foto .pdp2-3d__ar { visibility: hidden; }

.pdp2-vistas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pdp2-vistas[hidden] { display: none; }
.pdp2-vistas__b {
  width: 64px; height: 64px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: 2px;
  background: var(--areia);
  color: var(--tinta-media);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.pdp2-vistas__b img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: opacity 0.2s ease; }
.pdp2-vistas__b:hover { color: var(--tinta); }
.pdp2-vistas__b:hover img,
.pdp2-vistas__b[aria-pressed="true"] img { opacity: 1; }
.pdp2-vistas__b[aria-pressed="true"] { border-color: var(--cota); color: var(--tinta); }
.pdp2-vistas__b:focus-visible { outline: 2px solid var(--cota); outline-offset: 2px; }

/* A ficha ao lado do palco: as mesmas secções do corpo da página, sem o ar
   que lá têm entre si, e com a luz numa coluna só. */
.pdp2-lados__ficha { min-width: 0; }
.pdp2-lados__ficha .pdp2-sec { padding: 0; border-top: 0; }
.pdp2-lados__ficha .pdp2-sec:not([hidden]) + .pdp2-sec { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--linha); }
.pdp2-lados__ficha .pdp2-h2 { font-size: clamp(20px, 1.8vw, 24px); }
.pdp2-lados__ficha .pdp2-med { margin-top: 18px; }
.pdp2-lados__ficha .pdp2-medidas { max-width: none; }
.pdp2-lados__ficha .especificacoes__grid { grid-template-columns: minmax(0, 1fr); }
.pdp2-3d { position: relative; min-width: 0; }
.pdp2-3d__palco {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  background: var(--areia);
  border-radius: 2px;
  overflow: hidden;
}
.pdp2-3d__palco model-viewer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background-color: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--cota);
}
.pdp2-3d--falhou .pdp2-3d__palco { display: none; }
/* A frase de estado só se vê quando falha; o resto do tempo é para leitores
   de ecrã. */
.pdp2-3d__estado {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pdp2-3d--falhou .pdp2-3d__estado {
  position: static;
  width: auto; height: auto;
  clip: auto;
  white-space: normal;
  font-size: 13px;
  color: var(--tinta-fraca);
}
/* O que ensina que a peça roda. Pequena, em baixo, com o ícone a oscilar
   devagar — um gesto baixo, não um anúncio. Sai ao primeiro toque. */
.pdp2-3d__dica {
  position: absolute;
  left: 50%; bottom: 16px;
  z-index: 1;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: color-mix(in srgb, var(--papel) 62%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--tinta-media);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.pdp2-3d__dica svg { width: 16px; height: 16px; flex: none; animation: pdp2-dica 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.pdp2-3d__dica.a-sair { opacity: 0; }
@keyframes pdp2-dica {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}
/* Ver na sua casa: so em telemoveis com realidade aumentada. Do lado
   oposto ao Repor vista, com o mesmo desenho e um pouco mais de peso. */
.pdp2-3d__ar {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 11px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: color-mix(in srgb, var(--papel) 78%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--tinta);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pdp2-3d__ar[hidden] { display: none; }
/* O model-viewer poe o seu botao de AR no canto de baixo; no palco ja ha o nosso. */
.pdp2-3d model-viewer::part(default-ar-button) { display: none; }
.pdp2-3d__ar svg { width: 16px; height: 16px; flex: none; }
.pdp2-3d__repor {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 1;
  padding: 6px 12px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: color-mix(in srgb, var(--papel) 62%, transparent);
  color: var(--tinta-media);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.pdp2-3d__repor:hover { color: var(--tinta); border-color: var(--tinta-fraca); }
@media (prefers-reduced-motion: reduce) {
  .pdp2-3d__dica svg { animation: none; }
}
@media (max-width: 759px) {
  .pdp2-lados__linha { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-inline: 30px; }
  .pdp2-lados__vista { position: static; }
  .pdp2-3d__palco { aspect-ratio: 1 / 1; }
}
}
/* A nota explica a fotografia, por isso vive ao pe dela. */
.pdp2 .pdp2-espelho__nota { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--tinta-fraca); max-width: 62ch; }
/* Uma composicao, nao uma fila. Seis renders quase iguais, todos do mesmo
   tamanho e a rolar de lado, sao uma folha de contactos: o olho nao tem por
   onde entrar e nenhuma imagem e grande o suficiente para se ver. Aqui cada
   vista tem o tamanho que merece — a que mostra a peca inteira ocupa o dobro
   da que mostra um pormenor — e cabem todas no ecra, sem arrastar nada. */
.pdp2-tira {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  padding-inline: 30px;
}
.pdp2-tira > * { grid-column: span 2; }
.pdp2-tira > :nth-child(1) { grid-column: span 4; }
.pdp2-tira > :nth-child(5),
.pdp2-tira > :nth-child(6) { grid-column: span 3; }
@media (min-width: 760px) { .pdp2-tira { padding-inline: 44px; gap: 16px; } }

/* No telemovel duas colunas, e a primeira ocupa a largura toda: e a vista de
   frente, a que da a medida da peca. */
@media (max-width: 759px) {
  .pdp2-tira { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* as tres regras de cima tem de ser todas desfeitas: com duas colunas, um
     `span 3` esmaga as vizinhas para zero */
  .pdp2-tira > *,
  .pdp2-tira > :nth-child(5),
  .pdp2-tira > :nth-child(6) { grid-column: span 1; }
  .pdp2-tira > :nth-child(1) { grid-column: span 2; }
}
.pdp2-tira::-webkit-scrollbar { display: none; }
/* As vistas são renders quadrados da peça na combinação escolhida: um
   conjunto de iguais, por isso uma forma só — o quadrado do próprio render,
   sem recorte. No computador numa linha, a começar no alinhamento do título
   da secção e a ir até à margem direita da janela (no ISLET a composição
   antiga tinha 1 450 px de altura). No telemóvel, a primeira à largura toda e
   as restantes duas a duas. As salas "Em casa" e os desenhos cotados não
   entram aqui: são outra coisa, e têm o seu lugar. */
@media (min-width: 900px) {
  .pdp2-lados:not(.pdp2-lados--3d) .pdp2-tira {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    padding-left: max(44px, calc((100vw - 1180px) / 2 + 44px));
    padding-right: 44px;
  }
  .pdp2-lados:not(.pdp2-lados--3d) .pdp2-tira > * {
    flex: 1 1 0;
    min-width: 0;
    max-width: 320px;
  }
}
.pdp2-lados:not(.pdp2-lados--3d) .pdp2-tira > * { aspect-ratio: 1 / 1; }
/* telemóvel: com a primeira à largura toda, uma última sozinha na linha
   (seis vistas) passa também à largura toda, e a composição fecha como abre */
@media (max-width: 759px) {
  .pdp2-lados:not(.pdp2-lados--3d) .pdp2-tira > :last-child:nth-child(even):not(:first-child) { grid-column: span 2; }
}
.pdp2-mini {
  /* a mesma forma em todas: o que varia e o tamanho, nao o recorte. Mais
     larga do que alta porque a peca enche o quadro e ja nao precisa de altura
     para o estudio vazio. */
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  background: var(--areia);
  border-radius: 2px;
  overflow: hidden;
  cursor: zoom-in;
  /* numa composicao nao ha "a escolhida": todas se veem por igual */
  opacity: 1;
  transition: opacity 0.3s ease;
}
.pdp2-mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
  object-position: 50% 50%;
}
.pdp2-mini:hover { opacity: 0.86; }
/* O tema põe `overflow: visible` nos botões, com mais peso do que o `hidden`
   de cima: a vista ampliada por encherQuadro saía da caixa e pisava as
   vizinhas. O clip-path recorta sem depender dessa disputa. */
.pdp2 .pdp2-mini { overflow: hidden; clip-path: inset(0 round 2px); }

@keyframes pdp2-entra {
  from { opacity: 0; transform: scale(1.012); }
  to   { opacity: 1; transform: none; }
}
.pdp2-entra { animation: pdp2-entra 0.62s cubic-bezier(0.2, 0.6, 0.2, 1) both; }

/* Quando a combinação escolhida ainda não foi fotografada, a página diz o que
   está mesmo na fotografia em vez de deixar supor que é aquela. */
.pdp2-nota-foto {
  margin: 14px auto 0;
  font-size: 13px;
  color: var(--tinta-fraca);
}
.pdp2-nota-foto::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--dourado);
  vertical-align: 2px;
}

/* Secções --------------------------------------------------------------- */

.pdp2-sec { padding: 56px 0; border-top: 1px solid var(--linha); }
.pdp2-sec--primeira { border-top: 0; }

/* Banda de largura total: um elemento próprio com o seu interior centrado. Com
   margens negativas calculadas a partir de 100vw isto saía do ecrã. */
.pdp2-banda { background: var(--areia); padding: 68px 0; }
.pdp2-numero { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) {
  .pdp2-numero { grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; }
}

.pdp2-aviso {
  margin: 22px 0 0;
  padding-left: 13px;
  border-left: 2px solid var(--dourado);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tinta-fraca);
  max-width: 52ch;
}
.pdp2-aviso b { font-weight: 500; color: var(--tinta-media); }

/* A chapa --------------------------------------------------------------- */

/* Latão escovado. O que faz a diferença entre isto e um rectângulo amarelo são
   três coisas sobrepostas: o veio do escovado, um reflexo diagonal estreito que
   corta a placa, e a gravação feita com duas sombras — uma escura por dentro e
   um fio de luz por baixo, que é como se lê um baixo-relevo. */
.pdp2-chapa { margin: 0; display: block; }

.pdp2-chapa__placa {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 40 / 15;
  border-radius: 2.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8%;
  position: relative;
  isolation: isolate;
  background:
    /* reflexo diagonal, estreito e alto */
    linear-gradient(104deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.5) 43%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(255, 255, 255, 0) 60%),
    /* corpo do latão */
    linear-gradient(163deg,
      #cdb384 0%, #b99b6a 18%, #dcc79c 38%,
      #ab8d5e 55%, #cfb78d 72%, #b59768 88%, #c6ab7c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(20, 19, 14, 0.3),
    inset 1px 0 0 rgba(255, 255, 255, 0.24),
    inset -1px 0 0 rgba(20, 19, 14, 0.16),
    0 1px 1px rgba(20, 19, 14, 0.14),
    0 22px 40px -22px rgba(20, 19, 14, 0.6);
}

/* o veio do escovado, horizontal e quase invisível */
.pdp2-chapa__placa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0.5;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.13) 0px,
    rgba(255, 255, 255, 0.13) 0.5px,
    rgba(20, 19, 14, 0.05) 0.5px,
    rgba(20, 19, 14, 0.05) 1.5px);
}

/* os dois parafusos */
.pdp2-chapa__placa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 4.6% 50%,
      rgba(20, 19, 14, 0.34) 0px, rgba(20, 19, 14, 0.34) 1.6px,
      rgba(255, 255, 255, 0.5) 1.9px, rgba(255, 255, 255, 0.5) 2.6px,
      rgba(255, 255, 255, 0) 2.9px),
    radial-gradient(circle at 95.4% 50%,
      rgba(20, 19, 14, 0.34) 0px, rgba(20, 19, 14, 0.34) 1.6px,
      rgba(255, 255, 255, 0.5) 1.9px, rgba(255, 255, 255, 0.5) 2.6px,
      rgba(255, 255, 255, 0) 2.9px);
}

.pdp2-chapa__logo {
  display: block;
  width: 46%;
  aspect-ratio: 538 / 183;
  background: #5f5030;
  -webkit-mask: var(--pdp2-logo) center / contain no-repeat;
  mask: var(--pdp2-logo) center / contain no-repeat;
  filter:
    drop-shadow(0 0.5px 0 rgba(255, 245, 220, 0.75))
    drop-shadow(0 -0.5px 0 rgba(20, 19, 14, 0.25));
}

.pdp2-chapa__n {
  font-size: 12.5px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  font-variant-numeric: tabular-nums;
  color: #5f5030;
  text-shadow:
    0 0.5px 0 rgba(255, 245, 220, 0.8),
    0 -0.5px 0 rgba(20, 19, 14, 0.22);
}

.pdp2-chapa figcaption {
  display: block;
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* A escolha ------------------------------------------------------------- */

/* As colunas repartem-se pelo número de valores de cada eixo, não a meias: dez
   tecidos e duas madeiras em colunas iguais deixavam um tecido órfão na linha
   de baixo. O JS escreve o `flex` de cada eixo. */
.pdp2-escolha { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 30px; }
.pdp2-escolha > div { flex: 1 1 260px; min-width: 0; }
@media (min-width: 820px) { .pdp2-escolha { gap: 40px 56px; } }

/* Com um bloco preso por cima, um salto para um seletor punha-o por baixo dele.
   A margem de rolagem conta com a altura desse bloco, medida em JS. */
.pdp2 [data-pdp2-eixo] { scroll-margin-top: calc(var(--pdp2-topo, 0px) + var(--pdp2-espelho-h, 0px) + 16px); }

.pdp2-eixo__r { margin: 0 0 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cota); }

/* A amostra grande: sem ela não se vê o tecido, e a bolinha de 46px não chega
   para decidir uma peça de milhares de euros. */
.pdp2-eixo__topo { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.pdp2-eixo__amostra {
  flex: none;
  width: 104px; height: 104px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  background-color: #e6e3dc;
  box-shadow: inset 0 0 0 1px rgba(20, 19, 14, 0.14), 0 10px 22px -16px rgba(20, 19, 14, 0.6);
}
/* Sem amostra, o quadrado mostra a fotografia da variante: peca inteira sobre o
   branco do estudio, sem cortar. */
.pdp2-eixo__amostra--foto {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #fff;
}
.pdp2-eixo__n { margin: 0; font-size: 21px; line-height: 1.2; }
.pdp2-eixo__pp {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--cota);
}

.pdp2-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp2-swatch {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background-size: cover;
  background-position: center;
  background-color: #e6e3dc;
  cursor: pointer;
  padding: 0;
  position: relative;
  /* a 0.16 o contorno nao se lia sobre um tecido claro; a 0.3 desenha a bolinha
     sem a pesar. */
  box-shadow: inset 0 0 0 1px rgba(20, 19, 14, 0.3);
  transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.pdp2-swatch:hover, .pdp2-swatch:focus-visible {
  transform: scale(1.55);
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(20, 19, 14, 0.3), 0 14px 26px -12px rgba(20, 19, 14, 0.5);
}
.pdp2-swatch::before {
  content: attr(data-valor);
  position: absolute;
  left: 50%; bottom: calc(100% + 9px);
  transform: translateX(-50%) scale(0.66);
  transform-origin: bottom center;
  padding: 4px 8px;
  border-radius: 2px;
  background: var(--tinta);
  color: var(--papel);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.pdp2-swatch:hover::before, .pdp2-swatch:focus-visible::before { opacity: 1; }
/* Uma bolinha de medida traz o numero dentro; uma bolinha de cor sem amostra
   declarada ganha a cor verdadeira da peca, lida da fotografia da variante.
   Nenhuma das duas precisa de imagem de amostra. */
/* Um tamanho nao e uma cor. Uma bolinha de 44px com "25" la dentro le-se como
   uma amostra vazia com um numero em cima — e a medida, que e a unica coisa que
   interessa naquele eixo, fica cortada. Passa a pastilha, com o valor inteiro. */
.pdp2-swatches--medida { gap: 8px; }
.pdp2-medida {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(20, 19, 14, 0.22);
  border-radius: 999px;
  background: none;
  color: var(--tinta-media);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.pdp2-medida:hover, .pdp2-medida:focus-visible { border-color: rgba(20, 19, 14, 0.5); color: var(--tinta); }
.pdp2-medida[aria-pressed="true"] {
  border-color: var(--tinta);
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta);
}
.pdp2-swatch--sem:not(.pdp2-swatch--medida) { background-color: #d9d5cc; }

.pdp2-swatch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgba(20, 19, 14, 0.3), 0 0 0 2px var(--papel), 0 0 0 3px var(--tinta);
}
.pdp2-swatch--pp::after {
  content: "";
  position: absolute; right: -1px; top: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dourado);
  box-shadow: 0 0 0 2px var(--papel);
}

.pdp2-nota-pp { margin: 16px 0 0; font-size: 12.5px; color: var(--tinta-fraca); display: flex; align-items: center; gap: 8px; }
.pdp2-nota-pp i { width: 9px; height: 9px; border-radius: 50%; background: var(--dourado); flex: none; }

/* A barra fixa recolhe enquanto o botao verdadeiro estiver a vista: dois
   "Adicionar ao carrinho" no mesmo ecra e uma escolha a mais, nao a menos. */
.pdp2-barra {
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
/* A regra que abre a barra é .pdp2-barra[data-visivel] — classe mais atributo.
   Escrita só com a classe, esta perdia o transform para ela e a barra saía a
   desvanecer no sítio em vez de descer. Fica com a mesma âncora, mais a classe. */
.pdp2-barra--recolhida,
.pdp2-barra[data-visivel].pdp2-barra--recolhida {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .pdp2-barra { transition: none; }
}

/* Comprar, no fim da escolha -------------------------------------------- */
.pdp2-comprar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin: 30px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(20, 19, 14, 0.12);
}
.pdp2-comprar__p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.pdp2-comprar__p b { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.pdp2-comprar__p span { font-size: 12.5px; color: var(--tinta-fraca); }
.pdp2-comprar .pdp2-btn { flex: 0 0 auto; }
@media (max-width: 480px) {
  .pdp2-comprar .pdp2-btn { flex: 1 0 100%; text-align: center; }
}

/* Ver os materiais de perto --------------------------------------------- */

/* Não se pede uma amostra: vê-se. A textura ocupa o ecrã inteiro — é o que
   substitui o toque — e a peça feita nela fica ao lado, para o material não
   ser um quadrado abstracto. Escolher aqui escolhe de facto. */
.pdp2-ver { margin: 14px 0 0; }
.pdp2-ver button {
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid var(--cota);
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--tinta);
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.pdp2-ver button:hover { border-color: var(--tinta); }

.pdp2-visor {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--tinta);
  animation: pdp2-entra 0.42s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.pdp2-visor__fundo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease;
}
.pdp2-visor__fundo::after {
  content: "";
  position: absolute; inset: 0;
  /* O véu tem de aguentar uma textura clara — o Aqua Soft é quase branco — sem
     nunca chegar a ser um bloco por cima da fotografia. */
  background: linear-gradient(to top,
    rgba(20, 19, 14, 0.86) 0%,
    rgba(20, 19, 14, 0.62) 26%,
    rgba(20, 19, 14, 0.18) 52%,
    rgba(20, 19, 14, 0) 72%);
}

.pdp2-visor__barra {
  position: absolute;
  left: 0; right: 0; bottom: 118px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(26px, 5vw, 64px);
  color: var(--papel);
}
.pdp2-visor__eixo {
  margin: 0 0 6px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(247, 247, 244, 0.62);
}
.pdp2-visor__nome { margin: 0; font-size: clamp(28px, 5vw, 52px); line-height: 1.05; font-weight: 400; text-shadow: 0 1px 24px rgba(20, 19, 14, 0.5); }
.pdp2-visor__pp {
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: #e6c78d;
}
.pdp2-visor__id .pdp2-btn {
  margin-top: 20px;
  background: var(--papel);
  color: var(--tinta);
}
.pdp2-visor__id .pdp2-btn:hover { background: #fff; }
.pdp2-visor__peca {
  flex: 0 0 auto;
  width: clamp(180px, 30vw, 400px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.7);
}
@media (max-width: 759px) {
  .pdp2-visor__peca { display: none; }
  .pdp2-visor__barra { bottom: 104px; }
}

.pdp2-visor__fila {
  position: absolute;
  /* O anel da amostra escolhida sai 4px para fora do circulo, e um
     `overflow-x: auto` tambem corta na vertical — o anel ficava cortado em
     cima e em baixo. A folga entra por dentro e o `bottom` desce o mesmo
     tanto, para as amostras nao mudarem de sitio. */
  left: 0; right: 0; bottom: 20px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px clamp(26px, 5vw, 64px);
}
.pdp2-visor__fila::-webkit-scrollbar { display: none; }
.pdp2-visor__am {
  flex: 0 0 auto;
  width: 58px; height: 58px;
  border: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #4a453a;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.pdp2-visor__am:hover { opacity: 0.85; transform: translateY(-3px); }
.pdp2-visor__am.e-agora { opacity: 1; box-shadow: 0 0 0 2px var(--tinta), 0 0 0 4px var(--papel); }

.pdp2-visor__x {
  position: absolute;
  top: 20px; right: clamp(20px, 5vw, 40px);
  padding: 9px 16px;
  border: 1px solid rgba(247, 247, 244, 0.4);
  border-radius: 2px;
  background: rgba(20, 19, 14, 0.3);
  color: var(--papel);
  font: inherit; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
}
.pdp2-visor__seta {
  position: absolute;
  top: 42%;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(20, 19, 14, 0.34);
  color: var(--papel);
  cursor: pointer;
  transition: background 0.3s ease;
}
.pdp2-visor__seta svg { width: 22px; height: 22px; }
.pdp2-visor__seta:hover { background: rgba(20, 19, 14, 0.6); }
.pdp2-visor__seta--ant { left: clamp(14px, 3vw, 34px); }
.pdp2-visor__seta--seg { right: clamp(14px, 3vw, 34px); }

/* Cotas ----------------------------------------------------------------- */

/* As cotas reais vêm do estúdio, geradas do modelo 3D. Não são desenhadas aqui
   nem por um modelo de imagem: os números são medidos, não plausíveis. */
.pdp2-cotadas { margin: 30px 0 0; }
.pdp2-cotada {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: 2px;
  /* o render cotado tem o seu próprio estúdio cinzento: uma caixa branca à
     volta fazia duas molduras */
  background: var(--areia);
  cursor: zoom-in;
  overflow: hidden;
}
.pdp2-cotadas img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pdp2-cotadas__nota {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

/* Ampliação das cotas: no telemóvel os números têm cinco pixéis de altura e não
   se leem sem isto. */
.pdp2-lupa {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 19, 14, 0.92);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 16px;
  cursor: zoom-out;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  animation: pdp2-entra 0.3s ease both;
}
/* Num ecrã estreito uma imagem larga não cresce por caber: cresce por se poder
   arrastar. Abre a 2,6 vezes a largura do ecrã e desliza na horizontal. */
.pdp2-lupa img {
  max-width: none;
  width: min(1500px, 260vw);
  height: auto;
  margin: auto;
  background: #fff;
  border-radius: 2px;
}
@media (min-width: 900px) {
  .pdp2-lupa { justify-content: center; overflow: hidden; }
  .pdp2-lupa img { width: auto; max-width: 100%; max-height: 88vh; }
}
/* Fotografias: inteiras, ajustadas ao ecra, sem o fundo branco do desenho. */
/* e o fundo quase opaco: a pagina a transparecer por tras distraia da fotografia */
.pdp2-lupa--foto { justify-content: center; overflow: hidden; background: rgba(13, 12, 11, 0.97); }
.pdp2-lupa--foto img {
  width: auto;
  max-width: 100%;
  max-height: 86vh;
  background: none;
}
/* A lupa vive no <body>, fora da ficha, e o body do tema e Times: sem isto o
   "Fechar" saia em serifa. */
.pdp2-lupa,
.pdp2-lupa__x { font-family: var(--base-font-family, inherit); }
.pdp2-lupa__x {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 1;
  padding: 9px 16px;
  border: 1px solid rgba(247, 247, 244, 0.35);
  border-radius: 2px;
  background: transparent;
  color: #f7f7f4;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
/* Os desenhos cotados são renders quadrados, como as vistas, e seguem o mesmo
   módulo: numa linha no computador, até 320 px cada (eram dois por linha a
   541 px e a secção passava de 1 700 px). No telemóvel deslizam de lado, um
   quadrado quase à largura do ecrã de cada vez, em vez de três quadrados de
   330 px empilhados. Cada um abre grande na lupa para se lerem os números. */
.pdp2-cotadas { display: flex; flex-wrap: wrap; gap: 16px; }
.pdp2-cotadas[hidden] { display: none; }
.pdp2-cotadas .pdp2-cotada { flex: 1 1 0; min-width: 0; max-width: 320px; }
@media (max-width: 859px) {
  .pdp2-cotadas {
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -30px;
    padding-inline: 30px;
    scroll-padding-inline: 30px;
  }
  .pdp2-cotadas::-webkit-scrollbar { display: none; }
  .pdp2-cotadas .pdp2-cotada { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; }
}

.pdp2-baixar { margin: 18px 0 0; font-size: 13.5px; }
.pdp2-baixar a {
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--cota);
  padding-bottom: 2px;
  transition: border-color 0.3s ease;
}
.pdp2-baixar a:hover { border-color: var(--tinta); }

/* A folha e os números lado a lado; num ecrã estreito a linha parte-se. */
.pdp2-med {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: flex-start;
  margin: 30px 0 0;
}

/* O papel. O desenho deixa de ser tinta a flutuar na página e passa a ser uma
   folha pousada nela — e a folha encolhe para o desenho, em vez de o desenho se
   esticar para a folha.

   Já não há `min-width: 980px` nem `overflow-x: auto` nem esconder abaixo dos
   900px. Tudo isso existia porque o tipo era uma fracção da folha e ficava com
   4px num telemóvel; agora é medido em pixeis do ecrã e lê-se a 11,5px em
   qualquer largura, por isso o desenho cabe onde for posto. */
.pdp2-cotas {
  flex: 0 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--linha);
  border-radius: 2px;
  background: var(--areia);
  /* as tintas e a letra que o desenho herda; mudam sozinhas na ficha de noite
     porque apontam para os mesmos tokens que a página */
  --pst-tinta: var(--tinta);
  --pst-cota: var(--cota);
  /* o texto do desenho e o contorno da porta: medidos contra este papel, o
     dourado da cota dava 3,47 e o fio da porta 1,46 */
  --pst-texto: var(--tinta-media);
  --pst-fraca: var(--tinta-fraca);
  --pst-letra: var(--base-font-family, "Inter", system-ui, -apple-system, sans-serif);
}
.pdp2-cotas svg { display: block; }

/* Uma frase e uma frase. Vestida de rotulo — maiusculas e letras afastadas —
   ficava a gritar uma coisa que so precisa de ser dita baixinho. */
.pdp2-nota {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  max-width: 58ch;
  color: var(--tinta-fraca);
  font-family: var(--base-font-family, "Inter", system-ui, -apple-system, sans-serif);
}

/* Os números ao lado da folha: linhas com um fio entre elas, nome à esquerda e
   medida à direita. Eram caixas numa grelha de quatro, feitas para ocupar a
   largura toda por baixo do desenho; ao lado de uma folha estreita ficavam
   apertadas, e o rótulo em maiúsculas com um `min-height` de duas linhas dizia
   em voz alta o que só precisa de ser lido. */
.pdp2-medidas {
  flex: 1 1 190px;
  max-width: 360px;
  margin: 0;
  font-family: var(--base-font-family, "Inter", system-ui, -apple-system, sans-serif);
}
.pdp2-medidas > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linha);
}
.pdp2-medidas > div:first-child { border-top: 1px solid var(--linha); }
.pdp2-medidas dt { font-size: 13px; color: var(--tinta-media); }
.pdp2-medidas dd { margin: 0; font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pdp2-medidas dd span { font-size: 12px; color: var(--tinta-fraca); margin-left: 3px; }

/* Antes de decidir ------------------------------------------------------ */

.pdp2-gar { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); margin-top: 26px; }
@media (min-width: 760px) { .pdp2-gar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pdp2-gar > div { background: var(--papel); padding: 22px 24px; }
.pdp2-gar b { display: block; margin-bottom: 6px; font-weight: 500; font-size: 15px; }
.pdp2-gar p { margin: 0; font-size: 13.5px; color: var(--tinta-fraca); line-height: 1.55; }

.pdp2-fim {
  margin: 0;
  padding: 60px 0 16px;
  border-top: 1px solid var(--linha);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* Barra fixa ------------------------------------------------------------ */

.pdp2-barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  margin: 0;
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.pdp2-barra[data-visivel] {
  transform: none;
  /* estava aqui rgba(247,247,244,.94) escrito a mao: numa pagina de noite a
     barra do carrinho ficava um rectangulo branco por baixo do escuro todo */
  background: var(--barra-fundo);
  backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--linha);
  /* no iPhone a barra tem de acabar acima do indicador, nao por baixo dele */
  padding-bottom: env(safe-area-inset-bottom);
}
.pdp2-barra__i { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 11px; }
/* No computador a barra e larga e o `space-between` atirava o preco para uma
   ponta e o botao para a outra — 898px entre eles a 1440. O numero e a accao
   sao um par: ficam juntos, ao centro. No telemovel nao ha espaco para se
   afastarem, e o `space-between` continua a servir. */
@media (min-width: 900px) { .pdp2-barra__i { justify-content: center; gap: 26px; } }
.pdp2-barra__e { display: flex; flex-direction: column; min-width: 0; }
.pdp2-barra__e b { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pdp2-barra__e span { font-size: 12px; color: var(--tinta-fraca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp2-barra .pdp2-btn { margin-top: 0; flex: none; }
/* As amostras na barra: pequenas, a fotografia da peça em cada opção. Muitas
   (a RUMO tem oito cores) rolam de lado em vez de empurrar o botão. */
/* o preço não encolhe: sem isto, no telemóvel, ficava uma letra por linha */
.pdp2-barra--com-amostras .pdp2-barra__e { flex: none; }
.pdp2-barra__sw { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px; }
.pdp2-barra__sw[hidden] { display: none; }
.pdp2-barra__sw::-webkit-scrollbar { display: none; }
.pdp2-barra__am {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--areia);
  box-shadow: inset 0 0 0 1px var(--linha);
  cursor: pointer;
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
}
.pdp2-barra__am img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp2-barra__am:hover { box-shadow: 0 0 0 1px var(--tinta-fraca); }
.pdp2-barra__am[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--papel), 0 0 0 3px var(--tinta); }
.pdp2-barra__am:disabled { opacity: 0.35; cursor: default; }
.pdp2-barra__am--txt { width: auto; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 12px; color: var(--tinta-media); background: none; }
.pdp2-barra__am--txt[aria-pressed="true"] { color: var(--tinta); }
.pdp2-barra__sep { flex: none; width: 1px; height: 22px; margin: 0 4px; background: var(--linha); }
.pdp2-vistas__b[hidden] { display: none; }
/* O nome da opção por cima da bolinha, com o rato. Sobe e aparece devagar. */
.pdp2-barra__i { position: relative; }
.pdp2-barra__nome {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  padding: 6px 12px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--tinta);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.2, 0.6, 0.2, 1), left 0.25s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.pdp2-barra__nome.e-visivel { opacity: 1; transform: translate(-50%, 0); }
.pdp2-barra__nome:empty { display: none; }
@media (hover: none), (pointer: coarse) { .pdp2-barra__nome { display: none; } }
@media (max-width: 759px) {
  .pdp2-barra--com-amostras .pdp2-barra__e span { display: none; }
  /* no telemovel as amostras tem a sua linha, por cima do preco e do botao:
     ao lado deles cabia uma bolinha e meia */
  .pdp2 .pdp2-barra--com-amostras .pdp2-barra__i { flex-wrap: wrap; row-gap: 6px; padding-top: 8px; }
  .pdp2-barra--com-amostras .pdp2-barra__sw { order: -1; flex: 1 0 100%; padding-inline: 0 4px; }
  .pdp2-barra__am { width: 32px; height: 32px; }
}

/* No telemovel a loja tem um botao flutuante de WhatsApp no canto inferior
   direito, que ficava por cima do "Adicionar ao carrinho". A barra abre-lhe
   espaco em vez de disputar o mesmo canto. */
/* A barra partilha a classe .pdp2-env, e quando subi a especificidade dessa
   para resolver as margens laterais, o padding-inline dela passou a ganhar a
   esta folga — o botão do carrinho voltou a ficar por baixo da bolha do
   WhatsApp. Daí o seletor com o mesmo peso. */
@media (max-width: 759px) {
  .pdp2 .pdp2-barra__i { padding-right: 78px; gap: 12px; }
  .pdp2 .pdp2-barra .pdp2-btn { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp2 *, .pdp2 *::before, .pdp2 *::after { transition-duration: 0.01ms !important; }
}

/* ---- a prova: escolher em ecra inteiro ---------------------------------
   Tres tentativas de fazer caber a peca e as amostras no mesmo pedaco de pagina
   a rolar deram sempre no mesmo: ou a peca ficava pequena, ou cortada, ou as
   amostras iam parar debaixo dela. O problema era a pagina rolar. Aqui nao
   rola: a peca ocupa o que sobra do ecra e as amostras ficam numa barra em
   baixo, debaixo do polegar. */
.pdp2-prova {
  position: fixed;
  inset: 0;
  z-index: 96;
  background: var(--papel);
  color: var(--tinta);
  display: grid;
  /* Tres linhas: cabecalho, palco, barra. A nota vive DENTRO do palco, pousada
     em baixo. Como linha da grelha nao servia: um `<p>` vazio e escondido pelo
     tema, a linha desaparecia e a barra saltava para o sitio errado — era isso
     que fazia a caixa mudar de tamanho entre escolhas. */
  /* cabecalho, chips das vistas, miniaturas, palco, barra */
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  animation: pdp2-entra 0.42s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.pdp2-prova > * { min-width: 0; }
.pdp2-prova__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px clamp(20px, 4vw, 44px) 8px;
}
.pdp2-prova__t {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.pdp2-prova__x {
  border: 1px solid var(--linha);
  background: none;
  color: inherit;
  padding: 9px 18px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.pdp2-prova__x:hover { background: rgba(20, 19, 14, 0.05); }
.pdp2-prova__palco { position: relative; min-height: 0; }
/* `contain`: a peca aparece inteira e a caixa e sempre a mesma, seja qual for a
   vista ou a combinacao. O fundo do render e branco, por isso nao se ve onde a
   fotografia acaba. */
.pdp2-prova__palco { overflow: hidden; }
.pdp2-prova__palco > img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.pdp2-prova__seta {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 19, 14, 0.06);
  color: var(--tinta);
  cursor: pointer;
}
.pdp2-prova__seta:hover { background: rgba(20, 19, 14, 0.12); }
.pdp2-prova__seta svg { width: 22px; height: 22px; }
.pdp2-prova__seta--ant { left: clamp(8px, 2vw, 24px); }
.pdp2-prova__seta--seg { right: clamp(8px, 2vw, 24px); }
.pdp2-prova__conta {
  position: absolute;
  right: clamp(16px, 4vw, 44px);
  bottom: 4px;
  margin: 0;
  font-size: 12px;
  color: var(--tinta-fraca);
}
/* Uma linha e uma linha: a frase e curta e, se ainda assim nao couber, corta-se
   com reticencias em vez de partir para uma segunda e empurrar o resto. */
.pdp2-prova__nota[hidden] { display: none; }
.pdp2-prova__nota {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 0 clamp(20px, 4vw, 44px) 8px;
  background: linear-gradient(to top, var(--papel) 62%, rgba(247, 247, 244, 0));
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tinta-fraca);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdp2-prova__barra {
  display: block;
  padding: 12px clamp(20px, 4vw, 44px) calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha);
  background: var(--papel);
  /* sem isto, dez amostras de 46px alargam a grelha para la do ecra e a pagina
     inteira passa a poder ser arrastada de lado */
  min-width: 0;
}
.pdp2-prova__eixo { min-width: 0; }
/* Uma linha de cabecalho — o que esta escolhido a esquerda, o preco a direita —
   e por baixo todas as amostras numa corrente so. */
.pdp2-prova__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.pdp2-prova__sel {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 13.5px;
  min-width: 0;
}
.pdp2-prova__sel span { white-space: nowrap; }
.pdp2-prova__sel b {
  font-weight: 400;
  margin-right: 7px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cota);
}
.pdp2-prova__sep {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 26px;
  background: var(--linha);
  margin-inline: 6px;
}
.pdp2-prova__r {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cota);
}
.pdp2-prova__r b {
  margin-left: 10px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
}
/* Nada de rolar de lado: as amostras mudam de linha. Com dez tecidos numa fila
   que rola, metade ficava escondida e o anel da escolhida era cortado pela
   borda do proprio scroller — que corta nos quatro lados, nao so num. */
.pdp2-prova__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 5px 0 0;
}
.pdp2-prova__fila::-webkit-scrollbar { display: none; }
.pdp2-prova__am {
  flex: 0 0 auto;
  position: relative;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #e6e3dc;
  box-shadow: inset 0 0 0 1px rgba(20, 19, 14, 0.16);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.pdp2-prova__am:hover { transform: scale(1.06); }
.pdp2-prova__am.e-agora {
  box-shadow: inset 0 0 0 1px rgba(20, 19, 14, 0.16), 0 0 0 2px var(--papel), 0 0 0 4px var(--tinta);
}
.pdp2-prova__am.e-pp::after {
  content: '';
  position: absolute;
  top: -1px; right: -1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dourado);
  box-shadow: 0 0 0 2px var(--papel);
}

/* As outras vistas da mesma combinacao, a vista. Uma so em destaque escondia
   que existem seis. Pequenas, para nao competirem com a peca. */
.pdp2-prova__vistas {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px clamp(20px, 4vw, 44px) 8px;
  min-height: 8px;
}
.pdp2-prova__vistas::-webkit-scrollbar { display: none; }
.pdp2-prova__v {
  flex: 0 0 auto;
  width: 62px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(20, 19, 14, 0.05);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.25s ease;
}
.pdp2-prova__v img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* o destaque vai por cima da imagem: o box-shadow inset ficava por baixo dela
   e nao se via qual estava escolhida */
.pdp2-prova__v.e-agora { opacity: 1; outline: 2px solid var(--tinta); outline-offset: -2px; }
.pdp2-prova__v:hover { opacity: 0.85; }
/* No telemovel as seis tem de caber sem rolar: 6 x 44 + 5 x 6 = 294, e a
   largura util e 305. Uma fila que corta a ultima e uma fila que mente sobre
   quantas ha. */
@media (max-width: 759px) {
  .pdp2-prova__vistas { gap: 6px; }
  .pdp2-prova__v { width: 44px; }
}
@media (min-width: 760px) { .pdp2-prova__v { width: 76px; } }

.pdp2-prova__preco {
  margin: 0;
  flex: 0 0 auto;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 760px) { .pdp2-prova__preco { font-size: 22px; } }
/* Por cima, o que esta escolhido; por baixo, numa linha so, as amostras a
   esquerda e o par preco+botao a direita, no fundo da barra. */
.pdp2-prova__barra > .pdp2-prova__sel { margin-bottom: 12px; }
.pdp2-prova__baixo { display: flex; align-items: center; gap: 28px; min-width: 0; }
.pdp2-prova__baixo > .pdp2-prova__fila { flex: 1 1 auto; min-width: 0; }
.pdp2-prova__compra {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
}
.pdp2-prova__compra .pdp2-btn { margin-top: 0; padding: 12px 22px; white-space: nowrap; }
/* Eixo de medidas: a pastilha com o valor escrito, a mesma de fora da prova. */
.pdp2-prova__am--txt {
  width: auto;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: none;
  box-shadow: inset 0 0 0 1px var(--linha);
  color: var(--tinta-media);
  font: inherit;
  font-size: 13.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pdp2-prova__am--txt:hover { transform: none; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta-fraca); }
.pdp2-prova__am--txt.e-agora { color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
@media (max-width: 759px) {
  .pdp2-prova__am { width: 42px; height: 42px; }
  .pdp2-prova__am--txt { width: auto; height: 40px; padding: 0 14px; font-size: 13px; }
  .pdp2-prova__sel { font-size: 12.5px; gap: 2px 14px; }
  /* A 390px as amostras e o par nao cabem lado a lado: o par desce para a sua
     linha, preco a esquerda e botao a direita, e continua a ser o fundo. */
  .pdp2-prova__baixo { flex-wrap: wrap; gap: 12px; }
  .pdp2-prova__baixo > .pdp2-prova__fila { flex-basis: 100%; }
  .pdp2-prova__compra { width: 100%; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
  .pdp2-prova__compra .pdp2-btn { padding: 11px 18px; font-size: 13.5px; }
}

/* ---- em casa ------------------------------------------------------------
   Os restantes renders de ambiente. A pagina tinha-os e nao os mostrava: so
   apareciam as fotografias de estudio, que dizem como a peca e mas nao dizem
   como se vive com ela. Ficam com a forma que tem — retrato — em vez de serem
   espremidas num quadrado. */
.pdp2-casa { padding: 6px 0 8px; }
.pdp2-casa__nota {
  margin: 6px 0 18px;
  font-size: 13px;
  color: var(--tinta-fraca);
}
.pdp2-casa__fila {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 26vw);
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-inline: 30px;
  scroll-snap-type: x proximity;
  /* poucas salas ficam ao centro; muitas continuam a rolar de lado a partir
     da margem (o `safe` impede que o centro corte a primeira) */
  justify-content: safe center;
}
.pdp2-casa__fila::-webkit-scrollbar { display: none; }
.pdp2-casa__fila img {
  width: 100%;
  height: clamp(340px, 52vh, 620px);
  object-fit: cover;
  display: block;
  scroll-snap-align: center;
  background: var(--areia);
}
@media (min-width: 760px) { .pdp2-casa__fila { padding-inline: 44px; } }

/* ---- o espelho da escolha ---------------------------------------------
   A peca e as amostras nao cabem no mesmo ecra em lado nenhum: no telemovel,
   com o dedo nos swatches, o heroi ja esta 398px acima; no computador esta a
   657px. Trocava-se o tecido e nao se via mudar nada.

   A peca passa a acompanhar quem escolhe, presa ao topo enquanto se escolhe, e
   com a largura toda em qualquer ecra. Uma peca de tres metros e meio nao vive
   numa coluna estreita — foi o que se tentou primeiro e ficou o sofa pequeno no
   meio de estudio vazio. O gesto e o mesmo em cima e em baixo: quem aprende a
   ficha no telemovel reconhece-a no computador. */
/* Ja nao esta presa. Escolher passou a ser um momento de ecra inteiro — a
   prova — e o problema que a fixacao resolvia (a peca sair do ecra enquanto se
   escolhe) deixou de existir. Aqui fica so a fotografia do que esta escolhido. */
.pdp2 .pdp2-espelho { margin: 0 0 22px; }
.pdp2 .pdp2-espelho__foto {
  /* a altura cede ao ecra: a peca fica grande, mas nunca ao ponto de empurrar
     as amostras para fora da vista — que era o problema de origem */
  /* A caixa toma a proporcao MEDIDA da peca. Com altura fixa e largura toda, a
     caixa ficava com 4,67 de proporcao para uma peca que precisa de 2,34: via-se
     metade do sofa, cortado por cima e por baixo. A conta nao se negoceia — ou a
     caixa tem a forma da peca, ou a peca nao cabe. */
  width: 100%;
  height: auto;
  aspect-ratio: var(--pdp2-peca-prop, 2);
  max-height: 38vh;
  background: var(--areia, #f2efe8);
  overflow: hidden;
}
.pdp2 .pdp2-espelho__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pdp2 .pdp2-espelho__l {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 11px 0 0;
  font-size: 13px;
  line-height: 1.3;
}
.pdp2 .pdp2-espelho__l i { font-style: normal; opacity: 0.3; }
.pdp2 .pdp2-espelho__v {
  /* a mudanca acende e apaga-se sozinha, devagar */
  transition: color 900ms ease, background-color 900ms ease;
  padding: 1px 3px;
  margin: 0 -3px;
}
.pdp2 .pdp2-espelho__v--novo {
  color: #6f5a30;
  background: rgba(197, 160, 89, 0.22);
  transition-duration: 160ms;
}

@media (min-width: 760px) {
  .pdp2 .pdp2-espelho { margin-inline: -44px; padding-inline: 44px; }
  .pdp2 .pdp2-espelho__l { font-size: 14px; margin-top: 13px; }
}

/* A caixa e sempre a mesma, medida uma vez. Antes ajustava-se a cada imagem e,
   como as seis vistas tem enquadramentos muito diferentes, crescia e encolhia a
   cada escolha. */
@media (min-width: 900px) {
  .pdp2 .pdp2-espelho__foto { max-width: 860px; margin-inline: auto; }
}

/* Em baixo: uma faixa presa ao topo, a sangrar ate a borda para nao parecer
   um cartao a flutuar. */

/* A identidade do material: a coleccao, como se comporta, e a referencia do
   fornecedor. Vem da pagina das amostras, para o tecido nao ter dois nomes
   conforme a pagina onde se le. */
.pdp2-visor__col {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dourado, #c5a059);
}
.pdp2-visor__nota {
  margin: 6px 0 0;
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.72;
}
.pdp2-visor__ref {
  margin: 7px 0 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.4;
}

/* ---- a ficha tecnica dos candeeiros ------------------------------------
   O snippet vem da ?view=1 e traz cores de dia escritas a mao (linhas a
   rgba(0,0,0,.08), botao com borda a currentColor). Aqui a pagina e de noite:
   as linhas passam a claras sobre o escuro, senao desaparecem. */
.pdp2-tec .especificacoes { margin-top: 14px; }
.pdp2--noite .pdp2-tec .especificacoes__row { border-bottom-color: rgba(237, 233, 225, .14); }
.pdp2--noite .pdp2-tec dt { color: var(--tinta-fraca); }
.pdp2--noite .pdp2-tec dd { color: var(--tinta); font-variant-numeric: tabular-nums; }
.pdp2--noite .pdp2-tec .especificacoes__title { color: var(--tinta); }
.pdp2--noite .pdp2-tec .especificacoes__icon { color: var(--cota); }
.pdp2--noite .pdp2-tec .especificacoes__btn { border-color: var(--linha); color: var(--tinta); }
.pdp2--noite .pdp2-tec .especificacoes__btn:hover { background: rgba(237, 233, 225, .08); }


/* ---- o rodape e as safe areas ------------------------------------------
   A barra do carrinho e fixa: fica sempre por cima do fundo da janela, e o
   rodape passava-lhe por baixo. O rodape ganha o espaco da barra em vez de a
   pagina o ganhar antes dele — assim nada fica cortado.

   E no iPhone, em modo escuro, as faixas do topo e do fundo apareciam brancas:
   o Safari pinta-as com a cor do <html>, nao com a da pagina. O JS trata da
   `theme-color` e do `viewport-fit`, que sao coisas do documento; aqui fica so
   a cor. */
body:has(.pdp2--noite) { background: #0D0C0B; }
body:has(.pdp2-barra) .shopify-section-group-footer-group,
body:has(.pdp2-barra) footer {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* ---- o configurador: as vistas em chips ---------------------------------
   3D, ambiente, fornecedor, medidas e ficha — numa fila que rola de lado no
   telemovel, como as amostras. So aparece quando ha mais do que uma. */
.pdp2-prova__modos {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px clamp(20px, 4vw, 44px) 10px;
}
.pdp2-prova__modos--vazio { padding: 0; }
.pdp2-prova__modos::-webkit-scrollbar { display: none; }
.pdp2-prova__modo {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: none;
  color: var(--tinta-media);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.pdp2-prova__modo:hover { color: var(--tinta); border-color: var(--tinta-fraca); }
.pdp2-prova__modo.e-agora { color: var(--papel); background: var(--tinta); border-color: var(--tinta); }
.pdp2-prova__modo:focus-visible { outline: 2px solid var(--cota); outline-offset: 2px; }

.pdp2-prova__3d {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background-color: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--cota);
}

/* As medidas e a ficha no palco: rola por dentro, o resto do plano fica. */
.pdp2-prova__palco--ficha { overflow-y: auto; overscroll-behavior: contain; }
.pdp2-prova__ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px clamp(20px, 4vw, 44px) 32px;
}
@media (min-width: 900px) {
  .pdp2-prova__ficha { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; }
}
.pdp2-prova__ficha-sec { padding: 0; border: 0; }
.pdp2-prova__ficha-sec .pdp2-h2 { font-size: clamp(20px, 2vw, 24px); }
.pdp2-prova__ficha-sec .pdp2-med { margin-top: 18px; }
.pdp2-prova__ficha-sec .pdp2-medidas { max-width: none; }
.pdp2-prova__ficha-sec .especificacoes__grid { grid-template-columns: minmax(0, 1fr); }
.pdp2--noite .pdp2-prova__ficha-sec .especificacoes__row { border-bottom-color: var(--linha); }
.pdp2--noite .pdp2-prova__ficha-sec dt { color: var(--tinta-fraca); }
.pdp2--noite .pdp2-prova__ficha-sec .especificacoes__btn { border-color: var(--linha); color: var(--tinta); }

/* Na pagina: a linha das miniaturas leva, a direita, a entrada no
   configurador. */
.pdp2-vistas-linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 10px; }
.pdp2-vistas-linha .pdp2-vistas { margin-top: 0; }
.pdp2-vistas__abrir {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: none;
  color: var(--tinta-media);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.pdp2-vistas__abrir:hover { color: var(--tinta); border-color: var(--tinta-fraca); }
.pdp2-vistas__abrir svg { width: 16px; height: 16px; }