/* ==== Scoped styles para shop ==== */
#shopx body { background:#f5f6fa; }
#shopx { font-family: "Segoe UI", Arial, sans-serif; color:#333; }

/* Sidebar */
#shopx .x-sidebar {
  background:#ffffff;
  border:1px solid #e6e6e6;
  border-radius:10px;
  padding:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  margin-bottom:20px;
}
#shopx .x-sidebar h3{
  font-size:16px; font-weight:700; margin:0 0 10px 0;
  border-bottom:2px solid #f0f0f0; padding-bottom:6px;
}
#shopx .x-list { max-height:320px; overflow:auto; padding-right:6px; }
#shopx .x-item { display:block; margin-bottom:8px; cursor:pointer; }
#shopx .x-item input{ margin-right:8px; }

/* Topbar */
#shopx .x-topbar{
  background:#ffffff;
  border:1px solid #e6e6e6;
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  margin-bottom:16px;
  display:flex; align-items:center; gap:10px; justify-content:flex-end;
      min-width: 140px;
    max-width: 400px;  /* en móvil no se pasa de ancho */
}
#shopx .x-topbar select, #shopx .x-topbar input{
  padding:8px 10px;
  border:1px solid #dcdcdc;
  border-radius:8px;
}
#shopx .x-topbar select{ min-width:180px; }


/* Productos */
#shopx .products-container{
  background:#ffffff;
  border-radius:10px;
  padding:18px;
  box-shadow:0 3px 8px rgba(0,0,0,.05);
}
#shopx .features_items{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  gap:20px;
}
#shopx .product-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:14px;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
#shopx .product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 16px rgba(0,0,0,.08);
}
#shopx .product-card img{
  width:100%;
  height:170px;
  object-fit:contain;
  margin-bottom:10px;
}
#shopx .product-card h2{
  font-size:18px; font-weight:700; margin:8px 0; color:#111;
}
#shopx .product-card p{
  font-size:14px; color:#333; min-height:40px; margin-bottom:10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* En móviles */
/* Para móviles */
@media (max-width: 768px) {
 #shopx .x-topbar {
    flex-wrap: wrap; /* permite bajar si no entra */
    justify-content: flex-start;
  }

  #shopx .x-topbar input#x-buscar {
    flex: none;
    min-width: 140px;
    max-width: 400px;  /* en móvil no se pasa de ancho */
  }

  #shopx .x-topbar select#x-orden-precio {
    min-width: 130px;
  }


}

/* Botones */
#shopx .btn-cart {
  display: inline-block;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 20px; /* más redondeado */
  padding: 10px 16px;
  min-width: 160px; /* opcional: ancho mínimo */
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s;
}
#shopx .btn-cart:hover { background: #333; }

.wishlist-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 2px solid #e74c3c; /* borde rojo */
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}
.wishlist-icon::before {
  content: "❤";
  color: transparent;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}
.wishlist-icon:hover::before { color: #e74c3c; }

/* Paginación */
#shopx .pagination-wrap{ grid-column:1/-1; }
#shopx .pagination{
  display:flex; justify-content:center; flex-wrap:nowrap;
  gap:6px; padding:0; margin:20px auto; list-style:none;
}
#shopx .pagination li{ display:inline-block; }
#shopx .pagination a, #shopx .pagination span{
  display:inline-block; padding:8px 14px; border:1px solid #ddd;
  border-radius:6px; background:#fff; color:#333; text-decoration:none; font-size:14px;
  transition:all .2s ease;
}
#shopx .pagination a:hover{ background:#f0f0f0; color:#000; }
#shopx .pagination .active a, #shopx .pagination .active span{
  background:#000; color:#fff; border-color:#000;
}
#shopx .pagination .disabled span{ color:#999; cursor:not-allowed; background:#f9f9f9; }

/* Filtros activos */
#active-filters {
  font-size: 14px;
  margin:10px 0; padding:10px; background:#faf8f7;
  border:1px solid #0a0a0a; border-radius:6px; display:none;
}
#active-filters .tag {
  background: #212020;
  color: #fff;
  padding: 4px 10px;
  border-radius: 15px;
  margin: 0 5px;
  display: inline-block;
}
#active-filters .remove-filter {
  cursor: pointer;
  margin-left: 6px;
  font-weight: bold;
  color: #333;
}
#active-filters .remove-filter:hover { color: #ff0000; }



/* (Declaraciones repetidas por diseño original) */


#shopx .x-topbar select { flex-grow: 1; }

/* ====== REDES SOCIALES FLOTANTES ====== */
.social-float {
  
   position: fixed;
  bottom: 20px;        /* ahora se pega abajo */
  left: 10px;          /* lado izquierdo */
  display: flex;
  flex-direction: column;
  gap: 10px;           /* espacio entre iconos */
  z-index: 9999;
}

.social-float a {
 display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;     /* más pequeño */
  height: 40px;
  border-radius: 50%;
  background: none; /* quité el fondo */
  transition: transform 0.3s;
}

.social-float a img {
   width: 40px;           /* Tamaño del icono */
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s;
}
.social-float a:hover {
  background: none;
  transform: scale(1.6);
  
}

/* ====== NAVBAR ====== */
.header-bottom {
  background: #f8f8f8 !important; /* mismo color que la barra superior */
  border-bottom: 1px solid #e6e6e6;
}

.header-bottom .navbar-nav > li > a {
  color: #333 !important;   /* mismo color de texto */
  font-weight: 600;
  padding: 12px 18px;
}

.header-bottom .navbar-nav > li > a:hover {
  color: #e61b05 !important; /* hover rojo como acento */
}
/* Ajustar altura de la barra del menú */
.header-bottom {
  background: #d9d7d7 !important;
  border-bottom: 1px solid #e6e6e6;
  padding: 0; /* elimina relleno extra */
  height: auto;
}

/* Ajustar los enlaces del menú */
.header-bottom .navbar-nav > li > a {
  color: #333 !important;
  font-weight: 600;
  padding: 8px 15px; /* menos espacio arriba/abajo */
  line-height: 1.2; /* evita que se alargue */
}

.header-bottom .navbar-nav > li > a:hover {
  color: #e61b05 !important;
}





  *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Arial,Helvetica,sans-serif;
      background:#f5f6f8;
      color:#333;
    }

    /* ====== HEADER ====== */
    .header{
      display:flex; align-items:center; justify-content:space-between;
      background:#fff; padding:10px 20px; box-shadow:var(--shadow-1);
      position:sticky; top:0; z-index:1000;
    }
    .logo img{height:75px; width:auto; object-fit:contain}
    .nav{display:flex; gap:20px; margin-left:30px}
    .nav a{
      text-decoration:none; color:#333; font-size:16px; font-weight:bold; transition:color .3s;
    }
    .nav a:hover{color:#e61b05}
    .search-bar{display:flex; max-width:920px; flex:1; margin-left:auto}
    .search-bar input{
      flex:1; padding:8px 12px; border:1px solid #ccc; border-radius:25px 0 0 25px; outline:none; font-size:16px;
    }
    .search-bar button{
      padding:8px 20px; border:none; background:#080808; color:#fff;
      border-radius:0 25px 25px 0; cursor:pointer; font-size:16px; transition:background .3s;
    }
    .search-bar button:hover{background:#e61b05}



/* Opcional: cuando se haga hover o focus */
#x-orden-precio:focus {
    outline: none;
    border-color: #ff0; /* ejemplo: borde amarillo al enfocar */
}

.ordenar-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap; /* evita que el label se corte */
}