/* ==========================================================================
   Loja Royal

   O tema pai pinta carrinho e filtros de vermelho puro, fora da paleta do
   site (preto, dourado, papel). Aqui a loja volta para a mesma linguagem das
   outras páginas: sem inventar componente novo, só realinhando cor e forma.
   ========================================================================== */

.rg-loja-cabecalho {
  background: var(--rg-charcoal);
  padding: 72px 0 64px;
  border-bottom: 3px solid var(--rg-gold);
  margin-bottom: 56px;
}
.rg-loja-cabecalho h1 {
  color: var(--rg-on-dark) !important;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 16px;
}
.rg-loja-cabecalho .rg-eyebrow { color: var(--rg-gold); }
.rg-loja-intro {
  color: var(--rg-on-dark-soft);
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 760px) {
  .rg-loja-cabecalho { padding: 48px 0 40px; margin-bottom: 36px; }
}

/* Marcador de foto ausente.

   O filtro `woocommerce_placeholder_img` nao e chamado: o REHub imprime a
   propria `noimage_500_500.png` direto no template. Por isso o marcador e
   feito no CSS, reconhecendo o arquivo pelo atributo — mesma linguagem da
   Garagem, sem banco de imagens nem arquivo externo. */
.woocommerce .product figure img[data-src*="noimage"],
.woocommerce .product figure img[src*="noimage"] { display: none !important; }

.woocommerce .product figure:has(img[data-src*="noimage"]) > a,
.woocommerce .product figure:has(img[src*="noimage"]) > a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--rg-charcoal);
  border-radius: 6px;
  text-decoration: none;
}
.woocommerce .product figure:has(img[data-src*="noimage"]) > a::before,
.woocommerce .product figure:has(img[src*="noimage"]) > a::before {
  content: "ROYAL";
  font-size: 14px; font-weight: 800; letter-spacing: 0.22em;
  color: var(--rg-on-dark);
}
.woocommerce .product figure:has(img[data-src*="noimage"]) > a::after,
.woocommerce .product figure:has(img[src*="noimage"]) > a::after {
  content: "fotografia em preparação";
  font-size: 11.5px; color: var(--rg-on-dark-soft);
}

/* Barra lateral da loja: os widgets herdados da demonstração saíram e o tema
   pai passou a imprimir "Nenhum widget de woocommerce adicionado" no lugar.
   A loja tem quatro produtos — não há o que filtrar. Coluna única. */
.woocommerce .rh-content-wrap > aside.sidebar,
.post-type-archive-product aside.sidebar,
.woocommerce-page aside.sidebar { display: none !important; }
.woocommerce .main-side,
.post-type-archive-product .main-side {
  width: 100% !important; max-width: 100% !important; float: none !important;
}

/* Lista de desejos e comparação de produtos são funções do tema pai que este
   site não usa: não há conta de cliente nem catálogo para comparar.
   Classes lidas do HTML servido: `.button_action` embrulha as duas. */
.woocommerce .product .button_action,
.woocommerce .product .heart_thumb_wrap,
.woocommerce .product .compare_for_grid { display: none !important; }

/* Botão de carrinho e preço.

   SELETORES LIDOS DO HTML SERVIDO, não supostos. A primeira versão desta regra
   mirou `.add_to_cart_button` e `ul.products li.product .price` — nomes do
   WooCommerce puro. O REHub usa os seus: `a.re_track_btn.woo_loop_btn` para o
   botão e `bdi` / `.woocommerce-Price-currencySymbol` para o valor. A regra
   antiga não pegou nada e o vermelho continuou (3,46:1 e 3,77:1, reprova AA).
   É o mesmo erro do rodapé, registrado na seção 96. */
.woocommerce a.re_track_btn.woo_loop_btn,
.woocommerce a.woo_loop_btn,
.woocommerce ul.products li.product a.button,
.woocommerce button.button.alt,
.woocommerce .button.wc-forward,
.woocommerce #respond input#submit {
  background: var(--rg-gold-dark) !important;
  background-color: var(--rg-gold-dark) !important;
  border-color: var(--rg-gold-dark) !important;
  color: #FFFFFF !important;
  min-height: 44px;
  font-weight: 700;
  box-shadow: none !important;
}
.woocommerce a.re_track_btn.woo_loop_btn:hover,
.woocommerce a.woo_loop_btn:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce button.button.alt:hover {
  background: var(--rg-ink) !important;
  background-color: var(--rg-ink) !important;
  border-color: var(--rg-ink) !important;
  color: #FFFFFF !important;
}

/* Preço na tinta do site. `bdi` e o símbolo herdam do pai, mas o tema pai
   pinta ambos direto — por isso os dois são nomeados. */
.woocommerce .price,
.woocommerce .price bdi,
.woocommerce .price .woocommerce-Price-amount,
.woocommerce .price .woocommerce-Price-currencySymbol,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price bdi,
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol,
.woocommerce div.product p.price,
.woocommerce div.product p.price bdi {
  color: var(--rg-ink) !important;
  font-weight: 800;
}



.woocommerce .products { margin-top: 0; }

/* Títulos de produto nos blocos do WooCommerce (carrinho, "você também pode
   gostar"). Vinham no dourado claro da cor principal do tema: 2,29:1 sobre
   branco, reprova em AA. O dourado fica no realce, não no texto. */
.wc-block-grid__product-title,
.wc-block-grid__product-title a,
.wc-block-components-product-name {
  color: var(--rg-ink) !important;
  font-weight: 700;
}
.wc-block-grid__product-title a:hover { color: var(--rg-gold-dark) !important; }

/* Grade de produtos: o tema pai fixa três colunas, então quatro produtos
   deixam duas células vazias na segunda linha — o mesmo defeito que a Garagem
   tinha. `auto-fit` ajusta o número de colunas ao que existe, hoje e quando o
   catálogo mudar, sem precisar reconfigurar nada. */
.woocommerce .products.grid_woo,
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 24px;
  float: none;
}
.woocommerce .products.grid_woo > .product,
.woocommerce ul.products > li.product {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

/* ==========================================================================
   Página de produto

   Nunca tinha sido revisada — só a grade da loja. Trazia comparação, o
   marcador de foto do tema pai e botões de rede social nas cores das
   plataformas, tudo fora da linguagem do site.
   ========================================================================== */

/* Comparação: o CSS anterior mirava só a grade (.product .button_action).
   Na página do produto o botão tem outro nome. */
.single-product .wpsm-button-new-compare,
.single-product .comparecompact,
.single-product .rh-compare-wrap,
.woocommerce div.product .compare_for_grid { display: none !important; }

/* Marcador de foto ausente na página do produto.

   SELETOR LIDO DO HTML SERVIDO. A primeira versão mirou
   `img[src*="woocommerce-placeholder"]` — nome do WooCommerce puro. O REHub usa
   o dele: `themes/rehub-theme/images/default/wooproductph.png`. A regra não
   pegou nada e o carrinho cinza continuou. Sétimo caso do mesmo erro. */
.woocommerce div.product img[src*="wooproductph"],
.woocommerce div.product img[src*="woocommerce-placeholder"] { display: none !important; }

.woocommerce div.product .images:has(img[src*="wooproductph"])::after,
.woocommerce div.product .woocommerce-product-gallery:has(img[src*="wooproductph"])::after {
  content: "ROYAL · fotografia em preparação";
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; width: 100%;
  background: var(--rg-charcoal); color: var(--rg-on-dark-soft);
  font-size: 13px; letter-spacing: 0.08em; border-radius: 6px;
}

/* Compartilhamento.

   Vinha nas cores das plataformas — azul do Facebook, preto do X, vermelho do
   Pinterest — quatro blocos saturados no meio de uma página preta e dourada.
   Classes reais: `.post_share .social_icon span[data-service]`. */
.post_share .social_icon span[data-service],
.post_share .social_icon .fb,
.post_share .social_icon span.share-link-image {
  background: transparent !important;
  color: var(--rg-muted) !important;
  border: 1px solid var(--rg-rule) !important;
  border-radius: 8px;
  min-width: 44px; min-height: 44px;
  display: inline-flex !important;
  align-items: center; justify-content: center;
}
.post_share .social_icon span[data-service]:hover {
  color: var(--rg-ink) !important;
  border-color: var(--rg-gold) !important;
}

/* Links do WooCommerce herdavam o dourado claro da cor principal do tema:
   2,13:1 sobre fundo claro, reprova em AA. Mesmo caso dos links da faixa
   legal, corrigido na rodada 10. */
.woocommerce .posted_in a,
.woocommerce .tagged_as a,
.woocommerce div.product .product_meta a,
.woocommerce .woocommerce-breadcrumb a,
.woocommerce-page .woocommerce-breadcrumb a {
  color: var(--rg-gold-dark) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Links de linha na loja com alvo de toque abaixo de 44px: o de categoria
   ("Categoria: Vestuário") e o da trilha de navegação.
   Como são links dentro de uma frase, o respiro vai por padding vertical —
   `inline-block` mantém a frase inteira. 14px de cada lado sobre ~16px de
   altura de linha fecha os 44px; a primeira tentativa usou 12px e parou em
   40, o que o teste pegou. */
.woocommerce div.product .product_meta a,
.woocommerce .woocommerce-breadcrumb a,
.woocommerce-page .woocommerce-breadcrumb a {
  display: inline-block;
  /* `!important` porque o tema pai fixa `padding: 4px` com especificidade
     maior — verificado no estilo computado: `display` passava, `padding` não,
     e o alvo ficava em 21px. */
  padding-block: 14px !important;
  line-height: 1.35 !important;
}