/* =============================================================
   VOLTIO GADGETS — Shop: Archive de productos, filtros,
                    tarjetas de producto, paginación
   ============================================================= */

/* ─────────────────────────────────────────────
   SHOP LAYOUT
───────────────────────────────────────────── */
.woocommerce-page .woocommerce,
.archive.post-type-archive-product .site-main {
  background: var(--vg-bg-primary);
}

/* Título de la tienda */
.woocommerce-products-header__title,
.page-title {
  font-family:    var(--vg-font-display) !important;
  font-size:      clamp(1.6rem, 3vw, 2.5rem) !important;
  font-weight:    800 !important;
  color:          var(--vg-text-primary) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Layout: sidebar (filtros) + productos */
.woocommerce-page .woocommerce {
  display:               grid;
  grid-template-columns: 280px 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar products"
    "sidebar pagination";
  gap:     var(--vg-space-8);
  padding: var(--vg-space-10) 0;
  align-items: start;
}

.woocommerce-page .woocommerce .widget_area,
.woocommerce-sidebar {
  grid-area: sidebar;
}

.woocommerce-products-header {
  grid-area: topbar;
}

.woocommerce ul.products {
  grid-area: products;
}

.woocommerce-pagination {
  grid-area: pagination;
}

/* ─────────────────────────────────────────────
   SIDEBAR DE FILTROS
───────────────────────────────────────────── */
.woocommerce-sidebar .widget,
.widget_layered_nav,
.widget_price_filter,
.widget_product_categories {
  background:              var(--vg-bg-glass);
  backdrop-filter:         blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:        1px solid var(--vg-accent-border);
  border-radius: var(--vg-radius-lg);
  padding:       var(--vg-space-6);
  margin-bottom: var(--vg-space-5);
}

.widget-title,
.widgettitle {
  font-family:    var(--vg-font-heading) !important;
  font-weight:    700 !important;
  font-size:      var(--vg-text-sm) !important;
  color:          var(--vg-text-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom:  var(--vg-space-5) !important;
  padding-bottom: var(--vg-space-3) !important;
  border-bottom:  1px solid var(--vg-accent-border) !important;
}

/* Checkboxes de filtro */
.woocommerce-widget-layered-nav-list__item a,
.widget_layered_nav ul li a {
  color:           var(--vg-text-secondary) !important;
  font-size:       var(--vg-text-sm) !important;
  display:         flex !important;
  align-items:     center !important;
  gap:             var(--vg-space-2) !important;
  padding:         6px 0 !important;
  text-decoration: none !important;
  transition:      color var(--vg-transition-fast) !important;
}

.woocommerce-widget-layered-nav-list__item a:hover,
.widget_layered_nav ul li a:hover {
  color: var(--vg-accent-bright) !important;
}

.woocommerce-widget-layered-nav-list__item--chosen a {
  color:       var(--vg-accent) !important;
  font-weight: 600 !important;
}

/* Count badge en filtros */
.woocommerce-widget-layered-nav-list__item .count {
  background:    var(--vg-accent-dim);
  border:        1px solid var(--vg-accent-border);
  border-radius: var(--vg-radius-full);
  padding:       1px 7px;
  font-size:     0.7rem;
  color:         var(--vg-accent);
  margin-left:   auto;
}

/* Slider de precio */
.widget_price_filter .price_slider {
  margin-bottom: var(--vg-space-4);
}

.ui-slider-horizontal {
  background:    var(--vg-bg-tertiary) !important;
  border:        none !important;
  border-radius: var(--vg-radius-full) !important;
  height:        4px !important;
}

.ui-slider-range {
  background: linear-gradient(90deg, var(--vg-accent-dark), var(--vg-accent)) !important;
  box-shadow: var(--vg-shadow-neon-sm) !important;
}

.ui-slider-handle {
  background:    var(--vg-accent) !important;
  border:        none !important;
  border-radius: 50% !important;
  width:         16px !important;
  height:        16px !important;
  top:           -6px !important;
  cursor:        grab !important;
  box-shadow:    var(--vg-shadow-neon-sm) !important;
  transition:    box-shadow var(--vg-transition-fast) !important;
}

.ui-slider-handle:hover {
  box-shadow: var(--vg-shadow-neon-md) !important;
}

.widget_price_filter .price_label {
  color:     var(--vg-text-secondary) !important;
  font-size: var(--vg-text-sm) !important;
}

.widget_price_filter .price_label .from,
.widget_price_filter .price_label .to {
  color:       var(--vg-accent-bright) !important;
  font-weight: 700 !important;
}

/* ─────────────────────────────────────────────
   BARRA SUPERIOR (resultados + ordenar)
───────────────────────────────────────────── */
.woocommerce-products-header,
.woocommerce-ordering {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--vg-space-4);
  margin-bottom:   var(--vg-space-6);
}

.woocommerce-result-count {
  color:     var(--vg-text-muted) !important;
  font-size: var(--vg-text-sm) !important;
}

.woocommerce-ordering select {
  background:    var(--vg-bg-secondary) !important;
  color:         var(--vg-text-secondary) !important;
  border:        1px solid var(--vg-accent-border) !important;
  border-radius: var(--vg-radius-sm) !important;
  padding:       9px 36px 9px 14px !important;
  font-size:     var(--vg-text-sm) !important;
  font-family:   var(--vg-font-body) !important;
  cursor:        pointer !important;
  appearance:    none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300A3FF' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: right 12px center !important;
}

.woocommerce-ordering select:focus {
  border-color: var(--vg-accent) !important;
  box-shadow:   var(--vg-shadow-neon-sm) !important;
  outline:      none !important;
}

/* ─────────────────────────────────────────────
   PRODUCT CARDS
───────────────────────────────────────────── */
.woocommerce ul.products {
  display:               grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:                   var(--vg-space-6) !important;
  list-style:            none !important;
  margin:                0 !important;
  padding:               0 !important;
}

.woocommerce ul.products li.product {
  background:              var(--vg-bg-glass) !important;
  backdrop-filter:         blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border:        1px solid var(--vg-accent-border) !important;
  border-radius: var(--vg-radius-lg) !important;
  overflow:      hidden !important;
  padding:       0 !important;
  margin:        0 !important;
  position:      relative !important;
  transition:    all var(--vg-transition-smooth) !important;
  box-shadow:    var(--vg-shadow-card) !important;
  display:       flex !important;
  flex-direction: column !important;
}

/* Línea superior al hover */
.woocommerce ul.products li.product::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--vg-accent) 50%,
    transparent 100%
  );
  opacity:    0;
  transition: opacity var(--vg-transition-smooth);
  z-index:    2;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--vg-accent-border-hv) !important;
  transform:    translateY(-6px) !important;
  box-shadow:   var(--vg-shadow-neon-sm), var(--vg-shadow-lg) !important;
}

.woocommerce ul.products li.product:hover::before {
  opacity: 1;
}

/* Imagen del producto */
.woocommerce ul.products li.product img {
  border-radius: 0 !important;
  width:         100% !important;
  height:        220px !important;
  object-fit:    contain !important;
  background:    var(--vg-bg-secondary) !important;
  padding:       var(--vg-space-5) !important;
  transition:    transform 0.45s ease !important;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05) !important;
}

/* Badge "Oferta" */
.woocommerce ul.products li.product .onsale {
  background:    linear-gradient(135deg, var(--vg-accent-dark), var(--vg-accent)) !important;
  color:         #FFFFFF !important;
  font-family:   var(--vg-font-heading) !important;
  font-weight:   700 !important;
  font-size:     var(--vg-text-xs) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding:       4px 10px !important;
  border-radius: var(--vg-radius-sm) !important;
  box-shadow:    var(--vg-shadow-neon-sm) !important;
  top:           12px !important;
  left:          12px !important;
  right:         auto !important;
}

/* Contenido de la tarjeta */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 !important;
  text-decoration: none !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family:   var(--vg-font-heading) !important;
  font-weight:   600 !important;
  font-size:     var(--vg-text-base) !important;
  color:         var(--vg-text-primary) !important;
  padding:       var(--vg-space-4) var(--vg-space-5) var(--vg-space-1) !important;
  line-height:   1.4 !important;
  margin:        0 !important;
}

/* Rating estrellas */
.woocommerce ul.products li.product .star-rating {
  padding:   0 var(--vg-space-5) var(--vg-space-2) !important;
  color:     var(--vg-warning) !important;
  font-size: 0.85rem !important;
}

.woocommerce ul.products li.product .star-rating::before,
.woocommerce ul.products li.product .star-rating span::before {
  color: var(--vg-warning) !important;
}

/* Precio */
.woocommerce ul.products li.product .price {
  display:       block !important;
  padding:       0 var(--vg-space-5) var(--vg-space-3) !important;
  margin:        0 !important;
  line-height:   1 !important;
}

.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount {
  font-family:  var(--vg-font-display) !important;
  font-size:    var(--vg-text-2xl) !important;
  font-weight:  800 !important;
  color:        var(--vg-accent-bright) !important;
  text-shadow:  0 0 18px rgba(0, 229, 255, 0.4) !important;
  text-decoration: none !important;
}

.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
  color:       var(--vg-text-muted) !important;
  font-size:   var(--vg-text-base) !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

/* Precio en Bs. */
.woocommerce ul.products li.product .vg-price-ves-display {
  margin:   0 var(--vg-space-5) var(--vg-space-3);
}

/* Botón añadir al carrito */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  display:         block !important;
  width:           calc(100% - var(--vg-space-10)) !important;
  margin:          auto var(--vg-space-5) var(--vg-space-5) !important;
  padding:         12px !important;
  text-align:      center !important;
  background:      linear-gradient(135deg, var(--vg-accent-dark), var(--vg-accent)) !important;
  color:           #FFFFFF !important;
  font-family:     var(--vg-font-heading) !important;
  font-weight:     700 !important;
  font-size:       var(--vg-text-xs) !important;
  letter-spacing:  0.1em !important;
  text-transform:  uppercase !important;
  border:          none !important;
  border-radius:   var(--vg-radius-md) !important;
  cursor:          pointer !important;
  box-shadow:      0 4px 15px rgba(0, 163, 255, 0.35) !important;
  transition:      all var(--vg-transition-smooth) !important;
  margin-top:      auto !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  box-shadow: var(--vg-shadow-neon-md) !important;
  transform:  translateY(-2px) !important;
}

/* Botón "Agotado" */
.woocommerce ul.products li.product.outofstock .button,
.woocommerce ul.products li.product.outofstock .add_to_cart_button {
  background:    rgba(0, 163, 255, 0.10) !important;
  color:         var(--vg-accent-dim) !important;
  border:        1px solid var(--vg-accent-border) !important;
  box-shadow:    none !important;
  cursor:        not-allowed !important;
  pointer-events: none !important;
}

/* Badge Agotado */
.vg-outofstock-badge {
  position:       absolute !important;
  top:            12px !important;
  right:          12px !important;
  background:     rgba(0, 163, 255, 0.10) !important;
  color:          var(--vg-accent) !important;
  border:         1px solid var(--vg-accent-border) !important;
  border-radius:  var(--vg-radius-sm) !important;
  padding:        4px 10px !important;
  font-size:      var(--vg-text-xs) !important;
  font-weight:    700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(8px) !important;
  z-index:        2 !important;
}

/* ─────────────────────────────────────────────
   PAGINACIÓN
───────────────────────────────────────────── */
.woocommerce-pagination {
  margin-top: var(--vg-space-10) !important;
}

.woocommerce-pagination ul {
  display:         flex !important;
  justify-content: center !important;
  gap:             var(--vg-space-2) !important;
  list-style:      none !important;
  padding:         0 !important;
  margin:          0 !important;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           40px !important;
  height:          40px !important;
  background:      var(--vg-bg-glass) !important;
  border:          1px solid var(--vg-accent-border) !important;
  border-radius:   var(--vg-radius-sm) !important;
  color:           var(--vg-text-secondary) !important;
  font-weight:     600 !important;
  font-size:       var(--vg-text-sm) !important;
  transition:      all var(--vg-transition-fast) !important;
  text-decoration: none !important;
}

.woocommerce-pagination ul li a:hover {
  background:   var(--vg-accent-dim) !important;
  border-color: var(--vg-accent-border-hv) !important;
  color:        var(--vg-accent-bright) !important;
  box-shadow:   var(--vg-shadow-neon-sm) !important;
}

.woocommerce-pagination ul li span.current {
  background:   var(--vg-accent-dim) !important;
  border-color: var(--vg-accent) !important;
  color:        var(--vg-accent-bright) !important;
  box-shadow:   var(--vg-shadow-neon-sm) !important;
}