/* Barra superior */
.uasbpt-wrapper .uasb-bar{
  color:#EBB300;
  padding:10px 12px;
  margin-bottom:30px;
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  z-index:2;
  font-family: "BasisGrotesquePro-Regular" !important;
    font-size: 17px !important;
    line-height: 21px !important;
}
.uasbpt-wrapper .uasb-label{ padding-right: 30px; }

/* Menú de tabs */
.uasbpt-wrapper .uasb-nav{ list-style:none; margin:0; padding:0; display:flex; gap:8px; }
.uasbpt-wrapper .uasb-nav > li{ margin:0; padding:10px; }
.uasbpt-wrapper .uasb-tab{
  background:transparent; border:0; color:#fff;
  padding:6px 12px; border-radius:4px; cursor:pointer;
}
.uasbpt-wrapper .uasb-tab:hover{ background:#0c5a4c; }
.uasbpt-wrapper .uasb-tab.is-active{ background:#0b5246; }

/* Paneles */
.uasbpt-wrapper .uasb-panels{ position:relative; z-index:1; }
.uasbpt-wrapper .uasb-panel{ display:none; }
.uasbpt-wrapper .uasb-panel.is-active{ display:block; }

.uasbpt-wrapper .uasb-loading{ padding:20px; text-align:center; opacity:.7; }
.uasbpt-wrapper .uasb-error{ padding:16px; background:#fff3f3; border:1px solid #ffd6d6; }

/* ====== GRID del listado SOLO dentro del widget ====== */
.uasbpt-wrapper .products{
  list-style:none !important;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(var(--uasbpt-cols,4), minmax(0,1fr));
  gap:24px;
  clear:both;
}
.uasbpt-wrapper .products:after,
.uasbpt-wrapper .products:before{ display:none !important; content:none !important; }
.uasbpt-wrapper .products > li{
  list-style:none !important;
  float:none !important;
  margin:0 !important;
}
.uasbpt-wrapper .products > li:before{ content:none !important; }

/* --- Ajustes visuales del item (títulos, botón, precio) --- */
.uasbpt-wrapper .woocommerce-loop-product__title,
.uasbpt-wrapper h2.woocommerce-loop-product__title,
.uasbpt-wrapper h3.woocommerce-loop-product__title{
  margin: 10px 0 6px !important;
    font-weight: 500 !important;
    font-family: "BasisGrotesquePro-Regular" !important;
    color: #221E1F !important;
    font-size: 14px !important;
    line-height: 18px !important;
    padding: 0px 10px 0 10px !important;
    height: 55px;
}

/* Ocultar el precio estándar (tu lista ya muestra precio/variantes) */
.uasbpt-wrapper .price{ display:none !important; }

/* Botón de agregar al carrito a ancho completo y alineado */
.uasbpt-wrapper a.button,
.uasbpt-wrapper button.button,
.uasbpt-wrapper .added_to_cart{
   display: inline-block !important;
    font-size: 12px;
    font-family: arial;
    padding: 10px 20px;
    width: 100%;
    line-height: 12px;
    text-decoration: none;
    text-transform: inherit;
    letter-spacing: 0px;
    text-align: center;
    color: #000;
    background: #EBB300 !important;
    border: none !important;
    font-weight: bold;
}

/* Paginación */
.uasbpt-wrapper .uasb-pagination{ margin:16px 0; }
.uasbpt-wrapper .uasb-pagination .page-numbers{
  list-style:none; display:flex; gap:6px; justify-content:center; padding:0; margin:0;
}
.uasbpt-wrapper .uasb-pagination .page-numbers li{ margin:0; padding:0; }
.uasbpt-wrapper .uasb-pagination .page-numbers li.dots{ padding:4px 6px; opacity:.6; }
.uasbpt-wrapper .uasb-pagination a.page-numbers{
  display:inline-block; text-decoration:none; padding:4px 8px;
  border:1px solid #c9c9c9; border-radius:3px; line-height:1; background:#fff;
}
.uasbpt-wrapper .uasb-pagination a.page-numbers.current{
  background:#0b5246; color:#fff; border-color:#0b5246;
}



/* ===== Estilo “barra Booklovers” para las pestañas ===== */

/* Barra superior verde */
.uasbpt-wrapper .uasb-bar{
  color:#fff !important;
  padding:0px 12px;

  display:flex; align-items:center; gap:16px;
}

/* “Ordenar por” en amarillo */
.uasbpt-wrapper .uasb-label{
  color:#EBB300 !important;
  font-weight:600;
  margin-right:12px;
  padding-right:0 !important;          /* anulamos padding anterior si lo hubiera */
}

/* Pestañas tipo link, sin píldora */
.uasbpt-wrapper .uasb-nav{ 
  list-style:none; margin:0; padding:0; display:flex; gap:18px;
}

/* Separador sutil entre tabs (opcional) */
.uasbpt-wrapper .uasb-nav > li + li{
  position:relative; padding-left:14px;
}
.uasbpt-wrapper .uasb-nav > li + li:before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height: 60px;  background: #EBB300;
}

/* Botón como enlace plano con subrayado al pasar/activo */
.uasbpt-wrapper .uasb-tab{
  appearance:none; border:0; background:transparent !important;
  color:#fff !important; cursor:pointer;
  padding:6px 0; border-radius:0; font-weight:600;
  position:relative;
}
.uasbpt-wrapper .uasb-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px;
  height:3px; background:transparent; border-radius:2px;
}

/* Desactiva el fondo oscuro que traías en la clase activa */
.uasbpt-wrapper .uasb-tab.is-active{ background:transparent !important; color: #EBB300 !important; }


/* =========================
   MOBILE & TABLET FIXES
   ========================= */

/* 1) Tabs: quepan y se desplacen horizontalmente en pantallas chicas */
.uasbpt-wrapper .uasb-bar{ flex-wrap:nowrap; }
.uasbpt-wrapper .uasb-nav{
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;         /* Firefox: oculta scroll */
}
.uasbpt-wrapper .uasb-nav::-webkit-scrollbar{ display:none; } /* WebKit */
.uasbpt-wrapper .uasb-tab{ white-space:nowrap; }

/* 2) Imágenes responsivas dentro del grid */
.uasbpt-wrapper ul.products li.product a img{
  width:100% !important;
  height:auto !important;
  display:block;
}

/* 3) Título y elementos del item: tamaños y espaciados más contenidos */
.uasbpt-wrapper .woocommerce-loop-product__title{
  font-size:14px !important;
  line-height:1.25 !important;
  margin:8px 0 6px !important;
}
.uasbpt-wrapper .autor--loop{
  margin:0 10px 6px !important;
  font-size:12px !important;
}

/* 4) Badges de formato/precio: que no rompan el layout en móvil */
.uasbpt-wrapper .tr-flex{
  display:flex; gap:6px; align-items:center;
  margin:6px 10px !important;
}
.uasbpt-wrapper .tr-flex > div{
  flex:1 1 auto; text-align:center;
}

/* 5) Botón de carrito a ancho completo (ya lo tienes, reforzamos en móvil) */
.uasbpt-wrapper a.button,
.uasbpt-wrapper button.button,
.uasbpt-wrapper .added_to_cart{
  width:100% !important;
  margin:8px 0 0 !important;
}

/* 6) Grid: columnas por breakpoint
   — Desktop ya usa las columnas del shortcode
   — Tablet: 2–3 col
   — Móvil: 1 col
*/
@media (max-width: 1200px){
  .uasbpt-wrapper .products{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:18px !important;
  }
}
@media (max-width: 991px){
  .uasbpt-wrapper .products{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:16px !important;
  }
}
@media (max-width: 600px){
  .uasbpt-wrapper .products{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;

  }
  /* compactamos barra de tabs en móvil */
  .uasbpt-wrapper .uasb-bar{ padding:0px; gap:0px; }
  .uasbpt-wrapper .uasb-label{ font-size: 11px; line-height: 12px; }
  .uasbpt-wrapper .uasb-tab{ padding:6px 0; font-size:13px; }
  .uasbpt-wrapper .uasb-nav { gap: 0px;}
  .uasbpt-wrapper .woocommerce-loop-product__title, .uasbpt-wrapper h2.woocommerce-loop-product__title, .uasbpt-wrapper h3.woocommerce-loop-product__title {
      font-size: 12px !important; line-height: 14px !important; max-height: 54px; overflow: hidden; height: 54px;}
span.woocommerce_extensions_brand_item_caption { font-size: 11px;}
.woocommerce_extensions_brand {  font-size: 13px !important;  line-height: 14px !important; max-height: 30px; height: 30px;}
}