/* Loja Dani Modas: layout e componentes próprios da vitrine (sobre os tokens do design system) */
body.loja { font-size: var(--texto-lg); background: var(--neutro-25); }
.envoltorio { width: 100%; max-width: var(--largura-conteudo); margin: 0 auto; padding: 0 var(--esp-5); }
@media (max-width: 640px) { .envoltorio { padding: 0 var(--esp-4); } }

/* ---------- Faixa e topo ---------- */
.faixa { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--marca-800); color: var(--marca-200); font-size: var(--texto-xs); letter-spacing: var(--espaco-letras-caps); text-transform: uppercase; text-align: center; padding: 9px var(--esp-4); }
.faixa a { color: var(--marca-100); }
.topo { position: sticky; top: 0; z-index: var(--z-cabecalho); background: rgba(252, 250, 247, 0.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: var(--borda); }
.topo__linha { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--esp-4); height: 84px; }
.topo__marca { justify-self: center; display: block; }
.topo__marca img { height: 64px; width: auto; }
.topo__busca { justify-self: start; width: min(280px, 100%); }
.topo__busca .input { border-radius: var(--raio-pilula); background: var(--cor-superficie); border-color: var(--cor-borda-forte); }
.topo__acoes { justify-self: end; display: flex; gap: var(--esp-1); }
.btn-sacola { position: relative; }
.btn-sacola .contador-sacola {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--cor-primaria); color: var(--cor-sobre-primaria); font-size: 11px; font-weight: var(--peso-forte); display: grid; place-items: center; line-height: 1;
}
.btn-sacola.pulsou .contador-sacola { animation: pulso 400ms var(--curva); }
@keyframes pulso { 50% { transform: scale(1.35); } }
.menu-cat { display: flex; justify-content: center; gap: var(--esp-1); overflow-x: auto; scrollbar-width: none; padding: 0 var(--esp-4); }
.menu-cat::-webkit-scrollbar { display: none; }
.menu-cat a {
  position: relative; padding: 12px var(--esp-3); white-space: nowrap; text-decoration: none; color: var(--cor-texto-2);
  font-size: var(--texto-xs); font-weight: var(--peso-forte); letter-spacing: var(--espaco-letras-caps); text-transform: uppercase;
}
.menu-cat a:hover { color: var(--cor-texto); }
.menu-cat a[aria-current="page"] { color: var(--cor-primaria); }
.menu-cat a[aria-current="page"]::after { content: ''; position: absolute; left: var(--esp-3); right: var(--esp-3); bottom: 0; height: 2px; background: var(--cor-primaria); border-radius: 2px; }
@media (max-width: 760px) {
  .topo__linha { grid-template-columns: auto 1fr auto; height: 64px; }
  .topo__marca { grid-column: 1; grid-row: 1; justify-self: start; }
  .topo__marca img { height: 48px; }
  .topo__busca { grid-column: 2; justify-self: stretch; width: auto; }
  .menu-cat { justify-content: flex-start; }
}

/* ---------- Abertura ---------- */
.abertura { background: var(--marca-700); color: var(--marca-100); overflow: hidden; }
.abertura__grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: var(--esp-10); min-height: 420px; padding-block: var(--esp-12); }
.abertura .sobretitulo { color: var(--marca-300); }
.abertura h1 { color: #FFFAF4; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 350; line-height: 1.05; margin: var(--esp-3) 0 var(--esp-4); }
.abertura p { color: var(--marca-200); max-width: 46ch; font-size: var(--texto-lg); }
.abertura .grupo-btn { margin-top: var(--esp-8); }
.abertura .btn--claro { --btn-bg: var(--marca-100); --btn-cor: var(--marca-800); --btn-borda: var(--marca-100); }
.abertura .btn--claro:hover { --btn-bg: #fff; --btn-borda: #fff; }
.abertura .btn--contorno-claro { --btn-bg: transparent; --btn-cor: var(--marca-100); --btn-borda: rgba(242, 232, 222, 0.4); }
.abertura .btn--contorno-claro:hover { --btn-bg: rgba(242, 232, 222, 0.08); --btn-borda: var(--marca-100); color: #fff; }
.abertura__logo { justify-self: center; display: grid; place-items: center; width: min(340px, 80%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(242, 232, 222, 0.10), transparent 70%); }
.abertura__logo img { height: 260px; width: auto; }
@media (max-width: 760px) {
  .abertura__grade { grid-template-columns: 1fr; min-height: 0; padding-block: var(--esp-10) var(--esp-8); text-align: center; gap: var(--esp-6); }
  .abertura__logo { order: -1; width: 180px; }
  .abertura__logo img { height: 150px; }
  .abertura p { margin: 0 auto; }
  .abertura .grupo-btn { justify-content: center; margin-top: var(--esp-6); }
}
.como { border-bottom: var(--borda); background: var(--cor-superficie); }
.como ol { list-style: none; margin: 0 auto; padding-block: var(--esp-5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-4); counter-reset: passo; }
.como li { display: flex; align-items: center; gap: var(--esp-3); font-size: var(--texto-sm); color: var(--cor-texto-2); }
.como li strong { color: var(--cor-texto); display: block; font-size: var(--texto-md); }
.como .icone-circ { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--marca-100); color: var(--marca-700); flex-shrink: 0; }
@media (max-width: 760px) { .como ol { grid-template-columns: 1fr; gap: var(--esp-3); } }

/* ---------- Seções e grade de produtos ---------- */
.secao { padding: var(--esp-12) 0; }
.secao + .secao { padding-top: 0; }
.secao__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--esp-4); flex-wrap: wrap; margin-bottom: var(--esp-6); }
.secao__titulo { font-size: clamp(1.75rem, 3.2vw, 2.4rem); font-weight: 380; }
.secao__contagem { color: var(--cor-texto-2); font-size: var(--texto-sm); }
.grade-produtos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-8) var(--esp-5); }
@media (max-width: 1024px) { .grade-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grade-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6) var(--esp-3); } }

.card { position: relative; display: grid; gap: var(--esp-2); text-decoration: none; color: inherit; }
.card__foto { position: relative; aspect-ratio: 4 / 5; border-radius: var(--raio-md); overflow: hidden; background: var(--neutro-100); }
.card__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-lenta) ease, transform 700ms var(--curva); }
.card__foto .foto-2 { opacity: 0; }
@media (hover: hover) {
  .card:hover .foto-2 { opacity: 1; }
  .card:hover .card__foto img:first-of-type { transform: scale(1.03); }
}
.card__selos { position: absolute; top: var(--esp-2); left: var(--esp-2); display: flex; gap: var(--esp-1); z-index: 1; }
.card__selos .selo { background: rgba(252, 250, 247, 0.94); color: var(--cor-texto); box-shadow: var(--sombra-1); }
.card__selos .selo--promo { background: var(--marca-700); color: var(--cor-sobre-primaria); }
.card__nome { font-size: var(--texto-md); font-weight: var(--peso-medio); line-height: 1.35; }
.card:hover .card__nome { text-decoration: underline; text-underline-offset: 3px; }
.card__preco { display: flex; align-items: baseline; gap: var(--esp-2); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.card__preco strong { font-size: var(--texto-md); font-weight: var(--peso-forte); }
.card__preco s { color: var(--cor-texto-3); font-size: var(--texto-sm); }
.card--esgotado .card__foto img { filter: grayscale(0.4); opacity: 0.6; }
.card--esgotado .card__preco { color: var(--cor-texto-2); }
.sem-foto { display: grid; place-items: center; width: 100%; height: 100%; color: var(--neutro-400); }

/* Filtros da vitrine */
.barra-filtros { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; margin-bottom: var(--esp-6); }
.barra-filtros select.input { width: auto; border-radius: var(--raio-pilula); min-height: 40px; padding-left: 16px; font-size: var(--texto-sm); }
.barra-filtros__limpar { font-size: var(--texto-sm); }
.chips-tam { display: flex; gap: var(--esp-2); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.chips-tam::-webkit-scrollbar { display: none; }
.chip-tam { flex-shrink: 0; min-width: 44px; height: 40px; padding: 0 14px; display: inline-grid; place-items: center; border-radius: var(--raio-pilula); border: 1px solid var(--cor-borda-forte); color: var(--cor-texto); text-decoration: none; font-size: var(--texto-sm); font-weight: var(--peso-medio); background: var(--cor-superficie); transition: all var(--dur-rapida); }
.chip-tam:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.chip-tam[aria-current="true"] { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-sobre-primaria); }

/* ---------- Página do produto ---------- */
.trilha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: var(--esp-5) 0; font-size: var(--texto-sm); color: var(--cor-texto-2); list-style: none; margin: 0; }
.trilha a { color: var(--cor-texto-2); }
.trilha li + li::before { content: '/'; margin-right: 6px; color: var(--neutro-300); }
.produto { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--esp-12); align-items: start; padding-bottom: var(--esp-12); }
@media (max-width: 900px) { .produto { grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); } }
.galeria { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); position: sticky; top: 140px; }
.galeria--miniaturas { grid-template-columns: 76px minmax(0, 1fr); } /* coluna das miniaturas só com 2+ fotos */
.galeria__miniaturas { display: grid; gap: var(--esp-2); align-content: start; }
.galeria__miniatura { padding: 0; border: 2px solid transparent; border-radius: var(--raio-sm); overflow: hidden; aspect-ratio: 4 / 5; background: var(--neutro-100); cursor: pointer; }
.galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.galeria__miniatura[aria-current="true"] { border-color: var(--cor-primaria); }
.galeria__trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--raio-lg); background: var(--neutro-100); }
.galeria__trilho::-webkit-scrollbar { display: none; }
.galeria__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 5; }
.galeria__slide img { width: 100%; height: 100%; object-fit: cover; }
.galeria__pontos { display: none; }
@media (max-width: 900px) {
  .galeria { grid-template-columns: minmax(0, 1fr); position: static; margin: 0 calc(-1 * var(--esp-4)); }
  .galeria__miniaturas { display: none; }
  .galeria__trilho { border-radius: 0; }
  .galeria__pontos { display: flex; justify-content: center; gap: 6px; padding-top: var(--esp-3); }
  .galeria__pontos span { width: 6px; height: 6px; border-radius: 3px; background: var(--neutro-300); transition: all var(--dur-media); }
  .galeria__pontos span[data-atual] { width: 18px; background: var(--cor-primaria); }
}
.info { display: grid; gap: var(--esp-5); }
.info h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 380; line-height: 1.1; }
.preco-grande { display: flex; align-items: baseline; gap: var(--esp-3); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.preco-grande strong { font-size: var(--texto-2xl); font-weight: var(--peso-forte); }
.preco-grande s { color: var(--cor-texto-3); }
.opcoes-grupo { border: 0; padding: 0; margin: 0; display: grid; gap: var(--esp-3); }
.opcoes-grupo legend { padding: 0; margin-bottom: var(--esp-3); font-size: var(--texto-sm); color: var(--cor-texto-2); }
.opcoes-grupo legend strong { color: var(--cor-texto); }
.opcoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcao span {
  display: inline-grid; place-items: center; min-width: 52px; height: 46px; padding: 0 var(--esp-4); border-radius: var(--raio-md);
  border: 1px solid var(--cor-borda-controle); background: var(--cor-superficie); font-size: var(--texto-sm); font-weight: var(--peso-medio);
  transition: border-color var(--dur-rapida), background var(--dur-rapida), color var(--dur-rapida);
}
.opcao input:hover + span { border-color: var(--cor-primaria); }
.opcao input:checked + span { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.opcao input:focus-visible + span { box-shadow: var(--anel-foco); }
.opcao input:disabled + span { color: var(--neutro-400); background: var(--neutro-50); border-style: dashed; text-decoration: line-through; cursor: not-allowed; }
.opcao input:disabled { cursor: not-allowed; }
.aviso-estoque { font-size: var(--texto-sm); color: var(--aviso-fg); font-weight: var(--peso-medio); display: flex; align-items: center; gap: 6px; min-height: 1.4em; }
.comprar { display: grid; gap: var(--esp-3); }
.comprar__linha { display: flex; gap: var(--esp-3); align-items: stretch; }
.comprar__linha .contador { height: var(--controle-lg); }
.comprar__linha .btn { flex: 1; }
/* telas bem estreitas (320px): o texto do botão quebra em vez de empurrar a página */
.comprar .btn { white-space: normal; text-align: center; min-width: 0; }
.btn--whats { --btn-bg: #1E7A46; --btn-cor: #fff; --btn-borda: #1E7A46; }
.btn--whats:hover { --btn-bg: #186339; --btn-borda: #186339; color: #fff; }
.detalhes { border-top: var(--borda); }
.detalhes details { border-bottom: var(--borda); }
.detalhes summary { display: flex; justify-content: space-between; align-items: center; padding: var(--esp-4) 0; cursor: pointer; font-weight: var(--peso-forte); list-style: none; font-size: var(--texto-md); }
.detalhes summary::-webkit-details-marker { display: none; }
.detalhes summary .icone { transition: transform var(--dur-media) var(--curva); }
.detalhes details[open] summary .icone { transform: rotate(180deg); }
.detalhes .conteudo-det { padding: 0 0 var(--esp-5); color: var(--cor-texto-2); white-space: pre-line; font-size: var(--texto-md); }
.barra-compra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-fixo); display: none; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4) calc(var(--esp-3) + env(safe-area-inset-bottom)); background: rgba(252, 250, 247, 0.96); backdrop-filter: blur(10px);
  border-top: var(--borda); box-shadow: 0 -8px 24px rgba(51, 38, 31, 0.08); transform: translateY(110%); transition: transform var(--dur-lenta) var(--curva);
}
.barra-compra[data-visivel] { transform: none; }
.barra-compra .btn { flex: 1; }
@media (max-width: 900px) { .barra-compra { display: flex; } body.com-barra-compra { padding-bottom: 84px; } }

/* ---------- Sacola ---------- */
.sacola-grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--esp-8); align-items: start; padding-bottom: var(--esp-12); }
@media (max-width: 900px) { .sacola-grade { grid-template-columns: 1fr; } }
.itens { list-style: none; margin: 0; padding: 0; }
.item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--esp-4); padding: var(--esp-5) 0; border-bottom: var(--borda); }
.item:first-child { padding-top: 0; }
.item__foto { display: block; aspect-ratio: 4 / 5; border-radius: var(--raio-md); overflow: hidden; background: var(--neutro-100); }
.item__foto img { width: 100%; height: 100%; object-fit: cover; }
.item__info { display: grid; gap: 4px; align-content: start; }
.item__nome { color: var(--cor-texto); font-weight: var(--peso-medio); text-decoration: none; }
.item__nome:hover { text-decoration: underline; }
.item__linha { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); margin-top: var(--esp-2); flex-wrap: wrap; }
.item__aviso { font-size: var(--texto-xs); color: var(--aviso-fg); font-weight: var(--peso-medio); }
.resumo { position: sticky; top: 140px; }
.resumo__total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--esp-4) 0; border-bottom: var(--borda); margin-bottom: var(--esp-2); }
.resumo__total strong { font-size: var(--texto-2xl); font-variant-numeric: tabular-nums; }
.confirmacao-pedido { text-align: center; display: grid; justify-items: center; gap: var(--esp-4); padding: var(--esp-12) var(--esp-4); }
.confirmacao-pedido .vazio__icone { width: 72px; height: 72px; background: var(--sucesso-bg); color: var(--sucesso-solido); }

/* ---------- Rodapé ---------- */
.rodape { background: var(--marca-800); color: var(--marca-200); margin-top: var(--esp-16); }
.rodape__grade { display: grid; grid-template-columns: auto 1fr 1fr; gap: var(--esp-10); padding: var(--esp-12) 0 var(--esp-8); align-items: start; }
.rodape__grade img { height: 110px; width: auto; }
.rodape h2 { font-family: var(--fonte-texto); font-size: var(--texto-xs); letter-spacing: var(--espaco-letras-caps); text-transform: uppercase; color: var(--marca-300); margin-bottom: var(--esp-3); font-weight: var(--peso-forte); }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.rodape a { color: var(--marca-100); text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape p { color: var(--marca-200); font-size: var(--texto-sm); }
.rodape__base { border-top: 1px solid rgba(242, 232, 222, 0.12); padding: var(--esp-5) 0; font-size: var(--texto-xs); color: var(--marca-300); }
@media (max-width: 760px) { .rodape__grade { grid-template-columns: 1fr 1fr; } .rodape__grade > :first-child { grid-column: 1 / -1; } .rodape__grade img { height: 80px; } }