/* =========================================================
   TCG Shiny — estilos WooCommerce (loja, produto, carrinho)
   ========================================================= */

/* ---------- Badges ---------- */
.tcg-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.tcg-badge {
  display: inline-flex;
  align-items: center;
  font-family: "Oxanium", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--tcg-border);
  color: var(--tcg-text);
  background: rgba(255, 255, 255, 0.04);
  line-height: 1.2;
}

.tcg-badge--pokemon {
  border-color: var(--tcg-pokemon);
  color: var(--tcg-pokemon-alt);
  background: rgba(238, 21, 21, 0.16);
}

.tcg-badge--magic {
  border-color: #7a5bc4;
  color: #cbb6ff;
  background: rgba(75, 46, 131, 0.32);
}

.tcg-badge--onepiece {
  border-color: var(--tcg-onepiece);
  color: #ffd7a1;
  background: rgba(211, 47, 47, 0.18);
}

.tcg-badge--digimon {
  border-color: var(--tcg-digimon);
  color: #9fd0ff;
  background: rgba(0, 114, 206, 0.2);
}

.tcg-badge--yugioh {
  border-color: #c98a1f;
  color: #ffd98a;
  background: rgba(201, 138, 31, 0.18);
}

.tcg-badge--graded {
  border-color: var(--tcg-gold);
  color: #1a1508;
  background: var(--tcg-gradient-gold);
}

.tcg-badge--rarity {
  border-color: rgba(212, 175, 55, 0.45);
  color: var(--tcg-gold-light);
  background: var(--tcg-gold-soft);
}

.tcg-badge--neutral {
  color: var(--tcg-text-muted);
}

/* ---------- Grade de produtos ---------- */
.woocommerce ul.products {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

@media (min-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: var(--tcg-gradient-surface);
  border: 1px solid var(--tcg-border);
  border-radius: var(--tcg-radius-lg);
  box-shadow: var(--tcg-shadow-deep);
  overflow: hidden;
  position: relative;
  transition: var(--tcg-transition);
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: var(--tcg-shadow-gold);
}

.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: var(--tcg-radius);
  margin-bottom: 12px;
  background: var(--tcg-charcoal);
}

/* Produtos selados e acessórios: caixa retangular */
.woocommerce ul.products li.product.product_cat-selados a img,
.woocommerce ul.products li.product.product_cat-acessorios a img {
  aspect-ratio: 4 / 3;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: "Oxanium", sans-serif;
  font-size: 15px !important;
  font-weight: 700;
  color: var(--tcg-text);
  padding: 0 !important;
  margin: 0 0 4px;
}

.woocommerce ul.products li.product .price {
  font-family: "Oxanium", sans-serif;
  font-size: 18px;
  font-weight: 800;
  background: var(--tcg-gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 6px 0 12px;
}

.woocommerce ul.products li.product .price del {
  color: var(--tcg-text-muted);
  -webkit-text-fill-color: var(--tcg-text-muted);
  font-size: 14px;
}

.woocommerce ul.products li.product .button {
  margin-top: auto;
  display: block;
  text-align: center;
  background: transparent;
  border: 1px solid var(--tcg-gold-soft);
  color: var(--tcg-gold-light);
  border-radius: var(--tcg-radius);
  padding: 10px 14px;
  font-weight: 600;
  transition: var(--tcg-transition);
}

.woocommerce ul.products li.product .button:hover {
  background: var(--tcg-gold-soft);
  border-color: var(--tcg-gold);
  color: var(--tcg-gold-light);
}

.woocommerce span.onsale {
  background: var(--tcg-gradient-gold);
  color: #1a1508;
  font-family: "Oxanium", sans-serif;
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 8px 20px -10px rgba(212, 175, 55, 0.8);
  top: 18px;
  right: 18px;
  left: auto;
  min-height: 0;
  min-width: 0;
  padding: 5px 12px;
  line-height: 1.2;
}

/* ---------- Barra superior da loja ---------- */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a {
  color: var(--tcg-text-muted);
  font-size: 14px;
}

.woocommerce .woocommerce-ordering select {
  background: var(--tcg-surface);
  border: 1px solid var(--tcg-border);
  color: var(--tcg-text);
  border-radius: var(--tcg-radius);
  padding: 9px 12px;
}

.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--tcg-border);
  border-radius: 10px;
  padding: 8px 14px;
  color: var(--tcg-text-muted);
  background: var(--tcg-surface);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--tcg-gradient-gold);
  color: #1a1508;
  border-color: var(--tcg-gold);
  font-weight: 700;
}

/* ---------- Filtros (widgets de atributo) ---------- */
.widget_layered_nav,
.widget_price_filter,
.widget_product_categories {
  background: var(--tcg-gradient-surface);
  border: 1px solid var(--tcg-border);
  border-radius: var(--tcg-radius-lg);
  padding: 18px;
  margin-bottom: 18px;
}

.widget_layered_nav .widget-title,
.widget_price_filter .widget-title,
.widget_product_categories .widget-title,
.widget h5,
.widget h2 {
  font-family: "Oxanium", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--tcg-gold-light);
  margin-bottom: 12px;
}

.widget ul li a {
  color: var(--tcg-text-muted);
}

.widget ul li a:hover {
  color: var(--tcg-gold-light);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--tcg-gradient-gold);
}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
  background: var(--tcg-surface-2);
}

/* ---------- Página do produto ---------- */
.woocommerce div.product .product_title {
  font-family: "Oxanium", sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--tcg-text);
}

.woocommerce div.product .woocommerce-product-gallery {
  background: var(--tcg-gradient-surface);
  border: 1px solid var(--tcg-border);
  border-radius: var(--tcg-radius-lg);
  padding: 16px;
  box-shadow: var(--tcg-shadow-deep);
}

.woocommerce div.product .woocommerce-product-gallery img {
  border-radius: var(--tcg-radius);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: "Oxanium", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  background: var(--tcg-gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.woocommerce div.product .stock.in-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #7fe0a0;
  border: 1px solid rgba(127, 224, 160, 0.35);
  background: rgba(127, 224, 160, 0.1);
  border-radius: 999px;
  padding: 4px 12px;
}

.woocommerce div.product .out-of-stock {
  color: var(--tcg-text-muted);
}

.woocommerce div.product form.cart .quantity input.qty {
  background: var(--tcg-surface);
  border: 1px solid var(--tcg-border);
  color: var(--tcg-text);
  border-radius: var(--tcg-radius);
  height: 48px;
}

.woocommerce div.product form.cart .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce input.button.alt {
  background: var(--tcg-gradient-gold);
  color: #1a1508;
  font-family: "Oxanium", sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: var(--tcg-radius);
  padding: 14px 26px;
  box-shadow: 0 10px 30px -14px rgba(212, 175, 55, 0.8);
  transition: var(--tcg-transition);
}

.woocommerce div.product form.cart .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--tcg-gradient-gold);
  color: #1a1508;
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* Selos de confiança */
.tcg-trust-seals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.tcg-trust-seal {
  font-size: 11px;
  color: var(--tcg-text-muted);
  border: 1px solid var(--tcg-border);
  border-radius: 999px;
  padding: 5px 12px;
}

/* Abas: Descrição · Detalhes · Envio */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--tcg-border);
  display: flex;
  gap: 6px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 10px 10px 0 0;
  margin: 0;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: "Oxanium", sans-serif;
  font-weight: 700;
  color: var(--tcg-text-muted);
  padding: 12px 16px;
  display: block;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--tcg-gold-light);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  box-shadow: inset 0 -2px 0 0 var(--tcg-gold);
}

/* Tabela de atributos ("Informações adicionais") */
.woocommerce table.shop_attributes,
.woocommerce table.shop_table {
  border: 1px solid var(--tcg-border);
  border-radius: var(--tcg-radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--tcg-gradient-surface);
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_table th {
  font-family: "Oxanium", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tcg-gold-light);
  background: transparent;
  border-bottom: 1px solid var(--tcg-border);
  padding: 12px 16px;
  text-align: left;
}

.woocommerce table.shop_attributes td,
.woocommerce table.shop_table td {
  color: var(--tcg-text);
  border-bottom: 1px solid var(--tcg-border);
  padding: 12px 16px;
  font-style: normal;
}

.woocommerce table.shop_attributes tr:last-child th,
.woocommerce table.shop_attributes tr:last-child td {
  border-bottom: 0;
}

/* Produtos relacionados */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce section.related h2 {
  font-family: "Oxanium", sans-serif;
  font-size: 1.5rem;
  color: var(--tcg-text);
  margin-bottom: 18px;
}

/* ---------- Mensagens, carrinho e checkout ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--tcg-surface);
  border-top: 3px solid var(--tcg-gold);
  color: var(--tcg-text);
  border-radius: var(--tcg-radius);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--tcg-gold);
}

.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--tcg-gradient-surface);
  border: 1px solid var(--tcg-border);
  border-radius: var(--tcg-radius-lg);
  padding: 20px;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: transparent;
  border: 1px solid var(--tcg-gold-soft);
  color: var(--tcg-gold-light);
  border-radius: var(--tcg-radius);
  font-weight: 600;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--tcg-gold-soft);
  border-color: var(--tcg-gold);
  color: var(--tcg-gold-light);
}

/* Ícone do carrinho no menu (Elementor / Woo) */
.elementor-menu-cart__toggle .elementor-button-icon {
  color: var(--tcg-gold-light);
}

.elementor-menu-cart__toggle .elementor-button-text,
.elementor-menu-cart__toggle .elementor-button-icon-qty {
  background: var(--tcg-gradient-gold);
  color: #1a1508;
  font-weight: 800;
}