/*
Theme Name: Trussadi
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.payment .payment-info .payment-price {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
}
.payment .payment-info .payment-price del { order: 2; }
.payment .payment-info .payment-price ins { order: 1; }

.payment .payment-info .payment-price ins bdi {
  color: #2e7d32 !important;
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1.1;
  margin-left: -5px;
}
.payment .payment-info .payment-price ins .woocommerce-Price-currencySymbol {
  font-size: inherit !important;
  color: inherit !important;
}

.payment .payment-info .payment-price del bdi {
  color: #4a4a4a !important;
  font-size: 0.95em;
  text-decoration: line-through;
}
.payment .payment-info .payment-price del .woocommerce-Price-currencySymbol {
  color: inherit !important;
  font-size: inherit !important;
}

.payment .payment-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.payment .payment-title,
.payment .product-title,
.payment .payment-info .payment-price,
.payment .payment-name {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left;
}

.payment h1,
.payment h2,
.payment h3,
.payment h4 {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left;
}

.box-image { border-radius: 10px; }
.coupon { display: none; }
button[name="update_cart"] { display: none; }
.ux-quantity { display: none; }

/* ============ BADGE DE DESCONTO ============ */
/* Container do badge - posicao absoluta dentro da imagem */
.badge-container {
  position: absolute !important;
  z-index: 10 !important;
  pointer-events: none;
}

.badge-container.absolute.left.top.z-1 {
  inset: -30px auto auto 8px !important;
}

/* Badge altura e visibilidade */
.badge {
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Estilo da pill rosa */
.badge .badge-inner.on-sale,
.badge .badge-inner.secondary.on-sale {
  background: #ff8c3f !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.badge .badge-inner.on-sale .onsale {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1px;
  margin: 0;
}

.badge .badge-inner.on-sale::before,
.badge .badge-inner.on-sale::after {
  content: none !important;
}

.badge.badge-square .badge-inner.on-sale {
  border-radius: 999px !important;
}

/* Badge maior na pagina do produto (single) */
.badge-container.is-larger {
  top: 12px !important;
  left: 12px !important;
}

.badge-container.is-larger .badge-inner.on-sale {
  padding: 5px 12px !important;
  font-size: 13px !important;
}

/* Garantir que o pai da imagem tenha position relative */
.box-image,
.product-gallery,
.product-images,
.woocommerce-product-gallery {
  position: relative !important;
  overflow: visible !important;
}

/* Overflow visible so na galeria principal (pra badge aparecer) */
.product-images > .flickity-viewport {
  overflow: visible !important;
}

/* Thumbnails: conter no slider e forcar largura correta */
.product-thumbnails .flickity-viewport {
  overflow: hidden !important;
}
.product-thumbnails .flickity-slider .col {
  width: 25% !important;
}

/* ============ FIM BADGES ============ */

.row-small img {
  border-radius: 10px;
}

.product-title-container > h1 {
  color: #272727;
  font-weight: 350;
  font-size: 1.5em;
}

.payment-card i, .payment-card icon { display: none; }

.wcsp-container .payment .icon {
  display: none;
}

button[name="add-to-cart"] { width: 100%; padding: 8px; font-weight: 550; }
button[name="update_cart"] { display: none; }
.woocommerce-mini-cart__buttons.buttons a:nth-of-type(2) {
  display: none !important;
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

}