/*
Theme Name:   Fio de Prata
Theme URI:    https://fiodeprata.com
Description:  Tema exclusivo da fiodeprata.com
Author:       Fio de Prata
Template:     kadence
Version:      1.0.0
Text Domain:  fiodeprata
*/

/* ────────────────────────────────────────
   Paleta Fio de Prata — monocromática
   Preto sobre branco. O vermelho-forja existe
   APENAS para estados de hover.
   Toda cor nova DEVE usar um destes tokens.
───────────────────────────────────────── */
:root {
  /* Tinta */
  --fdp-preto:     #131313;
  --fdp-carvao:    #1e1e1e;
  --fdp-texto:     #1b1b1b;   /* corpo de texto */
  --fdp-suave:     #6f6f6f;   /* texto secundário / placeholders */
  /* Papel */
  --fdp-branco:    #ffffff;
  --fdp-cinza:     #f7f7f7;   /* único fundo claro alternativo */
  --fdp-linha:     #e4e4e4;   /* filetes, bordas, divisores */
  /* Acento — somente hover */
  --fdp-ouro:      #c0281e;
  --fdp-ouro-claro:#d63b2f;
  /* Legado: era o verde funcional; agora aponta para a tinta */
  --fdp-verde:     #131313;
  /* Tipografia */
  --fdp-fonte:     'Cinzel', serif;
  --fdp-titulo:    'DM Serif Display', serif;   /* em teste: título de produto */
  --fdp-corpo:     'Lato', sans-serif;
}

/* ────────────────────────────────────────
   Base tipográfica — estanca a fonte padrão
   do Kadence em inputs, selects e notices
───────────────────────────────────────── */
body {
  font-family: var(--fdp-corpo);
  color: var(--fdp-texto);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fdp-fonte);
  color: var(--fdp-preto);
}
button, input, select, textarea {
  font-family: var(--fdp-corpo);
}

/* ────────────────────────────────────────
   Imagens de produto — forçar quadrado
   (Kadence cuida do grid; só forçamos 1:1)
───────────────────────────────────────── */

/* Loop da loja, categorias, relacionados */
.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ────────────────────────────────────────
   Galeria do produto único
   Layout: imagem principal + strip de thumbnails
───────────────────────────────────────── */

/* Container da galeria */
.woocommerce-product-gallery {
  position: sticky;
  top: 100px;
}

/* Wrapper: coluna flexível */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Imagem principal — full-width, quadrada */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child {
  width: 100%;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

/* Thumbnails — strip horizontal */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) {
  display: inline-block;
  width: calc(25% - 6px);
  float: left;
  margin: 0 8px 0 0;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child):hover img {
  opacity: 1;
}

/* Limpa o float dos thumbnails */
.woocommerce-product-gallery__wrapper::after {
  content: '';
  display: table;
  clear: both;
}

/* Thumbnails nativos do Flexslider (quando inicializado) */
.flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px !important;
  padding: 0 !important;
  list-style: none;
}
.flex-control-thumbs li { margin: 0 !important; }
.flex-control-thumbs li img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  display: block;
  border-radius: 2px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.flex-control-thumbs li img:hover,
.flex-control-thumbs li img.flex-active {
  opacity: 1;
  outline: 2px solid var(--fdp-ouro);
  outline-offset: -2px;
}

/* Mobile: galeria sem sticky */
@media (max-width: 768px) {
  .woocommerce-product-gallery { position: static; }
  .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) {
    width: calc(33.33% - 6px);
  }
}