/* ==========================================================================
   SP Labor · product.css — single product (carregado só em is_product())
   Fiel a referencia/spec-produto.md; tokens em base.css.
   ========================================================================== */

:root {
  /* Cores pontuais desta página (fora do kit — ver spec-produto.md) */
  --pvt-border: #EEEEEE;
  --pvt-zebra: #FBFBFB;
  --pvt-td-text: #6D6D6D;
  --pvt-qty-divider: #E2E2E2;
  --pvt-success: #4CAF50;
  --cta-divider: #97ADBC;
}

/* --------------------------------------------------------------------------
   Notices (alvo do AJAX do "Orçar")
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper {
  max-width: var(--container);
  margin: 10px auto auto;
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
  list-style: none;
  margin: 0 15px 10px;
  padding: 12px 16px;
  background: var(--c-bg-soft);
  border-left: 4px solid var(--c-green);
  font-size: var(--fs-body);
}

.woocommerce-notices-wrapper .woocommerce-error {
  border-left-color: var(--c-danger);
}

.woocommerce-notices-wrapper a.button {
  display: inline-block;
  margin-right: 12px;
  padding: 8px 18px;
  background: var(--c-green);
  color: var(--c-white);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Seção principal (cinza #F8F8F8, 2 colunas 50/50 sem gap)
   -------------------------------------------------------------------------- */
.product-hero {
  background: var(--c-bg-soft);
  padding: 56px 0 80px;
  overflow: hidden;
}

.product-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}

/* Anula o layout float do woocommerce.css (se carregado) */
.woocommerce div.product div.images.woocommerce-product-gallery {
  float: none;
  width: 100%;
  max-width: 525px;
  margin-bottom: 0;
}

.woocommerce div.product div.summary.product-hero__summary {
  float: none;
  width: 100%;
  max-width: 630px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Galeria (WooCommerce padrão: flexslider + zoom + PhotoSwipe)
   -------------------------------------------------------------------------- */
.product-hero__gallery .woocommerce-product-gallery {
  position: relative;
  max-width: 525px;
}

.woocommerce-product-gallery .flex-viewport:not(:last-child) {
  margin-bottom: 15px;
}

.woocommerce-product-gallery.images img {
  max-height: 570px;
  object-fit: contain;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image > a > img,
.woocommerce-product-gallery .woocommerce-product-gallery__image > a > picture > img {
  display: block;
  margin: 0 auto;
}

/* Botão da lupa (lightbox) — círculo branco no topo-direito */
.woocommerce-product-gallery__trigger {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--c-white);
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  font-size: 18px;
  text-decoration: none;
}

/* Thumbnails */
.woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 -7.5px;
  padding: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li {
  padding: 0 7.5px 15px;
  width: 16% !important;
  clear: none;
  float: none;
  cursor: pointer;
}

.woocommerce-product-gallery .flex-control-thumbs img {
  display: block;
  width: 100%;
  border: 2px solid var(--pvt-border);
  border-radius: var(--r-card);
}

/* --------------------------------------------------------------------------
   Coluna direita (espaçamento entre widgets: 5px)
   -------------------------------------------------------------------------- */
.product-hero__summary > * {
  margin-top: 0;
  margin-bottom: 5px;
}

/* H1 do produto */
.product-hero__summary .product_title {
  font-size: 18px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.4;
  margin: 0 0 5px;
}

/* Segurança: NUNCA exibir preço (venda por orçamento) */
.splabor-product .price,
.splabor-product .woocommerce-variation-price,
.splabor-product .woocommerce-Price-amount {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Barra CTA catálogos (azul, hover scale 1.01)
   -------------------------------------------------------------------------- */
.product-hero__summary .catalog-cta {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  min-height: 63px;
  background: var(--c-primary);
  border-radius: var(--r-md);
  padding: 9px;
  margin-bottom: 20px;
  transition: transform .3s;
}

.catalog-cta:hover {
  transform: scale(1.01);
}

.catalog-cta a {
  display: flex;
  align-items: center;
  color: var(--c-white);
}

.catalog-cta a:hover {
  color: var(--c-white);
}

.catalog-cta__main {
  flex: 1 1 100%;
  gap: 12px;
  border-radius: 7px 0 0 7px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}

.catalog-cta__main svg {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}

.catalog-cta__download {
  flex: 0 0 auto;
  border-left: 1px solid var(--cta-divider);
  border-radius: 0 7px 7px 0;
  padding: 0 50px;
}

.catalog-cta__download svg {
  width: 50px;
  height: auto;
}

/* --------------------------------------------------------------------------
   Tabela de variantes (plugin pvtfw) + botão "Orçar"
   -------------------------------------------------------------------------- */
.pvtfw-table-heading-continer h2 {
  margin: 0;
}

.pvtfw_variant_table_block table.variant {
  width: 100%;
  border: 1px solid var(--pvt-border);
  border-collapse: collapse;
  border-radius: var(--r-sm);
}

.pvtfw_variant_table_block table.variant th,
.pvtfw_variant_table_block table.variant td {
  border: 1px solid var(--pvt-border);
  padding: 10px;
  color: var(--pvt-td-text);
  text-align: left;
  vertical-align: middle;
}

.pvtfw_variant_table_block tbody tr:nth-child(odd) {
  background: var(--pvt-zebra);
}

.pvtfw_variant_table_block tbody tr:nth-child(even) {
  background: var(--c-white);
}

.pvtfw_variant_table_block td[data-title="modelo"] {
  width: 66%;
}

.pvtfw_variant_table_block td[data-title="Quantity"] {
  width: 19%;
}

.pvtfw_variant_table_block td[data-title="Action"] {
  width: 15%;
}

/* Quantidade: caixa cinza, botões verdes quadrados com barras pretas */
.pvt-qty-input {
  display: flex;
  align-items: stretch;
  max-width: 100px;
  max-height: 35px;
  border-radius: 4px;
  background: var(--pvt-border);
  overflow: hidden;
}

.pvt-qty-input .qty-count {
  flex: 0 1 40px;
  width: 40px;
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--c-green);
  color: transparent;
  font-size: 0;
  cursor: pointer;
}

.pvt-qty-input .qty-count--minus {
  border-right: 1px solid var(--pvt-qty-divider);
}

.pvt-qty-input .qty-count--add {
  border-left: 1px solid var(--pvt-qty-divider);
}

.pvt-qty-input .qty-count::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  margin: -1px 0 0 -5px;
  background: #000;
}

.pvt-qty-input .qty-count--add::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  margin: -1px 0 0 -5px;
  background: #000;
  transform: rotate(90deg);
}

.pvt-qty-input .pvtfw-quantity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.pvt-qty-input .qty {
  width: 100%;
  min-height: 35px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 700;
  -moz-appearance: textfield;
  appearance: textfield;
}

.pvt-qty-input .qty::-webkit-outer-spin-button,
.pvt-qty-input .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Botão Orçar: pílula verde */
.pvtfw_variant_table_cart_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 96px;
  min-height: 44px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-green);
  color: var(--c-white);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color .3s;
}

.pvtfw_variant_table_cart_btn:hover,
.pvtfw_variant_table_cart_btn:focus {
  background: var(--c-green-dark);
  color: var(--c-white);
}

.pvtfw_variant_table_cart_btn:disabled {
  cursor: default;
}

.success_pvtfw_btn:disabled {
  background: var(--pvt-success);
}

/* Spinner do Orçar (CSS puro — sem fontello) */
.pvtfw_variant_table_cart_btn .spinner-wrap {
  display: none;
}

.pvt-icon-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--c-white);
  border-radius: 50%;
  animation: pvt-rotate 1.5s linear infinite;
}

@keyframes pvt-rotate {
  to { transform: rotate(360deg); }
}

/* "Ver Lista Completa 🡻" (>5 variações) */
#verMais {
  display: block;
  margin: 10px auto;
  padding: 2px 15px;
  font-size: 16px;
  background: var(--c-primary);
  border: none;
  border-radius: var(--r-pill);
  color: var(--c-white);
  font-weight: 500;
  cursor: pointer;
}

.pvt-row-hidden {
  display: none;
}

.pvt-row-fade {
  animation: pvt-fade .45s ease;
}

@keyframes pvt-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Abas "Descrição" | "Informações Técnicas"
   -------------------------------------------------------------------------- */
.product-tabs {
  background: var(--c-bg);
  padding: 0 0 30px;
}

/* A régua de abas encosta na transição cinza→branco */
.product-tabs .splabor-tabs {
  margin-top: -40px;
  position: relative;
  z-index: 1;
}

.splabor-tabs__list {
  display: flex;
  gap: 10px;
}

.splabor-tab {
  padding: 16px 32px;
  border: 0;
  border-radius: 0;
  background: var(--c-border-3);
  color: var(--c-heading);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}

/* Hover azul; aba ativa fica no MESMO cinza (sem estado visual — fiel ao site) */
.splabor-tab:hover,
.splabor-tab:focus-visible {
  background: var(--c-primary);
  color: var(--c-white);
}

.splabor-tabpanel {
  padding-top: 24px;
}

.splabor-tabpanel > h2 {
  font-size: 20px;
  font-weight: 500;
  color: var(--c-text);
}

.splabor-tabpanel h3 {
  font-size: 18px;
}

.splabor-tabpanel ul {
  list-style: disc;
  padding-left: 24px;
  margin: 0 0 1em;
}

.splabor-tabpanel li {
  margin-bottom: 6px;
}

.splabor-tabpanel li p {
  margin: 0;
}

.splabor-tabpanel .decorated-link {
  color: var(--c-primary);
  text-decoration: underline;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .product-hero__grid {
    grid-template-columns: 1fr;
  }

  .product-hero__gallery .woocommerce-product-gallery,
  .woocommerce div.product div.images.woocommerce-product-gallery {
    margin: 0 auto 30px;
  }

  .woocommerce div.product div.summary.product-hero__summary {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .product-hero {
    padding: 40px 0 60px;
  }

  /* CTA: só o botão esquerdo */
  .catalog-cta__download {
    display: none;
  }

  .catalog-cta__main {
    border-radius: var(--r-md);
  }

  /* Tabela empilhada: modelo 100%, qty + Orçar 50/50 */
  .pvtfw_variant_table_block table.variant thead {
    display: none;
  }

  .pvtfw_variant_table_block table.variant,
  .pvtfw_variant_table_block table.variant tbody {
    display: block;
    border: 0;
  }

  .pvtfw_variant_table_block table.variant tbody tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid var(--pvt-border);
  }

  .pvtfw_variant_table_block td[data-title="modelo"] {
    display: block;
    width: 100%;
    line-height: 1.5em;
    border: 0;
  }

  .pvtfw_variant_table_block td[data-title="Quantity"],
  .pvtfw_variant_table_block td[data-title="Action"] {
    display: inline-block;
    width: 50%;
    text-align: center;
    vertical-align: middle;
    border: 0;
  }

  .pvtfw_variant_table_block td[data-title="Quantity"] .pvt-qty-input {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .pvt-qty-input .qty {
    width: 100%;
    text-align: center;
  }

  .pvtfw_variant_table_cart_btn {
    width: 100%;
  }

  /* Abas */
  .product-tabs .splabor-tabs {
    margin-top: 0;
  }

  .splabor-tabs__list {
    flex-wrap: wrap;
  }

  .splabor-tab {
    flex: 1 1 auto;
    padding: 14px 20px;
  }
}

/* Overrides finais sobre woocommerce.css e pvtfw_frontend.css. */
/* Galeria visível mesmo antes (ou sem) init do flexslider. */
.woocommerce-product-gallery { opacity: 1 !important; }

/* Orçar verde (o .button.alt do woocommerce.css pinta de roxo). */
button.pvtfw_variant_table_cart_btn.button.alt,
.woocommerce button.pvtfw_variant_table_cart_btn.button.alt {
  background-color: var(--c-green, #34AF23) !important;
  color: #fff !important;
}
button.pvtfw_variant_table_cart_btn.button.alt:hover,
.woocommerce button.pvtfw_variant_table_cart_btn.button.alt:hover {
  background-color: #2c9a1e !important;
}

/* Nome da variação em azul, como no original. */
.pvtfw_variant_table td:first-child,
.pvtfw_variant_table .pvtfw_variant_name {
  color: var(--c-secondary, #0084F0);
}

/* Larguras por posição (o data-title real varia no contexto do shortcode). */
.pvtfw_variant_table_block table.variant { table-layout: auto; }
.pvtfw_variant_table_block table.variant td:first-child { width: 66%; }
.pvtfw_variant_table_block table.variant td:nth-child(2) { width: 19%; white-space: nowrap; }
.pvtfw_variant_table_block table.variant td:last-child { width: 15%; }
.pvtfw_variant_table_block table.variant td { font-size: 13px; line-height: 1.5; }

/* O wrapper do plugin encolhe no conteúdo; força a largura da coluna toda. */
.pvtfw_init_variation_table,
.pvtfw_variant_table_block {
  display: block;
  width: 100% !important;
}
.pvtfw_variant_table_block table.variant { width: 100% !important; }

/* Força final: o width 48% + float do woocommerce.css não pode vencer. */
.woocommerce div.product div.summary.product-hero__summary,
div.product .product-hero__summary {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.woocommerce div.product div.images.woocommerce-product-gallery,
div.product .product-hero__gallery .images {
  float: none !important;
  width: 100% !important;
  max-width: 525px !important;
}
