/* Complementos do site — Confiança Jóias */

/* preço opcional no card */
.card .price{font-family:var(--serif);font-size:1.15rem;color:var(--gold);margin-top:.15rem}
.card .body h3{overflow-wrap:anywhere}

/* loja: texto à esquerda e foto à direita, dentro do mesmo cartão.
   `flex-direction:row` é obrigatório aqui: a regra base (.sdet em styles.css)
   define `column`, e sem este override a foto cai abaixo do texto. */
.sdet{
  display:flex;flex-direction:row;align-items:stretch;flex-wrap:nowrap;
  padding:2.2rem;gap:2rem;min-height:0
}
/*
 * `touch-action:pan-y` avisa o navegador que só a rolagem VERTICAL nos
 * interessa. Sem isso, no mobile, o gesto horizontal é engolido pela rolagem
 * da página e o arrasto para trocar de loja nunca dispara.
 */
.sdet{touch-action:pan-y}
/* entrada da loja quando a troca veio de um arrasto (classe posta por site.js) */
@keyframes swInLeft{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes swInRight{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.sdet.sw-left .sphoto,.sdet.sw-left .sdet-body{animation:swInLeft .34s cubic-bezier(.32,.72,0,1)}
.sdet.sw-right .sphoto,.sdet.sw-right .sdet-body{animation:swInRight .34s cubic-bezier(.32,.72,0,1)}
@media(prefers-reduced-motion:reduce){
  .sdet.sw-left .sphoto,.sdet.sw-left .sdet-body,
  .sdet.sw-right .sphoto,.sdet.sw-right .sdet-body{animation:none}
}
.sdet-body{
  display:flex;flex-direction:column;gap:.8rem;
  flex:1 1 auto;min-width:0;padding:0
}
/* O nome mais longo ("Shopping Estação BH") precisa caber em UMA linha na
   coluna de texto. Medido no navegador: a 3.4vw o texto pedia ~10% a mais de
   largura do que existe e quebrava. 2.85vw fica com folga em todas as larguras
   de desktop (1061px–1600px) e o teto de 2.6rem evita que cresça demais quando
   o container para de alargar (wrap em 1240px). */
.sdet-body h3{font-size:clamp(1.85rem,2.85vw,2.6rem);line-height:1.08}
/* a linha "Unidade 01" ganha um traço curto ao lado, como na referência */
.sdet-body>.eyebrow{display:flex;align-items:center;gap:.8rem}
.sdet-body>.eyebrow::after{content:"";flex:1;height:1px;max-width:120px;background:var(--line)}
.sdet .a{display:flex;align-items:flex-start;gap:.5rem}
.sdet .a svg{width:16px;height:16px;flex:none;margin-top:.3rem;stroke:var(--gold2);fill:none;stroke-width:1.6;stroke-linejoin:round}
.sdet .sphoto{
  flex:0 0 38%;max-width:38%;min-height:320px;
  border-radius:16px;border:1px solid var(--line);
  background-size:cover;background-position:center;position:relative
}
.sdet .sphoto::after{
  content:"";position:absolute;inset:0;border-radius:16px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.32))
}
.sdet .acts{margin-top:auto;display:flex;gap:.7rem;flex-wrap:wrap;padding-top:1.1rem}

/* seções publicadas pelo painel ficam alinhadas ao mesmo grid */
.sec-destaques .slider{margin-bottom:0}
.sec-servicos .sv h3{font-size:1.45rem}
.sec-avaliacoes .rv{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* faixa de números sem conteúdo não deve ocupar espaço */
.nums:empty{display:none}

/* enquadramento dos números no mobile (2 colunas) */
@media(max-width:640px){
  .nums{margin-top:1.6rem;border-radius:14px}
  .num{padding:1.1rem .65rem}
  .num b{font-size:clamp(1.55rem,7.2vw,2.05rem)}
  .num small{font-size:.57rem;letter-spacing:.13em;line-height:1.35;display:block}
}

/* em telas estreitas a foto desce e ocupa a largura toda do cartão.
 *
 * A ordem final no mobile é: SELETOR (slist) → FOTO (sphoto) → DADOS (sdet-body).
 * O seletor já vem antes do cartão no HTML, então só a foto precisa de
 * `order:-1` para subir acima do texto dentro do cartão.
 *
 * A foto original da loja é 724×1024 (retrato). Antes o quadro tinha 200px de
 * altura fixa com `background-size:cover`, o que cortava boa parte da imagem.
 * Agora o quadro usa `contain`: a foto aparece INTEIRA em qualquer largura, e
 * as sobras ficam na cor do cartão (não aparecem como faixa branca). O
 * `aspect-ratio` acompanha a proporção real da foto, então no celular comum
 * nem sobra barra lateral; `max-height` só evita que ela coma a tela toda em
 * aparelhos muito estreitos ou na horizontal.
 */
@media(max-width:760px){
  .sdet{flex-direction:column;padding:1.05rem;gap:.9rem}
  /*
   * A foto é retrato (724×1024 = 1:1,414). Ocupando os 316px de largura do
   * cartão, ela pediria 448px de altura — sozinha, quase uma tela inteira.
   * Limitando a largura a 240px o quadro cai para ~339px e, como o
   * `aspect-ratio` acompanha a proporção real, a arte continua aparecendo
   * POR INTEIRO (o `contain` não tem o que recortar). O `margin-inline:auto`
   * centraliza a foto no cartão.
   */
  .sdet .sphoto{
    flex:none;max-width:min(100%,240px);width:100%;min-height:0;height:auto;
    margin-inline:auto;
    order:-1;aspect-ratio:724/1024;
    background-size:contain;background-repeat:no-repeat;background-position:center;
    background-color:#0b0a09
  }
  .sdet-body h3{font-size:1.75rem}
  .sdet-body{gap:.6rem}
  .sdet-body>.eyebrow::after{max-width:60px}
  .sdet .acts{padding-top:.7rem;gap:.5rem;flex-wrap:nowrap}
  /* os dois botões dividem a linha: economiza ~60px de rolagem por unidade */
  .sdet .acts .btn{flex:1 1 0;min-width:0;padding-inline:.6rem;font-size:.82rem;justify-content:center}
}