/* ============================================================
   INTEGRAÇÃO WOOCOMMERCE v2.0 — DESIGN SYSTEM DIOGO LEIVA
   Cobre: botões, grade de produtos, produto single, galeria,
   rating, mini-carrinho, breadcrumbs, variações, carrinho,
   checkout, notificações.
============================================================ */

/* ─── 1. Botões Primários e Secundários ─── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  border-radius: 0 !important;
  border: none !important;
  background-color: var(--dl-purple-2) !important;
  color: var(--dl-dark) !important;
  cursor: pointer;
  display: inline-block;
  line-height: 1.5 !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(139, 132, 196, 0.22) !important;
  background-color: var(--dl-purple) !important;
  color: #ffffff !important;
}

/* Botão fantasma WooCommerce */
.woocommerce a.button.outlined,
.woocommerce button.button.outlined {
  background: transparent !important;
  border: 1px solid var(--dl-purple-2) !important;
  color: var(--dl-purple-2) !important;
}

.woocommerce a.button.outlined:hover,
.woocommerce button.button.outlined:hover {
  background: var(--dl-purple-2) !important;
  color: var(--dl-dark) !important;
}

/* ─── 2. Grade de Produtos (Product Loop) ─── */
.woocommerce ul.products li.product {
  background-color: #ffffff !important;
  border: 1px solid var(--dl-c2-border) !important;
  border-radius: 0 !important;
  padding: 1.5rem !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden;
  position: relative;
}

.woocommerce ul.products li.product::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--dl-purple-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.woocommerce ul.products li.product:hover::before {
  transform: scaleX(1);
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(74, 62, 133, 0.1) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--dl-serif) !important;
  font-size: var(--dl-text-lg) !important;
  font-weight: 300 !important;
  color: var(--dl-text-light) !important;
  line-height: 1.3 !important;
  padding: 0.75rem 0 0.25rem !important;
}

.woocommerce ul.products li.product .price,
.woocommerce .product .price {
  color: var(--dl-purple) !important;
  font-family: var(--dl-sans) !important;
  font-weight: 500 !important;
  font-size: var(--dl-text-sm) !important;
}

/* ─── 3. Produto Single ─── */
.woocommerce div.product .product_title {
  font-family: var(--dl-serif) !important;
  font-weight: 300 !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  line-height: 1.15 !important;
  color: var(--dl-text-light) !important;
  margin-bottom: var(--dl-space-3) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-base) !important;
  font-weight: 300 !important;
  color: var(--dl-text-mid) !important;
  line-height: 1.7 !important;
  margin-bottom: var(--dl-space-5) !important;
}

/* Preço no produto single */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-2xl) !important;
  font-weight: 500 !important;
  color: var(--dl-purple) !important;
  letter-spacing: -0.02em !important;
}

/* Galeria — thumbnail outline */
.woocommerce div.product div.images .flex-control-thumbs li img {
  border: 2px solid transparent !important;
  border-radius: 0 !important;
  transition: border-color 0.2s ease !important;
  opacity: 0.65 !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
  border-color: var(--dl-purple-2) !important;
  opacity: 1 !important;
}

/* ─── 4. Rating e Reviews ─── */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--dl-purple-2) !important;
}

.woocommerce #reviews #comments ol.commentlist li .comment_container .comment-text {
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-sm) !important;
  color: var(--dl-text-mid) !important;
  border: 1px solid var(--dl-c2-border) !important;
  border-radius: 0 !important;
  padding: 1.5rem !important;
}

.woocommerce #reviews .woocommerce-Reviews-title {
  font-family: var(--dl-serif) !important;
  font-weight: 300 !important;
  font-size: var(--dl-text-2xl) !important;
  color: var(--dl-text-light) !important;
}

/* ─── 5. Etiqueta de Promoção (Sale Badge) ─── */
.woocommerce span.onsale {
  background-color: var(--dl-green) !important;
  color: #ffffff !important;
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  padding: 4px 10px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.4 !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
}

/* ─── 6. Breadcrumbs ─── */
.woocommerce .woocommerce-breadcrumb {
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-xs) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--dl-text-mid) !important;
  margin-bottom: var(--dl-space-6) !important;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--dl-text-mid) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--dl-purple) !important;
}

/* ─── 7. Tabela de Variações ─── */
.woocommerce div.product .variations_form .variations td.label label {
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--dl-text-mid) !important;
}

.woocommerce div.product .variations_form .variations select {
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-sm) !important;
  padding: 10px 16px !important;
  border: 1px solid var(--dl-c2-border) !important;
  border-radius: 0 !important;
  background-color: var(--dl-c2-b) !important;
  color: var(--dl-text-light) !important;
  -webkit-appearance: none !important;
  width: 100% !important;
}

.woocommerce div.product .variations_form .variations select:focus {
  border-color: var(--dl-purple-2) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--dl-purple-bg) !important;
}

/* ─── 8. Tabelas de Carrinho e Checkout ─── */
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table {
  border-collapse: collapse !important;
  border: 1px solid var(--dl-c2-border) !important;
  border-radius: 0 !important;
  overflow: hidden;
  width: 100% !important;
}

.woocommerce-cart table.cart th,
.woocommerce-checkout table.shop_table th {
  background-color: var(--dl-c2-b) !important;
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--dl-text-mid) !important;
  padding: 14px 18px !important;
  font-weight: 400 !important;
  border-bottom: 1px solid var(--dl-c2-border) !important;
}

.woocommerce-cart table.cart td,
.woocommerce-checkout table.shop_table td {
  padding: 18px !important;
  border-bottom: 1px solid var(--dl-c2-border) !important;
  color: var(--dl-text-mid) !important;
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-sm) !important;
  vertical-align: middle !important;
}

.woocommerce-cart table.cart .product-name a,
.woocommerce-checkout table.shop_table .product-name a {
  font-family: var(--dl-serif) !important;
  font-weight: 300 !important;
  color: var(--dl-text-light) !important;
  text-decoration: none !important;
}

.woocommerce-cart table.cart .product-name a:hover,
.woocommerce-checkout table.shop_table .product-name a:hover {
  color: var(--dl-purple) !important;
}

.woocommerce .cart-collaterals .cart_totals {
  background: var(--dl-c2-b) !important;
  padding: var(--dl-space-5) !important;
  border: 1px solid var(--dl-c2-border) !important;
}

.woocommerce .cart-collaterals .cart_totals h2 {
  font-family: var(--dl-serif) !important;
  font-weight: 300 !important;
  font-size: var(--dl-text-2xl) !important;
  color: var(--dl-text-light) !important;
  margin-bottom: var(--dl-space-4) !important;
}

/* ─── 9. Inputs do Checkout ─── */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
  display: block;
  width: 100%;
  padding: 12px 16px !important;
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-base) !important;
  font-weight: 300 !important;
  color: var(--dl-text-light) !important;
  background-color: var(--dl-c2-b) !important;
  border: 1px solid var(--dl-c2-border) !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: var(--dl-purple-2) !important;
  box-shadow: 0 0 0 3px var(--dl-purple-bg) !important;
}

.woocommerce-checkout .form-row label,
.woocommerce-checkout fieldset legend {
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--dl-text-mid) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ─── 10. Mini-carrinho (Widget / Off-canvas) ─── */
.woocommerce-mini-cart li {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--dl-c2-border) !important;
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-sm) !important;
  color: var(--dl-text-mid) !important;
}

.woocommerce-mini-cart li img {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
  border: 1px solid var(--dl-c2-border) !important;
}

.woocommerce-mini-cart-item .woocommerce-mini-cart__product-name a {
  font-family: var(--dl-serif) !important;
  font-weight: 300 !important;
  color: var(--dl-text-light) !important;
  text-decoration: none !important;
}

.woocommerce-mini-cart__total {
  font-family: var(--dl-sans) !important;
  font-weight: 500 !important;
  color: var(--dl-purple) !important;
  border-top: 1px solid var(--dl-c2-border) !important;
  padding-top: var(--dl-space-3) !important;
  margin-top: var(--dl-space-2) !important;
}

/* ─── 11. Notificações (Sucesso, Erro, Info) ─── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top: 3px solid var(--dl-purple) !important;
  background-color: var(--dl-purple-bg) !important;
  color: var(--dl-text-light) !important;
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-sm) !important;
  border-radius: 0 !important;
  padding: 1em 2em !important;
  list-style: none !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--dl-purple) !important;
}

.woocommerce-error {
  border-top-color: #b91c1c !important;
  background-color: rgba(185, 28, 28, 0.06) !important;
}

.woocommerce-error::before { color: #b91c1c !important; }

/* ─── 12. Paginação de Loja ─── */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-sm) !important;
  color: var(--dl-text-mid) !important;
  border: 1px solid var(--dl-c2-border) !important;
  border-radius: 0 !important;
  padding: 8px 14px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--dl-purple-2) !important;
  color: var(--dl-dark) !important;
  border-color: var(--dl-purple-2) !important;
}

/* ─── 13. Tabs do Produto (Descrição, Avaliações) ─── */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0 !important;
  display: flex !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--dl-c2-border) !important;
  margin-bottom: var(--dl-space-5) !important;
  list-style: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--dl-text-mid) !important;
  padding: 12px 20px !important;
  display: block !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--dl-purple) !important;
  border-bottom-color: var(--dl-purple) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
  padding: 0 !important;
}

/* ─── 14. Filtros e Ordenação ─── */
.woocommerce-ordering select,
.woocommerce .widget_price_filter .ui-slider-handle {
  font-family: var(--dl-sans) !important;
  font-size: var(--dl-text-sm) !important;
}

.woocommerce .widget_price_filter .ui-slider-handle {
  background: var(--dl-purple-2) !important;
  border: none !important;
}

.woocommerce .widget_price_filter .ui-slider-range {
  background: var(--dl-purple-bg) !important;
}