/* Card de produto compartilhado: shop, páginas de categoria, sofás e a ficha
   ("Você também pode gostar").

   Vitrine compacta: sem caixa em volta, a foto é o card. Texto pequeno em
   DM Sans (nome, uma linha de medidas, preço), cores logo abaixo da foto e
   selos discretos. A serifada fica para os títulos das páginas.

   Faixas fixas com subgrid (foto, cores, nome, medidas, estoque, preço): cada
   faixa tem a mesma altura em toda a linha da grade, então nomes e preços
   ficam alinhados e as cores só ocupam espaço na linha em que alguma peça tem. */
.product-grid{--card-gap:3px;--row-gap:26px;--card-pad:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--card-gap);row-gap:var(--row-gap)}
@media(min-width:700px){.product-grid{--card-gap:8px;--row-gap:38px;--card-pad:2px;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* No celular a grade encosta nas bordas da tela, como numa vitrine. */
@media(max-width:699px){
  .shop-products-section .product-grid{margin-left:-14px;margin-right:-14px}
}
@media(max-width:349px){
  .shop-products-section .product-grid{margin-left:-10px;margin-right:-10px}
}

.product-card{display:flex;flex-direction:column}
.emcena-public .product-grid .product-card{position:relative;min-width:0;padding:0;background:transparent;border:0;border-radius:0;overflow:visible;box-shadow:none;cursor:default;transition:none}
.emcena-public .product-grid .product-card:hover{transform:none;box-shadow:none;border:0}
.product-card-main{display:flex;flex-direction:column;flex:1;min-width:0;color:inherit;text-decoration:none}
.product-card-main:hover{color:inherit}
.emcena-public .product-card-main:focus-visible{outline:2px solid #865437;outline-offset:2px}
.product-card-body{display:flex;flex-direction:column;flex:1;min-width:0}

/* Foto: fundo neutro igual para todas, cantos retos */
.emcena-public .product-card .product-media-stage{position:relative;display:block;width:100%;overflow:hidden;border-radius:0;background-color:#E6E0D5;background-image:none}
.product-card .product-media-stage img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.product-card:hover .product-media-stage img:not(.product-media-contain){transform:scale(1.03)}

/* Selos sobre a foto: etiqueta pequena, em caixa alta, sem pílula */
.emcena-public .product-card .ready-card-badge,
.emcena-public .product-card .product-tag{position:absolute;z-index:3;left:8px;right:auto;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;padding:4px 6px;border:0;border-radius:2px;background:#FCFAF4eb;box-shadow:none;font:600 9.5px/1.2 'DM Sans',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.emcena-public .product-card .ready-card-badge{top:8px;bottom:auto;color:#2F5A35}
.emcena-public .product-card .ready-card-badge:before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:#2F5A35;box-shadow:none}
.emcena-public .product-card .product-tag{top:auto;bottom:8px;color:#7A5F2E}

/* Texto */
.product-card .product-category{display:none}
.product-card .product-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;padding:10px var(--card-pad) 0;font:600 13.5px/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:0;color:#241E17;text-wrap:pretty}
.product-card .product-detail{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding:3px var(--card-pad) 0;font:400 12px/1.4 'DM Sans',system-ui,sans-serif;color:#6E6255}
.product-card .product-detail:empty{padding-top:0}
.product-card .product-status{display:flex;align-items:baseline;gap:6px;padding:4px var(--card-pad) 0;font:500 11.5px/1.35 'DM Sans',system-ui,sans-serif;color:#6E6255}
.product-card .product-status:before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:currentColor;transform:translateY(-2px)}
.product-card .product-status.is-pronta{color:#2F5A35}
.product-card .product-status.is-encomenda{color:#7A5F2E}
.product-card .product-status.is-reservado{color:#8A3B2E}
/* "Estoque a confirmar" em todo card virava ruído: some do card e continua na ficha. */
.product-card .product-status.is-confirmar{display:none}

/* Preço: logo abaixo do texto, sem linha separando */
.product-card .product-price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:0 var(--card-pad);padding:6px 0 0;border:0}
.product-card .product-price{font:600 13.5px/1.3 'DM Sans',system-ui,sans-serif;color:#241E17;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.product-card .product-price.is-quote{font:500 12.5px/1.3 'DM Sans',system-ui,sans-serif;color:#6E6255;white-space:normal}
.product-card .product-old-price{font-size:12px;color:#6E6255;text-decoration:line-through;white-space:nowrap}
.product-card .product-card-cta{display:none}

/* Cores: bolinhas pequenas logo abaixo da foto; o nome vai no rótulo acessível */
.product-card .product-colors{position:relative;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:0;padding:4px calc(var(--card-pad) - 7px) 0;border:0}
.product-card .product-color{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:0;min-height:0;padding:0;border:0;border-radius:50%;background:transparent}
.product-card .product-color:hover{background:#241e170f}
.product-card .product-color:focus-visible{outline:2px solid #865437;outline-offset:0}
.product-card .product-color-dot{width:14px;height:14px;border-radius:50%;border:1px solid #241e1759;box-shadow:none}
.product-card .product-colors-count{margin-left:4px;font-size:11.5px;color:#6E6255}

.product-skeleton{min-height:260px;background:#E6E0D5;border:0;border-radius:0;overflow:hidden}

@supports (grid-template-rows:subgrid){
  /* O espaço entre linhas vira margem: com subgrid, o row-gap da grade
     também abriria espaço entre as faixas de dentro de cada card. */
  .product-grid{row-gap:0}
  .product-grid>*{margin-bottom:var(--row-gap)}
  .product-grid>.product-card{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
  .product-card>.product-card-main{display:grid;grid-row:1 / span 6;grid-column:1;grid-template-rows:subgrid;row-gap:0}
  .product-card .product-card-body{display:contents}
  .product-card .product-media-stage{grid-row:1}
  /* As cores ficam fora do link principal (link dentro de link não é válido)
     e ocupam a faixa 2, logo abaixo da foto. */
  .product-card .product-colors{grid-row:2;grid-column:1;align-self:start}
  .product-card .product-name{grid-row:3;align-self:start}
  .product-card .product-detail{grid-row:4;align-self:start}
  .product-card .product-status{grid-row:5;align-self:start}
  .product-card .product-price-row{grid-row:6;align-self:start}
}

@media(min-width:700px){
  .product-card .product-name{font-size:14.5px}
  .product-card .product-detail{font-size:12.5px}
  .product-card .product-price{font-size:14.5px}
  .emcena-public .product-card .ready-card-badge,.emcena-public .product-card .product-tag{left:10px;font-size:10px}
  .emcena-public .product-card .ready-card-badge{top:10px}
  .emcena-public .product-card .product-tag{bottom:10px}
}
@media(max-width:699px){
  .product-card .product-colors-count{display:none}
  /* No celular o selo "Pronta-entrega" sobre a foto já diz o mesmo e a linha
     quebrava em duas; o prazo de 24h continua na ficha. */
  .product-card .product-status.is-pronta{display:none}
}
@media(max-width:349px){.product-grid{--card-pad:8px}.product-card .product-name{font-size:13px}}
@media(prefers-reduced-motion:reduce){.product-card,.product-card .product-media-stage img{transition:none!important}.product-card:hover .product-media-stage img{transform:none!important}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* "Você também pode gostar" na ficha: 4 peças, 2 por linha no celular e 4 no desktop. */
@media(min-width:1100px){.product-grid.is-related{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:700px) and (max-width:1099px){.product-grid.is-related{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Trilha da ficha: discreta, só texto. Sem linha nem sublinhado, para não
   parecer uma segunda barra de navegação embaixo do cabeçalho. */
.product-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0 0 16px;font:400 12.5px/1.4 'DM Sans',system-ui,sans-serif;color:#6e6255}
.product-crumbs a{display:inline-flex;align-items:center;min-height:32px;color:#6e6255;text-decoration:none}
.product-crumbs a:hover{color:#865437;text-decoration:underline;text-underline-offset:3px}
.product-crumbs [aria-hidden=true]{color:#2a201840}
.product-crumbs [aria-current=page]{display:inline-flex;align-items:center;min-height:32px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5f5448}
@media(max-width:699px){.product-crumbs{font-size:12px;margin-bottom:12px}}