/* Product list card – 1:1 do snippet fornecido */

/* Importante: aplicar o grid apenas no UL de produtos,
   para não afetar <section class="related products"> */
ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  grid-auto-flow: dense;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Remove clearfix nativo do Woo para evitar células vazias no grid */
ul.products::before,
ul.products::after {
  content: none !important;
  display: none !important;
}

ul.products .product.item-container { 
  list-style: none; 
  width: 100% !important; 
  margin: 0 !important; 
  display: block;
  break-inside: avoid;
}

/* Card */
ul.products .product.item-container .item { position: relative; background-color: transparent; box-shadow: 0 4px 8px rgba(0,0,0,0.1); overflow: hidden; }

/* Badge flutuante */
ul.products .product.item-container .labels-floating { position: absolute; top: -3px; left: 0; z-index: 98; }
ul.products .product.item-container .label { padding: 5px 10px; font-size: 11px; text-transform: uppercase; color: #fff; box-shadow: 1px 1px 2px rgba(50,50,50,.3); border-radius: .25em; }
ul.products .product.item-container .label-primary { background: #fd64c4; }
ul.products .product.item-container .label-circle { width: 60px; height: 60px; border-radius: 30px; display: flex; align-items: center; justify-content: center; }
ul.products .product.item-container .label-overlap { margin-top: -5px; }

/* Imagem com overlay */
ul.products .product.item-container .item-image-container { position: relative; padding-bottom: 0; }
ul.products .product.item-container .item-image-container img { position: static !important; left: auto; transform: none; height: auto; width: 100%; display: block; }
ul.products .product.item-container .placeholder-overlay { display: none !important; }
ul.products .product.item-container .item-image-container a { position: static; display: block; }
ul.products .product.item-container .item-overlay { position:absolute; inset:0; background:#fd64c4; opacity:0; transition:opacity .15s ease-in-out; pointer-events:none; }
ul.products .product.item-container .item:hover .item-overlay { opacity:.6; }

/* Área de info */
ul.products .product.item-container .item-info-container { position: relative; background: #f7f7f7; z-index: 2; margin-top: -22px; padding-top: 8px; }
ul.products .product.item-container .item-info { position: relative; padding: 4px 10px 12px; text-align: center; z-index: 2; }

/* Divisor inclinado aplicado sobre a IMAGEM: 
   - parte esquerda preenchida com o cinza do card (#f7f7f7)
   - parte direita transparente (deixa a imagem aparecer)
   - linha rosa fina acompanhando a inclinação */
ul.products .product.item-container .item-image-container::before,
ul.products .product.item-container .item-image-container::after { content: none; }

/* Divisor inclinando sobre o bloco de informações (com overflow hidden no card) */
ul.products .product.item-container .item-info::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 0;
  width: 100%;
  height: 28px;
  background: #f7f7f7;
  -webkit-clip-path: polygon(0 0, 100% 24%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 24%, 100% 100%, 0% 100%);
  z-index: 1;
}
ul.products .product.item-container .item-info::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 6px;
  background: #f7f7f7;
  -webkit-clip-path: polygon(58% 100%, 100% 32%, 100% 100%, 58% 100%);
  clip-path: polygon(58% 100%, 100% 32%, 100% 100%, 58% 100%);
  z-index: 2;
}

/* Título */
ul.products .product.item-container .item-name { margin: 0 0 5px 0; font-size: 12px; line-height: 1.35; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-family: "Montserrat", Arial, sans-serif; color:#36393d; max-width: 95%; margin-left: auto; margin-right: auto; }
ul.products .product.item-container .item-info a { color: #626467; text-decoration: none; }
ul.products .product.item-container .item-info a:hover { color:#fd64c4; text-decoration: none; box-shadow:none; }

/* Preço */
ul.products .product.item-container .item-price { margin: 3px 0; font-size: 18px; letter-spacing: 2px; font-family: "Montserrat", Arial, sans-serif; }
ul.products .product.item-container .item-price-container .price { margin: 3px 0; font-size: 18px; letter-spacing: 2px; font-family: "Montserrat", Arial, sans-serif; color:#626467; }
ul.products .product.item-container .item-info a:hover .item-name,
ul.products .product.item-container .item-info a:hover .price,
ul.products .product.item-container .item-info a:hover .price ins,
ul.products .product.item-container .item-info a:hover .price .amount { color:#fd64c4; }
ul.products .product.item-container .price del { color: rgba(54,57,61,.6); margin-right:8px; }
ul.products .product.item-container .price ins { text-decoration: none; }

/* Botão COMPRAR */
ul.products .product.item-container .btn { position: relative; height: 50px; padding: 14px 20px; border-radius: 4px; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; outline: 0; display:block; width:100%; }
ul.products .product.item-container .btn-primary { color:#fff !important; fill:#fff; border:none; border-bottom:4px solid #fc32b1; background: linear-gradient(to bottom, rgba(253,100,196,.7) 0%, rgba(253,100,196,.9) 100%); }
ul.products .product.item-container .btn-primary:hover { background: linear-gradient(to bottom, rgba(253,100,196,.8) 0%, #fd64c4 100%); color:#fff !important; border:none; border-bottom:0; }
ul.products .product.item-container .btn-small { height: 35px; padding: 0 8px; font-size: 12px; line-height: 30px; }

/* Woo button normal adaptado */
ul.products .product.item-container .add_to_cart_button { display:block; width:100%; }
ul.products .product.item-container .button.btn { line-height: 30px; }

/* Botão Quick View - garante que herda todos os estilos do botão primário */
ul.products .product.item-container .quick-view-button {
  cursor: pointer;
  text-align: center;
}

ul.products .product.item-container .quick-view-button:hover {
  text-decoration: none;
}

/* Garante que o botão quick-view tenha os mesmos estilos que btn e btn-primary */
ul.products .product.item-container a.quick-view-button {
  display: block;
  width: 100%;
}

@media (max-width: 767px) {
  ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  ul.products .product.item-container .item-name { font-size: 12px; }
  ul.products .product.item-container .item-info::before { top: -22px; height: 22px; -webkit-clip-path: polygon(0 0, 100% 26%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 26%, 100% 100%, 0% 100%); }
  ul.products .product.item-container .item-info::after { top: -4px; height: 5px; -webkit-clip-path: polygon(60% 100%, 100% 38%, 100% 100%, 60% 100%); clip-path: polygon(60% 100%, 100% 38%, 100% 100%, 60% 100%); }
}

/* ============================================================================
   PÁGINA DE PRODUTO INDIVIDUAL (SINGLE PRODUCT)
   ============================================================================
   Garante que a área do produto principal não seja invadida pelos relacionados
   ============================================================================ */

/* Container principal do produto */
.single-product .product,
.single-product div.product {
  clear: both !important;
  margin-bottom: 60px !important;
  overflow: hidden !important;
}

/* Resumo do produto (área de compra) */
.single-product .summary.entry-summary {
  margin-bottom: 40px !important;
}

/* Tabs do produto (descrição, informações adicionais, etc) */
.single-product .woocommerce-tabs {
  clear: both !important;
  margin-bottom: 60px !important;
}


/* ============================================================================
   PRODUTOS RELACIONADOS / SIMILARES
   ============================================================================
   Aplica o MESMO grid responsivo dos cards da listagem principal para manter
   a leitura horizontal em qualquer seção.
   ============================================================================ */

/* Espaçamento e contenção da seção de produtos relacionados */
.related.products,
.upsells.products,
section.related,
section.upsells {
  clear: both !important;
  margin-top: 60px !important;
  margin-bottom: 40px !important;
  padding: 30px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important; /* permite cards saírem levemente */
  position: relative !important;
  float: none !important;
}

/* Título da seção - estilo IGUAL ao breadcrumb */
.related.products h2,
.upsells.products h2,
section.related h2,
section.upsells h2 {
  margin: 0 0 30px 0 !important;
  padding: 15px 0 !important;
  clear: both !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #36393d !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  border-bottom: 2px solid #fd64c4 !important;
  background: transparent !important;
}

/* ============================================
   GRID RESPONSIVO - idêntico ao ul.products principal
   ============================================ */

.related.products ul.products,
.upsells.products ul.products,
section.related ul.products,
section.upsells ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px !important;
  width: 100% !important;
  clear: both !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Evita que pseudo-elementos de clearfix virem itens da grid */
.related.products ul.products::before,
.related.products ul.products::after,
.upsells.products ul.products::before,
.upsells.products ul.products::after,
section.related ul.products::before,
section.related ul.products::after,
section.upsells ul.products::before,
section.upsells ul.products::after {
  content: none !important;
  display: none !important;
}

/* ============================================
   CARDS - Herdam TODOS os estilos do grid principal
   ============================================ */

/* Reset de floats/width padrão do Woo para os relacionados */
.related.products ul.products li.product,
.upsells.products ul.products li.product,
section.related ul.products li.product,
section.upsells ul.products li.product {
  /* MESMO comportamento do grid principal */
  float: none !important;
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  break-inside: avoid !important; /* evita quebra do card entre colunas */
  box-sizing: border-box !important;
  list-style: none !important;
}

/* Garante que cards relacionados herdem TODOS os estilos do .item-container */
.related.products ul.products .product.item-container .item,
.upsells.products ul.products .product.item-container .item,
section.related ul.products .product.item-container .item,
section.upsells ul.products .product.item-container .item {
  /* Herda box-shadow, overflow, background do .item */
}

/* Garante herança do divisor diagonal */
.related.products ul.products .product.item-container .item-info::before,
.related.products ul.products .product.item-container .item-info::after,
.upsells.products ul.products .product.item-container .item-info::before,
.upsells.products ul.products .product.item-container .item-info::after,
section.related ul.products .product.item-container .item-info::before,
section.related ul.products .product.item-container .item-info::after,
section.upsells ul.products .product.item-container .item-info::before,
section.upsells ul.products .product.item-container .item-info::after {
  /* Herda do .item-info::before e ::after */
}

/* Garante herança do overlay rosa no hover */
.related.products ul.products .product.item-container .item:hover .item-overlay,
.upsells.products ul.products .product.item-container .item:hover .item-overlay,
section.related ul.products .product.item-container .item:hover .item-overlay,
section.upsells ul.products .product.item-container .item:hover .item-overlay {
  /* Herda opacity: 0.6 */
}

/* ============================================
   RESPONSIVE - 3 colunas tablet, 2 mobile
   ============================================ */

@media (max-width: 992px) {
  .related.products ul.products,
  .upsells.products ul.products,
  section.related ul.products,
  section.upsells ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .related.products,
  .upsells.products,
  section.related,
  section.upsells {
    margin-top: 40px !important;
    padding: 20px 0 !important;
  }
  
  .related.products h2,
  .upsells.products h2,
  section.related h2,
  section.upsells h2 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin-bottom: 20px !important;
  }
  
  .related.products ul.products,
  .upsells.products ul.products,
  section.related ul.products,
  section.upsells ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }
  
  .related.products ul.products li.product,
  .upsells.products ul.products li.product,
  section.related ul.products li.product,
  section.upsells ul.products li.product {
    margin: 0 !important;
  }
}

/* ============================================
   PRICE - Single Product custom display
   ============================================ */
.single-product .product-price-container { margin-bottom: 10px; clear: both; }
.single-product .m-bottom-quarter { margin-bottom: 5px !important; }
.single-product .h1, .single-product h2 { text-transform: uppercase; font-weight: 700; font-family: 'Montserrat', Arial, sans-serif; letter-spacing: 2px; }
.single-product .h1 { font-size: 36px; }
.single-product h2 { font-size: 30px; }
.single-product .product-price { letter-spacing: 0; font-weight: 400; }
.single-product .text-accent { color: #fd64c4; fill: #fd64c4; }
.single-product .price-compare { letter-spacing: 0; color: rgba(54,57,61,.6); text-decoration: line-through; }

/* Layout: compare acima; preço e %OFF lado a lado (compacto) */
.single-product .product-price-container { display: block; }
.single-product .product-price-container .m-bottom-quarter { margin-bottom: 4px !important; }
.single-product .product-price-compare { font-size: 22px; line-height: 1.2; margin: 0; }
.single-product #price_display { display: inline-block; margin: 0; }
.single-product .js-offer-label { display: inline-block; margin-left: 14px; font-size: 16px; text-transform: uppercase; letter-spacing: 2px; vertical-align: baseline; }
/* remove margens padrão dos headers para compactar */
.single-product .h1, .single-product h2 { margin: 0; }

/* ============================================
   PAYMENTS LINK abaixo do preço
   ============================================ */
.single-product .link-module { display: inline-block; padding: 12px 0; border-bottom: 1px solid #ecf0f1; color: #fd64c4; text-decoration: none; }
.single-product .link-module:hover { color: #fd64c4; text-decoration: none; box-shadow: none; }
.single-product #btn-installments.btn-link.btn-link-small { color: #fd64c4; font-family: 'Montserrat', Arial, sans-serif; font-size: 16px; }
.single-product #btn-installments .payment-credit-card { width: 22px; height: 22px; vertical-align: -4px; margin-right: 6px; fill: #fd64c4; }
.single-product .link-module-icon-right { fill: #36393d; }
@media (min-width: 768px) {
  .single-product .visible-xs { display: none !important; }
}
.single-product .display-when-content-ready { display: block !important; }

/* ============================================
   PAYMENTS MODAL (popup)
   ============================================ */
.payments-modal { display: none; position: fixed; inset: 0; z-index: 9999; }
.payments-modal.open { display: block; }
.payments-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.payments-modal-dialog { position: relative; background: #fff; width: 90%; max-width: 860px; margin: 40px auto; border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.18); overflow: hidden; }

.payments-modal-header { position: relative; padding: 16px 22px 12px; }
.payments-modal-title { margin: 0; font-family: 'Montserrat', Arial, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; color: #fd64c4; text-transform: uppercase; }
.payments-modal-header::after { content: ""; display: block; height: 3px; background: #fd64c4; margin-top: 12px; width: 160px; }
.payments-modal-close { position: absolute; right: 12px; top: 8px; background: none; border: 0; font-size: 26px; line-height: 1; color: #777; cursor: pointer; }

.payments-modal-body { padding: 22px; }
.payments-method-card { display: flex; align-items: center; gap: 16px; border: 1px solid #eceff1; border-radius: 6px; padding: 14px; }
.payments-method-icon { width: 96px; height: auto; }
.payments-total { font-family: 'Montserrat', Arial, sans-serif; font-size: 16px; color: #36393d; }
.payments-total .woocommerce-Price-amount { font-weight: 700; }

.payments-modal-footer { padding: 14px 22px 18px; border-top: 1px solid #f0f2f5; text-align: right; }
.payments-back-link { color: #fd64c4; text-decoration: none; font-family: 'Montserrat', Arial, sans-serif; }
.payments-back-link:hover { color: #fd64c4; text-decoration: underline; }

/* ============================================
   Add to Cart Button - custom style
   ============================================ */
.single-product .btn { 
    display: inline-block; 
    position: relative; 
    height: 50px; 
    padding: 14px 20px; 
    background-color: rgba(0,0,0,0); 
    border-radius: 4px; 
    font-size: 14px; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    text-decoration: none; 
    outline: 0; 
    border: 1px solid transparent; 
    cursor: pointer;
    font-family: 'Montserrat', Arial, sans-serif;
}
.single-product .btn-block { 
    display: block; 
    width: 100%; 
}
.single-product .d-inline-block { 
    display: inline-block; 
}
.single-product .m-bottom { 
    margin-bottom: 20px !important; 
}
.single-product .btn-primary { 
    color: #fff; 
    fill: #fff; 
    border: none; 
    border-bottom: 4px solid #fc32b1; 
    background: #fd64c4; 
    background: -moz-linear-gradient(top, rgba(253, 100, 196, 0.7) 0%, rgba(253, 100, 196, 0.9) 100%); 
    background: -webkit-linear-gradient(top, rgba(253, 100, 196, 0.7) 0%, rgba(253, 100, 196, 0.9) 100%); 
    background: linear-gradient(to bottom, rgba(253, 100, 196, 0.7) 0%, rgba(253, 100, 196, 0.9) 100%); 
}
.single-product .btn:hover { 
    text-decoration: none; 
    outline: 0; 
}
.single-product .btn-primary:hover { 
    background: #fd64c4; 
    background: -moz-linear-gradient(top, rgba(253, 100, 196, 0.8) 0%, #fd64c4 100%); 
    background: -webkit-linear-gradient(top, rgba(253, 100, 196, 0.8) 0%, #fd64c4 100%); 
    background: linear-gradient(to bottom, rgba(253, 100, 196, 0.8) 0%, #fd64c4 100%); 
    color: #fff; 
    border: none; 
    border-bottom: 0; 
}
/* Ensure input submit respects block width */
.single-product input[type="submit"].btn-block { 
    width: 100%; 
}

/* ============================================
   Quantity selector label and spacing
   ============================================ */
.single-product form.cart .quantity {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    margin-top: 16px !important; /* Forçando o espaçamento acima */
    margin-bottom: 32px !important;
}

.single-product form.cart .quantity ~ .single_add_to_cart_button {
    display: block;
    clear: both;
    margin-top: 16px;
}

.single-product form.cart .quantity::before {
  content: 'QUANTIDADE:';
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 14px; /* igual aos rótulos de variação */
  font-weight: 700;
  letter-spacing: 2px;
  color: #36393d;
  text-transform: uppercase;
  /* mantém inline para alinhar com o input */
}

.single-product form.cart .qty {
  min-width: 64px;
  max-width: 96px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  text-align: center;
  padding: 0 14px;
  border: 1px solid #e0e3e7;
  border-radius: 999px; /* oval/pill */
  background: #fff;
  color: #36393d;
}

/* Remove spinners (Chrome/Safari) para ficar igual aos pills */
.single-product form.cart .qty::-webkit-outer-spin-button,
.single-product form.cart .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove spinners (Firefox) */
.single-product form.cart .qty[type=number] {
  -moz-appearance: textfield;
}

/* Focus/active state coerente com pills das variações */
.single-product form.cart .qty:focus {
  outline: none;
  border-color: #fd64c4;
  box-shadow: 0 0 0 2px rgba(253,100,196,.15);
}

/* Oculta estoque/availability na página de produto */
.single-product .stock,
.single-product .woocommerce-variation-availability,
.single-product .product .stock,
.single-product p.stock {
  display: none !important;
}
.single-product form.cart .variations_button .quantity {
  margin-bottom: 32px !important; /* garante espaço antes do botão */
}
.single-product form.cart .quantity ~ .single_add_to_cart_button,
.single-product form.cart .quantity ~ button.single_add_to_cart_button,
.single-product form.cart .quantity ~ input.single_add_to_cart_button {
  display: block; /* garante que o botão venha abaixo da quantidade */
  clear: both; /* evita flutuações que colem ao lado */
}