/* Pagina de produto. Tudo escopado em .xara-produto; o markup do Journal 2
   que sobrevive (opcoes, abas, wishlist-compare, Compre Junto, simulador de
   frete) e restilizado pelas classes que ja tem. */
.xara-produto { background: var(--xara-surface); color: var(--xara-ink); padding: 16px 0 48px; }
/* Escopado em .xara-produto: category.tpl e search.tpl tambem usam a classe
   ".xara-migalhas" (num <ul class="breadcrumb xara-migalhas">) e sao
   estilizados por ".xara-listagem .xara-migalhas" em categoria.css — sem o
   escopo, estas regras (mais especificas por vir depois no load) venciam la
   e pintavam os dois links de --xara-ink em vez de --xara-sage/inherit. */
.xara-produto .xara-migalhas { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8rem; margin-bottom: 16px; }
.xara-produto .xara-migalhas a { color: var(--xara-sage); text-decoration: none; }
.xara-produto .xara-migalhas a:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--xara-border); }
.xara-produto .xara-migalhas a:last-child { color: var(--xara-ink); }

.xara-produto__grade { display: grid; grid-template-columns: 1fr; gap: 24px; }
.xara-produto__foto {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--xara-raio); background: var(--xara-surface-panel);
  border: 1px solid var(--xara-border);
}
.xara-produto__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xara-produto__foto--vazia { background: var(--xara-sage-tint); }
.xara-produto__miniaturas { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.xara-produto__miniatura {
  flex: none; width: 64px; height: 64px; padding: 0; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; background: var(--xara-surface-panel); cursor: pointer;
}
.xara-produto__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xara-produto__miniatura.is-ativa { border-color: var(--xara-accent); }
.xara-produto__miniatura:focus-visible { outline: 3px solid var(--xara-gold); outline-offset: 2px; }

.xara-produto__nome { font-size: clamp(1.5rem, 5vw, 2.4rem); margin-top: 6px; }
.xara-produto__preco { margin: 12px 0 18px; font-family: var(--xara-fonte-display); font-size: 1.6rem; font-weight: 600; }
.xara-produto__preco s { opacity: .5; font-size: 1.1rem; margin-right: 8px; }
.xara-produto__preco span { display: block; font-family: var(--xara-fonte-corpo); font-size: .78rem; font-weight: 400; opacity: .65; }

/* --- opcoes (markup do Journal 2 dentro de #product) --- */
.xara-produto .options h3 { display: none; }
/* O Journal 2 pinta de branco os filhos diretos de .product-options; aqui o fundo e o da pagina. */
.xara-produto .product-options > div,
.xara-produto .product-options > ul { background-color: transparent; }
.xara-produto .option { margin-bottom: 14px; }
.xara-produto .option .control-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.xara-produto .option .control-label::after { content: ""; }
/* O Journal 2 ja poe um "*" via ::before (.oc2 .required label::before); fica so o nosso. */
.xara-produto .option.required .control-label::before { content: none; }
.xara-produto .option.required .control-label::after { content: " *"; color: var(--xara-accent-texto); }
.xara-produto #product select,
.xara-produto #product input[type="text"] {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--xara-border); border-radius: 12px;
  background: var(--xara-surface-panel); color: var(--xara-ink);
  font-family: var(--xara-fonte-corpo); font-size: 1rem;
}
.xara-produto #product select:focus-visible,
.xara-produto #product input:focus-visible { outline: 3px solid var(--xara-gold); outline-offset: 2px; }
/* Os seletores levam #product para vencer a regra generica de #product input acima. */
.xara-produto #product .input-group.date { display: flex; }
.xara-produto #product .input-group.date .input-group-btn { display: flex; }
.xara-produto #product .input-group.date .btn {
  min-width: var(--xara-toque); min-height: 48px; height: auto; margin: 0; padding: 0 12px; border: 1px solid var(--xara-border); border-left: 0;
  border-radius: 0 12px 12px 0; background: var(--xara-sage-tint); color: var(--xara-ink); box-shadow: none;
}
.xara-produto #product .input-group.date input { border-radius: 12px 0 0 12px; }
.xara-produto .text-danger { color: var(--xara-accent-texto); font-size: .85rem; margin-top: 4px; display: block; }

.xara-produto__aviso-corte { font-size: .88rem; color: var(--xara-gold-escuro); font-weight: 600; margin: 0 0 14px; }
.xara-produto__aviso-horario { font-size: .82rem; line-height: 1.5; color: var(--xara-ink); background: var(--xara-sage-tint); border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; }
.xara-produto__sem-horario { color: var(--xara-accent-texto); font-weight: 600; font-size: .9rem; margin: 0 0 14px; }

.xara-produto__acao { display: flex; gap: 12px; align-items: stretch; margin-top: 6px; }
.xara-produto__qtd { display: flex; flex-direction: column; font-size: .75rem; font-weight: 600; }
/* Leva #product para vencer a regra generica de #product input[type=text] acima (que poe width: 100%). */
.xara-produto #product .xara-produto__qtd input { width: 72px; min-height: var(--xara-toque); padding: 10px 8px; text-align: center; border: 1px solid var(--xara-border); border-radius: 12px; background: var(--xara-surface-panel); font-size: 1rem; }
.xara-produto__botao { flex: 1; align-self: flex-end; min-height: 52px; font-size: 1rem; }
.xara-produto__botao[disabled] { background: var(--xara-sage); cursor: not-allowed; transform: none; }
.xara-produto__minimo { font-size: .8rem; color: var(--xara-gold-escuro); margin-top: 8px; }
.xara-produto .wishlist-compare .links { display: none; }

/* --- simulador de frete (mod 23), injetado dentro do .wishlist-compare ---
   Markup real do modulo: #box-estimate-tax (com borda e padding inline, que
   ficam), form[name=frmCalculaFrete], #postcode, #estimate_tax, #results-taxes
   e, apos a consulta, #button-shipping. */
.xara-produto #box-estimate-tax { margin-top: 20px; font-size: .9rem; }
.xara-produto #box-estimate-tax .col-md-12 { padding: 0; float: none; width: auto; }
.xara-produto #box-estimate-tax .form-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.xara-produto #box-estimate-tax .form-group > div { float: none; width: auto; padding: 0; }
.xara-produto #box-estimate-tax .form-group > div:first-child { flex: 1 1 160px; }
.xara-produto #box-estimate-tax .form-group > div:last-child { flex: 0 0 auto; }
.xara-produto #box-estimate-tax input[type="text"] {
  width: 100%; min-height: var(--xara-toque); padding: 8px 12px;
  border: 1px solid var(--xara-border); border-radius: 12px;
  background: var(--xara-surface-panel); color: var(--xara-ink); font-size: 1rem;
}
.xara-produto #box-estimate-tax input[type="button"] {
  min-height: var(--xara-toque); border-radius: var(--xara-raio-pill); border: 0; padding: 8px 18px;
  background: var(--xara-surface-dark); color: var(--xara-ink-on-dark); font-weight: 600; cursor: pointer;
}
.xara-produto #box-estimate-tax input[type="button"][disabled] { opacity: .5; cursor: not-allowed; }
.xara-produto #box-estimate-tax input:focus-visible { outline: 3px solid var(--xara-gold); outline-offset: 2px; }
.xara-produto #results-taxes { margin-top: 12px; }
.xara-produto #results-taxes .panel { border: 1px solid var(--xara-border); border-radius: 12px; box-shadow: none; margin-bottom: 10px; }
.xara-produto #results-taxes .panel-heading { background: var(--xara-sage-tint); color: var(--xara-ink); border-radius: 12px 12px 0 0; }
.xara-produto #results-taxes .row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.xara-produto #results-taxes .row > div { float: none; width: auto; padding: 0; }
.xara-produto #results-taxes .row > div:first-child { flex: 1; }
.xara-produto #results-taxes input[type="radio"] { width: 20px; height: 20px; margin: 0 6px 0 0; vertical-align: middle; }

/* --- abas (markup do Journal 2) --- */
.xara-produto__abas { margin-top: 40px; }
.xara-produto #tabs { display: flex; flex-wrap: nowrap; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; border: 0; overflow-x: auto; }
/* Ate 760px o Journal 2 estica os <li> (min-width: 50%, flex: 1 0 auto, width: 100%); aqui sao pilulas. */
/* O clearfix do .nav (::before/::after) viraria item flex e sobraria rolagem. */
.xara-produto #tabs::before,
.xara-produto #tabs::after { content: none; }
.xara-produto #tabs li { display: flex; flex: none; float: none; width: auto; min-width: 0; height: auto; margin: 0; padding: 0; overflow: visible; }
.xara-produto #tabs li a {
  display: inline-flex; align-items: center; box-sizing: border-box; width: auto; float: none; min-height: var(--xara-toque); line-height: 1.2; padding: 8px 18px; box-shadow: none;
  border: 1px solid var(--xara-border); border-radius: var(--xara-raio-pill);
  color: var(--xara-ink); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; background: var(--xara-surface-panel);
}
.xara-produto #tabs li.active a { background: var(--xara-surface-dark); color: var(--xara-ink-on-dark); border-color: var(--xara-surface-dark); }
.xara-produto .tabs-content { background: var(--xara-surface-panel); border: 1px solid var(--xara-border); border-radius: var(--xara-raio); padding: 20px; line-height: 1.6; }
.xara-produto .tab-pane { display: none; }
.xara-produto .tab-pane.active { display: block; }
.xara-produto__abas > .tabs-content > .tab-pane { background: transparent; border: 0; padding: 0; }
/* Ha descricoes cadastradas com o markup das abas colado dentro (ex.: Bouquet Amore Mio);
   o que vier aninhado nao ganha caixa nem some. */
.xara-produto .tab-pane .tabs-content,
.xara-produto .tab-pane .tab-pane { display: block; background: transparent; border: 0; padding: 0; margin: 0; }
.xara-produto .tab-pane img { max-width: 100%; height: auto; }

/* --- Compre Junto (mod 70), injetado antes das abas ---
   Markup real do modulo: #compre_junto.panel > .panel-body > .joseanmatias_compre_junto. */
.xara-produto #compre_junto { margin: 32px 0 0; border: 1px solid var(--xara-border); border-radius: var(--xara-raio); box-shadow: none; overflow: hidden; }
.xara-produto #compre_junto .panel-heading { background: var(--xara-surface-dark); color: var(--xara-ink-on-dark); }
.xara-produto #compre_junto .panel-body { padding: 16px; }
.xara-produto #compre_junto select { min-height: var(--xara-toque); border: 1px solid var(--xara-border); border-radius: 12px; padding: 8px 12px; }
.xara-produto #compre_junto .btn { min-height: var(--xara-toque); border-radius: var(--xara-raio-pill); }

.xara-produto__relacionados { margin-top: 48px; }

/* --- botao fixo no celular --- */
.xara-comprar-fixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--xara-gutter); background: var(--xara-surface-dark); color: var(--xara-ink-on-dark);
  box-shadow: 0 -8px 24px rgba(22, 36, 28, .25);
}
.xara-comprar-fixo[hidden] { display: none; }
.xara-comprar-fixo__preco { font-family: var(--xara-fonte-display); font-weight: 600; font-size: 1.2rem; }

/* O tema base do Journal 2 da a mesma z-index:10 pro .extended-container
   (journal.css) e pro <footer> (footer.css) — os dois ficam de proposito no
   mesmo "andar", acima do fundo decorativo do cabecalho (z-index -1/0) mas
   sem competir com nada. So que, como o <footer> vem depois no DOM, o empate
   e desfeito a favor dele: ele pinta por cima de QUALQUER coisa dentro do
   .extended-container, inclusive um elemento fixed com z-index maior (como
   a nossa barra, z-index:50 - esse valor so vale dentro do proprio contexto
   de empilhamento do container, nao escapa pra competir com o do rodape).
   Na pagina de produto, a distancia entre o fim do bloco de compra e o
   inicio do rodape e menor que a tela em celulares, entao o rodape sempre
   fica visivel junto com a barra fixa assim que ela aparece. Resolvemos
   subindo o .extended-container pra 11 so nesta rota — 1 acima do rodape,
   sem tirar o rodape do lugar dele nem mudar as outras paginas. */
html.route-product-product .extended-container { z-index: 11; }

@media (min-width: 980px) {
  .xara-produto { padding: 24px 0 88px; }
  .xara-produto__grade { grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
  .xara-produto__compra { position: sticky; top: 24px; background: var(--xara-surface-panel); border: 1px solid var(--xara-border); border-radius: var(--xara-raio); padding: 28px; }
  .xara-produto__abas { margin-top: 64px; }
  .xara-comprar-fixo { display: none; }
}