/* Estilos personalizados para el admin */
body{
  padding-left: 0 !important;
  background-color: gainsboro;
}

.admin-container{
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: auto;
}

.content-wrapper{
  width: 100%;
}


/* Estilos para el menú de navegación */
.admin-nav-menu {
  background: #1b2a47;
  width: clamp(200px, 100%, 300px);
  height: 100vh;
  position: sticky;
  left: 0;
  top: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.admin-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
}

.admin-nav-list li {
  margin: 0;
  padding: 0;
  position: relative;
}

.admin-nav-list li a {
  color: #fff;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.admin-nav-list li a i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
}

.admin-nav-list li a:hover {
  background: rgba(255,255,255,0.1);
}

.admin-nav-list li.selected {
  background: rgba(255,255,255,0.1);
}

.admin-nav-list li.selected > a {
  color: #fff;
  font-weight: bold;
}

/* Estilos para el submenú */
.admin-subnav {
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgba(0,0,0,0.2);
  display: none;
}

.admin-nav-list li.selected .admin-subnav {
  display: block;
}

.admin-subnav li {
  margin: 0;
  padding: 0;
}

.admin-subnav li a {
  padding: 15px 20px 15px 50px;
  font-size: 0.9em;
  color: rgba(255,255,255,0.8);
}

.admin-subnav li a:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
}

.admin-subnav li.selected a {
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-weight: bold;
}

/* Estilos para el footer del menú */
.admin-nav-footer {
  padding: 10px 0;
  background: #15233c;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: auto;
  flex: 0 0 auto;
}

.admin-nav-footer .btn {
  display: flex;
  align-items: center;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
}

.admin-nav-footer .btn:hover {
  background: rgba(255,255,255,0.1);
}

.admin-nav-footer .btn i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
} 

.admin-nav-list > li {
  position: relative;
}

.menu-item-container {
  display: flex;
  align-items: center;
  position: relative;
}

.menu-link {
  flex-grow: 1;
  text-decoration: none;
  padding: 10px 15px;
  display: flex;
  align-items: center;
}

.toggle-button {
  --clr-main-menu--link : #a4b7c8;

  background: transparent !important;
  border: 1px solid var(--clr-main-menu--link);
  border-radius: 6px !important;
  cursor: pointer;
  color: var(--clr-main-menu--link) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s;
  top: 12px !important;
  right: 8px !important;
  position: absolute;
  z-index: 10;
  width: 24px !important;
  height: 24px !important;   
}

.selected .toggle-button i {
  transform: rotate(180deg);
}

.admin-subnav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.admin-nav-list > li.selected .admin-subnav {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
}

/* Solo mostrar el botón toggle en elementos con submenú */
.toggle-button {
  display: none;
}

li:has(.admin-subnav) .toggle-button {
  display: flex;
}

/* Accordion styles */
.filter-section {
  margin-bottom: 1rem;
}

.filter-toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.filter-content {
  display: none;
  border-top: none;
}

.filter-content.expanded {
  display: block !important;
}

.transition-transform {
  transition: transform 0.2s ease-in-out;
}

.rotate-180 {
  transform: rotate(180deg);
}

label {
  font-size: 8px !important;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* input, select {
  padding: 8px 12px;
  border-radius: 6px;
} */

/* Botón Importar BETA - Estilo degradado llamativo */
.btn-import-beta {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
}

.btn-import-beta:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
  color: white;
  text-decoration: none;
}

.btn-import-beta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s;
}

.btn-import-beta:hover::before {
  left: 100%;
}

.btn-import-beta i {
  font-size: 14px;
  animation: bounce 2s infinite;
}

.btn-import-beta small {
  font-size: 10px;
  background: rgba(255,255,255,0.2);
  padding: 2px 6px;
  border-radius: 12px;
  margin-left: 4px;
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-8px);
  }
  70% {
    transform: translateY(-4px);
  }
  90% { 
    transform: translateY(-2px);
  }
}

/* Responsivo para el botón */
@media (max-width: 768px) {
  .btn-import-beta {
    padding: 8px 16px;
    font-size: 12px;
  }
  
  .btn-import-beta small {
    font-size: 9px;
  }
}

/* Fila de botones de acción */
.action-buttons-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Banner promocional de importación */
.import-promo-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}

.import-promo-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="%23ffffff" fill-opacity="0.05" cx="30" cy="30" r="30"/></g></svg>') repeat;
  opacity: 0.1;
}

.banner-content {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 2;
}

.banner-icon {
  font-size: 32px;
  animation: pulse 2s infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-text h3 {
  color: white;
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.banner-text p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.beta-tag {
  background: rgba(255, 255, 255, 0.25);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Responsivo para el banner */
@media (max-width: 768px) {
  .import-promo-banner {
    padding: 16px;
  }
  
  .banner-content {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .banner-text h3 {
    font-size: 18px;
  }
  
  .banner-text p {
    font-size: 13px;
  }
}

/* Lista de ejemplos de proveedores */
.provider-examples {
  margin-top: 8px;
}

.provider-examples small {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}

.examples-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.examples-list li {
  margin: 4px 0;
  font-size: 12px;
  color: #6c757d;
  line-height: 1.4;
}

.examples-list li strong {
  color: #495057;
  font-weight: 600;
}

/* Botón del formulario de importación - Estilo sobrio */
.btn-import-form {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0.3px;
  font-size: 14px;
  transition: background 0.3s ease;
  cursor: pointer;
}

.btn-import-form:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  color: white;
  text-decoration: none;
}

.btn-import-form:focus {
  outline: none;
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  color: white;
}

.btn-import-form:disabled {
  background: linear-gradient(135deg, #95a5db 0%, #a692c4 100%);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ========== TARJETAS DE RESULTADO DE IMPORTACIÓN ========== */

/* Contenedor base de la tarjeta */
.import-result-card {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: white;
}

/* Cabeceras de las tarjetas */
.result-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.result-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  flex: 1;
}

.result-header i {
  font-size: 18px;
}

/* Botón de cerrar tarjeta */
.close-card-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.close-card-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

/* Cuerpo de las tarjetas */
.result-body {
  padding: 20px;
}

/* ========== TARJETA DE ÉXITO ========== */
.success-card {
  border-color: #10b981;
}

.success-header {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.success-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Información principal del producto */
.product-main-info {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.product-images {
  flex: 0 0 120px;
}

.main-image {
  background: #f8fafc;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-main-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: #f8fafc;
  border-radius: 6px;
  color: #94a3b8;
  border: 2px dashed #cbd5e0;
}

.no-image i {
  font-size: 24px;
  margin-bottom: 6px;
}

.additional-images {
  margin-top: 6px;
  text-align: center;
}

.product-details {
  flex: 1;
}

.product-name {
  color: #1e293b;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.product-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meta-label {
  font-weight: 500;
  color: #6b7280;
  font-size: 13px;
  min-width: 60px;
}

.sku-value {
  font-family: 'Courier New', monospace;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
}

.supplier-value {
  background: #e0f2fe;
  color: #0369a1;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
}

.ref-value {
  font-family: 'Courier New', monospace;
  background: #fef3c7;
  color: #92400e;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
}

/* Sección de precios y stock */
.product-pricing-stock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.section-title {
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.price-info,
.stock-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.price-item,
.stock-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.item-label {
  font-weight: 500;
  color: #6b7280;
  font-size: 13px;
  min-width: 50px;
}

.item-value {
  font-weight: 500;
  color: #374151;
  font-size: 13px;
}

.price-highlight {
  color: #059669;
  font-weight: 600;
}

.price-note {
  margin-top: 4px;
}

.stock-value {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 13px;
}

.stock-value.in-stock {
  background: #d1fae5;
  color: #065f46;
}

.stock-value.out-stock {
  background: #fee2e2;
  color: #991b1b;
}

/* Sección de variantes */
.variants-section {
  margin-bottom: 20px;
}

.variants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.variant-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px;
}

.variant-name {
  font-weight: 500;
  color: #374151;
  font-size: 13px;
  line-height: 1.3;
}

.variant-stock {
  margin-top: 4px;
  color: #6b7280;
}

.more-variants {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: 1px dashed #cbd5e0;
  border-radius: 6px;
  padding: 10px;
}

/* Acciones */
.result-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.primary-actions {
  display: flex;
  gap: 8px;
}

.destructive-actions {
  display: flex;
}

/* Botones secundarios */
.btn-secondary {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: #f1f5f9;
  border-color: #cbd5e0;
  color: #334155;
  text-decoration: none;
}

.btn-secondary i {
  font-size: 12px;
}

/* Botón destructivo outline */
.btn-danger-outline {
  background: transparent;
  border: 1px solid #dc2626;
  color: #dc2626;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-danger-outline:hover {
  background: #dc2626;
  color: white;
  text-decoration: none;
}

.btn-danger-outline i {
  font-size: 12px;
}

/* ========== TARJETA DE ERROR ========== */
.error-card {
  border-color: #dc2626;
}

.error-header {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
}

.beta-notice {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.error-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.error-message {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 16px;
}

.error-text {
  font-family: 'Courier New', monospace;
  color: #991b1b;
  font-size: 14px;
  margin: 8px 0 0 0;
  word-break: break-word;
}

.beta-help {
  background: #fffbeb;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 16px;
}

.help-box p {
  margin-bottom: 12px;
}

.help-box ul {
  margin: 0;
  padding-left: 20px;
}

.help-box li {
  margin-bottom: 4px;
}

/* ========== TARJETA DE ADVERTENCIA ========== */
.warning-card {
  border-color: #f59e0b;
}

.warning-header {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.help-suggestions {
  background: #fffbeb;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.help-suggestions p {
  margin-bottom: 12px;
}

.help-suggestions ul {
  margin: 0;
  padding-left: 20px;
}

.help-suggestions li {
  margin-bottom: 4px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .product-main-info {
    flex-direction: column;
    gap: 12px;
  }
  
  .product-images {
    flex: none;
    align-self: center;
  }
  
  .product-pricing-stock {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .variants-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  
  .result-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .primary-actions {
    justify-content: center;
  }
  
  .destructive-actions {
    justify-content: center;
  }
  
  .result-header {
    padding: 14px 16px;
  }
  
  .result-body {
    padding: 16px;
  }
  
  .result-header h3 {
    font-size: 15px;
  }
  
  .product-name {
    font-size: 16px;
  }
}
/* Estilos para la tabla de cantidades alternativas */

/* Contenedor principal DENTRO de .line-item-alternatives-container o .product-alternative-quantities */
.line-item-alternatives-container .alternative-quantities,
.product-alternative-quantities .alternative-quantities {
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* El overflow-x: auto se maneja en la tabla o un div interno si es necesario */
  margin-bottom: 0; /* El contenedor padre maneja el margen inferior */
  background-color: transparent; /* El contenedor padre tiene el fondo */
  border-radius: 0; /* El contenedor padre tiene el borde redondeado */
  border: none; /* El contenedor padre tiene el borde */
  box-shadow: none; /* El contenedor padre tiene la sombra */
  padding: 0; /* El contenedor padre maneja el padding */
}

/* Encabezado */
.alternative-quantities h4 {
  font-size: 0.875rem; /* Reducido ligeramente */
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #374151;
  padding: 0.25rem 0.25rem 0 0.25rem; /* Ajuste de padding */
}

/* Div que envuelve la tabla para scroll horizontal si es necesario */
.alternative-quantities .table-wrapper {
  overflow-x: auto;
  border-top: 1px solid #e5e7eb; /* Línea superior para la tabla */
}

/* Tabla */
.alternative-quantities table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem; /* Reducido */
  table-layout: auto; /* Permitir que la tabla se ajuste al contenido */
  min-width: 280px; /* Ancho mínimo para evitar que se comprima demasiado */
  min-height: 50px; /* Altura mínima para asegurar visibilidad */
  display: table !important; /* Asegurar que se comporte como tabla */
}

/* Encabezados de tabla */
.alternative-quantities th {
  background-color: #f9fafb;
  font-weight: 500;
  text-align: left;
  padding: 0.375rem 0.5rem; /* Reducido */
  color: #4b5563;
  /* white-space: nowrap; */ /* Comentado temporalmente */
}

/* Celdas de tabla */
.alternative-quantities td {
  padding: 0.375rem 0.5rem; /* Reducido */
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  /* white-space: nowrap; */ /* Comentado temporalmente */
}
.alternative-quantities tr:last-child td {
  border-bottom: none; /* No border for the last row */
}

/* Filas al pasar el mouse */
.alternative-quantities tr:hover td { /* Aplicar hover a las celdas para consistencia */
  background-color: #f3f4f6;
}

/* Columna de cantidad */
.alternative-quantities td:first-child {
  font-weight: 500;
}

/* Columna de total (alineación a la derecha) */
.alternative-quantities th:last-child,
.alternative-quantities td:last-child {
  text-align: right;
  font-weight: 500;
}

/* Personalizaciones */
.alternative-quantities ul {
  list-style-type: disc;
  margin-left: 1rem; /* Reducido */
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 0.7rem; /* Reducido */
  padding-left: 0.5rem; /* Espacio para los bullets */
}

.alternative-quantities ul li {
  margin-bottom: 0.125rem; /* Reducido */
  line-height: 1.25;
  /* white-space: normal; */ /* Comentado temporalmente, dejar que el padre controle o se ajuste */
}

/* No hay cantidades alternativas */
.alternative-quantities p {
 padding: 0.5rem 0.25rem;
}


/* Estilos responsivos */
@media (max-width: 768px) {
  .alternative-quantities {
    font-size: 0.7rem; /* Aún más pequeño en móviles si es necesario */
  }
  
  .alternative-quantities th,
  .alternative-quantities td {
    padding: 0.25rem 0.375rem;
    /* white-space: normal; */ /* Comentado temporalmente */
  }
  
  .alternative-quantities ul {
    margin-left: 0.75rem;
  }
} 
@tailwind base;
@tailwind components;
@tailwind utilities;

.outlined-button {
  @apply bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded-full shadow;
}

.pagination {
  @apply flex justify-between items-center mt-4 mb-4 p-4 rounded max-w-md mx-auto text-gray-600 text-sm font-semibold tracking-wide;
}

.pagination > .current {
  @apply font-bold text-red-500 tracking-wide cursor-default border border-red-500 rounded-sm p-2;
}

.pagination > .page > a {
  @apply text-gray-600 hover:text-gray-800 no-underline cursor-pointer rounded-sm p-2 border border-gray-200 shadow-sm;
}

.button {
  @apply bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full shadow;
}

.disabled {
  @apply opacity-50 cursor-not-allowed;
}
/* line 2, app/assets/stylesheets/cart.scss */
.line-item {
  display: grid;
  grid-template-columns: 150px 3fr 1fr 1fr 1fr 50px;
  gap: 15px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

/* line 10, app/assets/stylesheets/cart.scss */
.line-item:hover {
  background-color: #f9f9f9;
}

/* line 16, app/assets/stylesheets/cart.scss */
.line-item-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* line 24, app/assets/stylesheets/cart.scss */
.line-item-name h4 {
  margin: 0 0 10px;
  font-size: 18px;
}

/* line 28, app/assets/stylesheets/cart.scss */
.line-item-name h4 a {
  color: #333;
  text-decoration: none;
}

/* line 32, app/assets/stylesheets/cart.scss */
.line-item-name h4 a:hover {
  color: #e74c3c;
}

/* line 38, app/assets/stylesheets/cart.scss */
.line-item-name .line-item-description {
  color: #666;
  font-size: 14px;
}

/* line 44, app/assets/stylesheets/cart.scss */
.line-item-personalizations,
.line-item-comment {
  margin-top: 15px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* line 51, app/assets/stylesheets/cart.scss */
.line-item-personalizations h5,
.line-item-comment h5 {
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: 600;
}

/* line 57, app/assets/stylesheets/cart.scss */
.line-item-personalizations ul,
.line-item-comment ul {
  margin: 0;
  padding-left: 20px;
}

/* line 61, app/assets/stylesheets/cart.scss */
.line-item-personalizations ul li,
.line-item-comment ul li {
  margin-bottom: 5px;
}

/* line 64, app/assets/stylesheets/cart.scss */
.line-item-personalizations ul li .price,
.line-item-comment ul li .price {
  font-weight: 600;
  color: #e74c3c;
}

/* line 71, app/assets/stylesheets/cart.scss */
.line-item-personalizations p,
.line-item-comment p {
  margin: 0;
  font-style: italic;
}

/* line 77, app/assets/stylesheets/cart.scss */
.line-item-alternative-label {
  margin-top: 10px;
}

/* line 80, app/assets/stylesheets/cart.scss */
.line-item-alternative-label .badge {
  display: inline-block;
  padding: 3px 7px;
  background-color: #3498db;
  color: white;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
}

/* line 91, app/assets/stylesheets/cart.scss */
.line-item-quantity,
.line-item-price,
.line-item-total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-weight: 600;
}

/* line 100, app/assets/stylesheets/cart.scss */
.line-item-quantity input,
.line-item-price input,
.line-item-total input {
  width: 60px;
  padding: 5px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* line 109, app/assets/stylesheets/cart.scss */
.cart-item-delete {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 114, app/assets/stylesheets/cart.scss */
.cart-item-delete a {
  color: #e74c3c;
}

/* line 117, app/assets/stylesheets/cart.scss */
.cart-item-delete a img {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  /* line 126, app/assets/stylesheets/cart.scss */
  .line-item {
    grid-template-columns: 1fr;
  }
  /* line 129, app/assets/stylesheets/cart.scss */
  .line-item .line-item-image {
    text-align: center;
  }
  /* line 132, app/assets/stylesheets/cart.scss */
  .line-item .line-item-image img {
    max-width: 200px;
  }
  /* line 137, app/assets/stylesheets/cart.scss */
  .line-item .line-item-quantity,
.line-item .line-item-price,
.line-item .line-item-total {
    text-align: left;
    margin: 10px 0;
  }
  /* line 144, app/assets/stylesheets/cart.scss */
  .line-item .cart-item-delete {
    justify-content: flex-start;
    margin-top: 10px;
  }
}
/* Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Inter var font */
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url('https://rsms.me/inter/font-files/Inter.var.woff2') format('woff2');
} 
/* Arreglos para el layout de la página de producto */

/* Ocultar cualquier checkmark fuera de un contenedor específico */
.product_info > :not(.product-availability):before {
  content: none !important;
  display: none !important;
}

/* Limpiar el estilo del indicador "En stock" */
.product_info .product-availability {
  display: flex !important;
  align-items: center !important;
  max-width: 120px !important;
}

/* Ocultar contenido vacío o checkmarks independientes */
.product_info > *:empty,
.product_info > :empty + br {
  display: none !important;
}

/* Eliminar directamente caracteres Unicode que pueden aparecer */
body:not(.admin-interface) .product_info > svg,
body:not(.admin-interface) .product_info > span:empty {
  display: none !important;
}

/* Estilo consistente para el texto "En stock" */
.product_info .product-availability span {
  font-size: 12px !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* Corregir layout de la información del producto */
.product_info > * {
  margin-bottom: 0.75rem !important;
  clear: both !important;
} 
/* line 1, app/assets/stylesheets/spree/backend/admin.scss */
.admin-nav-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 198.89px;
  background-color: #3c4e58;
  color: white;
  padding: 10px 0;
  z-index: 100;
  padding-top: 25px;
}

/* line 12, app/assets/stylesheets/spree/backend/admin.scss */
.admin-nav-footer a {
  color: white;
  display: flex;
  align-items: center;
  padding: 8px 15px;
  text-decoration: none;
  transition: background-color 0.2s;
}

/* line 20, app/assets/stylesheets/spree/backend/admin.scss */
.admin-nav-footer a:hover {
  background-color: #2a3a45;
  color: white;
}

/* line 25, app/assets/stylesheets/spree/backend/admin.scss */
.admin-nav-footer a i {
  margin-right: 10px;
  font-size: 14px;
}

/* line 30, app/assets/stylesheets/spree/backend/admin.scss */
.admin-nav-footer a span {
  font-size: 13px;
}

/* line 35, app/assets/stylesheets/spree/backend/admin.scss */
.admin-nav-footer .user-account-link {
  margin-bottom: 10px;
}

/* line 38, app/assets/stylesheets/spree/backend/admin.scss */
.admin-nav-footer .user-account-link a {
  font-weight: bold;
}

/* line 43, app/assets/stylesheets/spree/backend/admin.scss */
.admin-nav-footer .user-logout-link {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 5px;
  padding-top: 5px;
}
/* line 1, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.admin-nav-sticky {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  margin-bottom: 70px;
  /* Espacio para el footer */
}

/* line 9, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.admin-nav-menu {
  width: 250px;
  background: #1b2a47;
  height: 100vh;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 1000;
}

/* line 19, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.admin-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* line 24, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.admin-nav-list > li {
  position: relative;
}

/* line 27, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.admin-nav-list > li.selected {
  background-color: rgba(255, 255, 255, 0.05);
}

/* line 30, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.admin-nav-list > li.selected > a {
  color: #fff;
}

/* line 35, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.admin-nav-list > li > a {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  color: #a4b7c8;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* line 43, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.admin-nav-list > li > a:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.05);
}

/* line 48, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.admin-nav-list > li > a i {
  width: 20px;
  margin-right: 10px;
  text-align: center;
}

/* line 54, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.admin-nav-list > li > a span {
  font-size: 14px;
}

/* line 61, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.admin-subnav {
  display: none;
  background: #162238;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* line 68, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.selected > .admin-subnav {
  display: block;
}

/* line 73, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.admin-subnav li a {
  display: block;
  padding: 10px 20px 10px 50px;
  color: #a4b7c8;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.3s ease;
}

/* line 81, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.admin-subnav li a:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.05);
}

/* line 90, app/assets/stylesheets/spree/backend/components/_navigation.scss */
.admin-nav-fits {
  margin-left: 250px;
  min-height: 100vh;
  background: #f5f6fa;
  padding: 20px;
}
.admin-logo {
  background-color: #0F172A;
  padding: 10px;
}

.admin-logo img {
  height: 40px;
  width: auto;
}

/* Ocultar el logo de Solidus */
.logo-link {
  display: none !important;
}

.logo img {
  display: none !important;
} 

.chip {
  display: inline-block;
  padding: 0.25em 0.75em;
  border-radius: 16px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
}
.chip-discontinued {
  background: #b74a48;
}
.chip-active {
  background: #369d3c;
}
@charset "UTF-8";
/* line 1, app/assets/stylesheets/spree/frontend/_filters.scss */
.color-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  gap: 5px;
}

/* line 7, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  height: auto;
  max-height: 300px;
  overflow-y: auto;
}

/* line 16, app/assets/stylesheets/spree/frontend/_filters.scss */
.color-dot {
  width: 18px;
  height: 18px;
  border-radius: 25px;
  margin: 0 8px;
  border: none;
}

/* line 24, app/assets/stylesheets/spree/frontend/_filters.scss */
.size-input {
  height: 250px;
  width: 100%;
}

/* line 28, app/assets/stylesheets/spree/frontend/_filters.scss */
.size-input option {
  padding: 5px 0;
}

/* Estilo para píldoras de filtros activos */
/* line 33, app/assets/stylesheets/spree/frontend/_filters.scss */
.active-filters {
  margin: 0 0 1rem;
}

/* line 36, app/assets/stylesheets/spree/frontend/_filters.scss */
.active-filters .filter-pill {
  display: inline-flex;
  align-items: center;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}

/* line 46, app/assets/stylesheets/spree/frontend/_filters.scss */
.active-filters .filter-pill:hover {
  background-color: #e5e7eb;
}

/* line 50, app/assets/stylesheets/spree/frontend/_filters.scss */
.active-filters .filter-pill button {
  margin-left: 5px;
  font-size: 1rem;
  line-height: 1;
  color: #6b7280;
  transition: color 0.2s;
  cursor: pointer;
}

/* line 58, app/assets/stylesheets/spree/frontend/_filters.scss */
.active-filters .filter-pill button:hover {
  color: #ef4444;
}

/* Estilo para mensaje de no productos */
/* line 66, app/assets/stylesheets/spree/frontend/_filters.scss */
.no-products-found {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 3rem 2rem;
  text-align: center;
  border: 1px dashed #e5e7eb;
  margin: 1rem 0;
}

/* line 74, app/assets/stylesheets/spree/frontend/_filters.scss */
.no-products-found p:first-child {
  font-size: 1.25rem;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 0.5rem;
}

/* line 81, app/assets/stylesheets/spree/frontend/_filters.scss */
.no-products-found p:last-child {
  color: #6b7280;
  font-size: 0.875rem;
}

/* line 87, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0 10px;
}

/* line 93, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions button {
  background: var(--clr-brand-primary);
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

/* line 100, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions button:hover {
  background: var(--clr-brand-primary) -dark;
}

/* line 104, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters {
  background: #fff;
  color: var(--clr-brand-primary);
  border: 1px solid var(--clr-brand-primary);
}

/* line 108, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:hover {
  background: var(--clr-brand-primary);
  color: #fff;
}

/* line 113, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters {
  background: var(--clr-brand-primary);
  color: #fff;
  border: 1px solid var(--clr-brand-primary);
}

/* line 117, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:hover {
  background: var(--clr-brand-primary) -dark;
  color: #fff;
}

/* line 122, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled {
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
}

/* line 127, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled {
  background: #fff;
  color: #ccc;
  cursor: not-allowed;
}

/* line 132, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled:hover {
  background: #ccc;
  color: #fff;
}

/* line 136, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled:hover {
  background: #fff;
  color: #ccc;
}

/* line 140, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled {
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
}

/* line 145, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled {
  background: #fff;
  color: #ccc;
  cursor: not-allowed;
}

/* line 150, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled:hover {
  background: #ccc;
  color: #fff;
}

/* line 154, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled:hover {
  background: #fff;
  color: #ccc;
}

/* line 158, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled {
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
}

/* line 163, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled {
  background: #fff;
  color: #ccc;
  cursor: not-allowed;
}

/* line 168, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled:hover {
  background: #ccc;
  color: #fff;
}

/* line 172, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled:hover {
  background: #fff;
  color: #ccc;
}

/* line 176, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled {
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
}

/* line 181, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled {
  background: #fff;
  color: #ccc;
  cursor: not-allowed;
}

/* line 186, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled:hover {
  background: #ccc;
  color: #fff;
}

/* line 190, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled:hover {
  background: #fff;
  color: #ccc;
}

/* line 194, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled {
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
}

/* line 199, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled {
  background: #fff;
  color: #ccc;
  cursor: not-allowed;
}
/* line 1, app/assets/stylesheets/spree/frontend/_product.scss */
#product-images {
  gap: 20px;
}
/* line 1, app/assets/stylesheets/spree/frontend/_products.scss */
.container-search-products {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "search search" "filters products";
  gap: 20px;
  margin: 20px 0;
  padding: 20px;
}

@media only screen and (max-width: 768px) {
  /* line 13, app/assets/stylesheets/spree/frontend/_products.scss */
  .container-search-products {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "search" "products";
  }
}

/* line 21, app/assets/stylesheets/spree/frontend/_products.scss */
.product-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* line 27, app/assets/stylesheets/spree/frontend/_products.scss */
.product-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}

/* line 33, app/assets/stylesheets/spree/frontend/_products.scss */
.product-btn {
  margin-top: auto;
}
/*--------------------------------------*/
/* Colors
/*--------------------------------------*/
/* Spree green    */
/* Error red      */
/*--------------------------------------*/
/* Fonts import from remote
/*--------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
/*--------------------------------------*/
/* Font families
/*--------------------------------------*/
/*--------------------------------------
  | Font sizes
  |--------------------------------------
  |- Navigation                         
  |                                    */
/*|------------------------------------
  |- Product Listing                         
  |                                  */
/*|------------------------------------
  |- Product Details
  |                                  */
/*|------------------------------------
  |- Basic
  |                                  */
/*--------------------------------------*/
/* MIS VARIABLES
/*--------------------------------------*/
/* Spree green    */
/* Error red      */
/* line 75, app/assets/stylesheets/spree/frontend/_variables.scss */
* {
  --clr-brand-primary: #e45353;
  --clr-bg-white: #fff;
  --clr-gray-100: #f3f4f6;
  --clr-gray-200: #e5e7eb;
  --clr-gray-300: #d1d5db;
  --clr-gray-400: #9ca3af;
  --clr-gray-500: #6b7280;
  --clr-gray-600: #4b5563;
  --clr-gray-700: #374151;
  --clr-link: #5900df;
  --clr-link-hover: #4d00c5;
}
@charset "UTF-8";
/*--------------------------------------*/
/* Colors
/*--------------------------------------*/
/* Spree green    */
/* Error red      */
/*--------------------------------------*/
/* Fonts import from remote
/*--------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
/*--------------------------------------*/
/* Font families
/*--------------------------------------*/
/*--------------------------------------
  | Font sizes
  |--------------------------------------
  |- Navigation                         
  |                                    */
/*|------------------------------------
  |- Product Listing                         
  |                                  */
/*|------------------------------------
  |- Product Details
  |                                  */
/*|------------------------------------
  |- Basic
  |                                  */
/*--------------------------------------*/
/* MIS VARIABLES
/*--------------------------------------*/
/* Spree green    */
/* Error red      */
/* line 75, app/assets/stylesheets/spree/frontend/_variables.scss */
* {
  --clr-brand-primary: #e45353;
  --clr-bg-white: #fff;
  --clr-gray-100: #f3f4f6;
  --clr-gray-200: #e5e7eb;
  --clr-gray-300: #d1d5db;
  --clr-gray-400: #9ca3af;
  --clr-gray-500: #6b7280;
  --clr-gray-600: #4b5563;
  --clr-gray-700: #374151;
  --clr-link: #5900df;
  --clr-link-hover: #4d00c5;
}

/* line 1, app/assets/stylesheets/spree/frontend/_products.scss */
.container-search-products {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "search search" "filters products";
  gap: 20px;
  margin: 20px 0;
  padding: 20px;
}

@media only screen and (max-width: 768px) {
  /* line 13, app/assets/stylesheets/spree/frontend/_products.scss */
  .container-search-products {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "search" "products";
  }
}

/* line 21, app/assets/stylesheets/spree/frontend/_products.scss */
.product-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* line 27, app/assets/stylesheets/spree/frontend/_products.scss */
.product-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}

/* line 33, app/assets/stylesheets/spree/frontend/_products.scss */
.product-btn {
  margin-top: auto;
}

/* line 1, app/assets/stylesheets/spree/frontend/_filters.scss */
.color-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  gap: 5px;
}

/* line 7, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  height: auto;
  max-height: 300px;
  overflow-y: auto;
}

/* line 16, app/assets/stylesheets/spree/frontend/_filters.scss */
.color-dot {
  width: 18px;
  height: 18px;
  border-radius: 25px;
  margin: 0 8px;
  border: none;
}

/* line 24, app/assets/stylesheets/spree/frontend/_filters.scss */
.size-input {
  height: 250px;
  width: 100%;
}

/* line 28, app/assets/stylesheets/spree/frontend/_filters.scss */
.size-input option {
  padding: 5px 0;
}

/* Estilo para píldoras de filtros activos */
/* line 33, app/assets/stylesheets/spree/frontend/_filters.scss */
.active-filters {
  margin: 0 0 1rem;
}

/* line 36, app/assets/stylesheets/spree/frontend/_filters.scss */
.active-filters .filter-pill {
  display: inline-flex;
  align-items: center;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}

/* line 46, app/assets/stylesheets/spree/frontend/_filters.scss */
.active-filters .filter-pill:hover {
  background-color: #e5e7eb;
}

/* line 50, app/assets/stylesheets/spree/frontend/_filters.scss */
.active-filters .filter-pill button {
  margin-left: 5px;
  font-size: 1rem;
  line-height: 1;
  color: #6b7280;
  transition: color 0.2s;
  cursor: pointer;
}

/* line 58, app/assets/stylesheets/spree/frontend/_filters.scss */
.active-filters .filter-pill button:hover {
  color: #ef4444;
}

/* Estilo para mensaje de no productos */
/* line 66, app/assets/stylesheets/spree/frontend/_filters.scss */
.no-products-found {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 3rem 2rem;
  text-align: center;
  border: 1px dashed #e5e7eb;
  margin: 1rem 0;
}

/* line 74, app/assets/stylesheets/spree/frontend/_filters.scss */
.no-products-found p:first-child {
  font-size: 1.25rem;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 0.5rem;
}

/* line 81, app/assets/stylesheets/spree/frontend/_filters.scss */
.no-products-found p:last-child {
  color: #6b7280;
  font-size: 0.875rem;
}

/* line 87, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0 10px;
}

/* line 93, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions button {
  background: var(--clr-brand-primary);
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

/* line 100, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions button:hover {
  background: var(--clr-brand-primary) -dark;
}

/* line 104, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters {
  background: #fff;
  color: var(--clr-brand-primary);
  border: 1px solid var(--clr-brand-primary);
}

/* line 108, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:hover {
  background: var(--clr-brand-primary);
  color: #fff;
}

/* line 113, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters {
  background: var(--clr-brand-primary);
  color: #fff;
  border: 1px solid var(--clr-brand-primary);
}

/* line 117, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:hover {
  background: var(--clr-brand-primary) -dark;
  color: #fff;
}

/* line 122, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled {
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
}

/* line 127, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled {
  background: #fff;
  color: #ccc;
  cursor: not-allowed;
}

/* line 132, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled:hover {
  background: #ccc;
  color: #fff;
}

/* line 136, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled:hover {
  background: #fff;
  color: #ccc;
}

/* line 140, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled {
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
}

/* line 145, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled {
  background: #fff;
  color: #ccc;
  cursor: not-allowed;
}

/* line 150, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled:hover {
  background: #ccc;
  color: #fff;
}

/* line 154, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled:hover {
  background: #fff;
  color: #ccc;
}

/* line 158, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled {
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
}

/* line 163, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled {
  background: #fff;
  color: #ccc;
  cursor: not-allowed;
}

/* line 168, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled:hover {
  background: #ccc;
  color: #fff;
}

/* line 172, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled:hover {
  background: #fff;
  color: #ccc;
}

/* line 176, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled {
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
}

/* line 181, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled {
  background: #fff;
  color: #ccc;
  cursor: not-allowed;
}

/* line 186, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled:hover {
  background: #ccc;
  color: #fff;
}

/* line 190, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled:hover {
  background: #fff;
  color: #ccc;
}

/* line 194, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .apply-filters:disabled {
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
}

/* line 199, app/assets/stylesheets/spree/frontend/_filters.scss */
.filter-actions .clear-filters:disabled {
  background: #fff;
  color: #ccc;
  cursor: not-allowed;
}

/* Definiciones de variables CSS */
/* line 14, app/assets/stylesheets/spree/frontend/screen.css.scss */
:root {
  --clr-gray-100: #f8f9fa;
  --clr-bg-white: #ffffff;
  --clr-link: #df0000;
  --clr-link-hover: #aa0000;
  --clr-black: #171515;
  --clr-green: #19b219;
  --clr-green-light: #008000;
  --clr-green-dark: #006400;
  --clr-blue: #0000FF;
  --clr-blue-light: #b3b3e8;
  --clr-blue-dark: #000080;
  --clr-red: #FF0000;
  --clr-red-light: #FF0000;
  --clr-red-dark: #FF0000;
}

/* line 32, app/assets/stylesheets/spree/frontend/screen.css.scss */
body {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #404042;
  line-height: 18px;
  background-color: var(--clr-gray-100);
  -webkit-font-smoothing: antialiased;
}

/* line 42, app/assets/stylesheets/spree/frontend/screen.css.scss */
.mw-1280 {
  max-width: 1280px;
}

/* line 46, app/assets/stylesheets/spree/frontend/screen.css.scss */
.ushop-container {
  max-width: 1280px;
  margin: 30px auto 10px auto;
}

/* line 51, app/assets/stylesheets/spree/frontend/screen.css.scss */
.bg-green {
  background-color: var(--clr-green);
}

/* line 54, app/assets/stylesheets/spree/frontend/screen.css.scss */
.direct-category {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 60, app/assets/stylesheets/spree/frontend/screen.css.scss */
.box-shadow {
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 2px 0px;
}

/* line 64, app/assets/stylesheets/spree/frontend/screen.css.scss */
.bg-white {
  background-color: var(--clr-bg-white);
}

/* line 68, app/assets/stylesheets/spree/frontend/screen.css.scss */
.pg-20 {
  padding: 20px;
}

/* line 72, app/assets/stylesheets/spree/frontend/screen.css.scss */
.py-2 {
  padding: 4px;
}

/* line 76, app/assets/stylesheets/spree/frontend/screen.css.scss */
.bg-none {
  background-color: transparent !important;
}

/* line 80, app/assets/stylesheets/spree/frontend/screen.css.scss */
.favourite-products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* line 87, app/assets/stylesheets/spree/frontend/screen.css.scss */
.swiper-pagination {
  position: relative !important;
  bottom: 0 !important;
  width: auto !important;
}

/* line 93, app/assets/stylesheets/spree/frontend/screen.css.scss */
.product-image img {
  width: 100%;
}

/* line 97, app/assets/stylesheets/spree/frontend/screen.css.scss */
.home-card {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 20px !important;
  background-color: var(--clr-bg-white) !important;
  border-radius: 10px !important;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 2px 0px !important;
  overflow: hidden !important;
}

/* line 109, app/assets/stylesheets/spree/frontend/screen.css.scss */
.home-card a {
  width: clamp(100px, 50%, 300px);
  height: 100%;
}

/* line 114, app/assets/stylesheets/spree/frontend/screen.css.scss */
.home-card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* line 119, app/assets/stylesheets/spree/frontend/screen.css.scss */
.card-content {
  padding: 16px 10px;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
}

/* line 130, app/assets/stylesheets/spree/frontend/screen.css.scss */
.card-content h4 {
  padding: 0 10% 0 0;
  line-height: 1.3;
}

/* line 135, app/assets/stylesheets/spree/frontend/screen.css.scss */
.card-content p {
  font-size: .9rem;
  font-weight: 400;
  padding: 0 10% 0 0;
}

/* line 141, app/assets/stylesheets/spree/frontend/screen.css.scss */
.card-content a {
  font-size: .9rem;
  font-weight: 400;
  margin-top: auto;
  padding: 10px 0 10px 0;
  height: auto !important;
}

/* Line style */
/* line 149, app/assets/stylesheets/spree/frontend/screen.css.scss */
hr {
  height: 0;
  background-color: transparent;
  color: transparent;
  border: none;
  border-bottom: 1px solid #d9d9db;
}

/* line 157, app/assets/stylesheets/spree/frontend/screen.css.scss */
ins {
  background-color: #df0000;
  color: #FFFFFF;
  text-decoration: none;
}

/* line 162, app/assets/stylesheets/spree/frontend/screen.css.scss */
mark {
  background-color: #df0000;
  color: #FFFFFF;
  font-style: italic;
  font-weight: bold;
}

/*--------------------------------------*/
/* Links
/*--------------------------------------*/
/* line 172, app/assets/stylesheets/spree/frontend/screen.css.scss */
a {
  text-decoration: none;
}

/*--------------------------------------*/
/* Lists
/*--------------------------------------*/
/* line 179, app/assets/stylesheets/spree/frontend/screen.css.scss */
ul,
ol {
  margin-left: 0;
  margin-top: 0;
  -webkit-padding-start: 0px;
  padding-left: 0;
  list-style-position: inside;
}

/* line 188, app/assets/stylesheets/spree/frontend/screen.css.scss */
ul.inline li,
ol.inline li {
  display: inline-block;
}

/* line 195, app/assets/stylesheets/spree/frontend/screen.css.scss */
dl dt,
dl dd {
  display: inline-block;
  width: 50%;
  padding: 5px;
}

/* line 202, app/assets/stylesheets/spree/frontend/screen.css.scss */
dl dt {
  font-weight: bold;
  text-transform: uppercase;
}

/* line 206, app/assets/stylesheets/spree/frontend/screen.css.scss */
dl dd {
  margin-left: -23px;
}

/*--------------------------------------*/
/* Headers
/*--------------------------------------*/
/* line 214, app/assets/stylesheets/spree/frontend/screen.css.scss */
h1 {
  font-size: 24px;
  line-height: 34px;
}

/* line 218, app/assets/stylesheets/spree/frontend/screen.css.scss */
h3 {
  font-size: 20px;
  line-height: 30px;
}

/* line 222, app/assets/stylesheets/spree/frontend/screen.css.scss */
h4 {
  font-size: 18px;
  line-height: 28px;
}

/* line 226, app/assets/stylesheets/spree/frontend/screen.css.scss */
h5 {
  font-size: 14px;
  line-height: 24px;
}

/* line 230, app/assets/stylesheets/spree/frontend/screen.css.scss */
h6 {
  font-size: 12px;
  line-height: 22px;
}

/* line 235, app/assets/stylesheets/spree/frontend/screen.css.scss */
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/*--------------------------------------*/
/* Forms
/*--------------------------------------*/
/* line 250, app/assets/stylesheets/spree/frontend/screen.css.scss */
textarea,
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='time'],
input[type='url'],
input[type='week'] {
  border: 1px solid #d9d9db;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  box-sizing: border-box;
}

/* line 271, app/assets/stylesheets/spree/frontend/screen.css.scss */
textarea:active, textarea:focus,
input[type='date']:active,
input[type='date']:focus,
input[type='datetime']:active,
input[type='datetime']:focus,
input[type='datetime-local']:active,
input[type='datetime-local']:focus,
input[type='email']:active,
input[type='email']:focus,
input[type='month']:active,
input[type='month']:focus,
input[type='number']:active,
input[type='number']:focus,
input[type='password']:active,
input[type='password']:focus,
input[type='search']:active,
input[type='search']:focus,
input[type='tel']:active,
input[type='tel']:focus,
input[type='text']:active,
input[type='text']:focus,
input[type='time']:active,
input[type='time']:focus,
input[type='url']:active,
input[type='url']:focus,
input[type='week']:active,
input[type='week']:focus {
  border: 2px solid var(--clr-link);
  outline: none;
  -o-box-shadow: none;
  box-shadow: none;
}

/* line 281, app/assets/stylesheets/spree/frontend/screen.css.scss */
textarea.error,
input.error[type='date'],
input.error[type='datetime'],
input.error[type='datetime-local'],
input.error[type='email'],
input.error[type='month'],
input.error[type='number'],
input.error[type='password'],
input.error[type='search'],
input.error[type='tel'],
input.error[type='text'],
input.error[type='time'],
input.error[type='url'],
input.error[type='week'] {
  border-color: #e45353;
}

/* line 285, app/assets/stylesheets/spree/frontend/screen.css.scss */
textarea.custom-search-products,
input.custom-search-products[type='date'],
input.custom-search-products[type='datetime'],
input.custom-search-products[type='datetime-local'],
input.custom-search-products[type='email'],
input.custom-search-products[type='month'],
input.custom-search-products[type='number'],
input.custom-search-products[type='password'],
input.custom-search-products[type='search'],
input.custom-search-products[type='tel'],
input.custom-search-products[type='text'],
input.custom-search-products[type='time'],
input.custom-search-products[type='url'],
input.custom-search-products[type='week'] {
  background: transparent;
  background-image: url("https://www.freeiconspng.com/thumbs/magnifying-glass-icon/magnifying-glass-icon-13.png");
  background-size: 18px;
  background-repeat: no-repeat;
  background-position-x: 97%;
  background-position-y: 8px;
  border: 1px solid #dfdfdf;
}

/* line 296, app/assets/stylesheets/spree/frontend/screen.css.scss */
label.error {
  display: block;
  font-size: 11px;
  color: #e45353;
  margin-top: 3px;
}

/* line 303, app/assets/stylesheets/spree/frontend/screen.css.scss */
.field {
  padding: 10px 0;
}

/* line 306, app/assets/stylesheets/spree/frontend/screen.css.scss */
.field label {
  display: inline-block;
  margin-bottom: 5px;
}

/* line 311, app/assets/stylesheets/spree/frontend/screen.css.scss */
.field input,
.field select {
  display: block;
}

/* line 316, app/assets/stylesheets/spree/frontend/screen.css.scss */
.field-required label:after {
  content: '*';
  display: inline-block;
  color: #e45353;
  font-weight: bold;
  font-size: 1.2em;
  margin-left: 3px;
}

/* line 326, app/assets/stylesheets/spree/frontend/screen.css.scss */
fieldset {
  margin: 0;
  min-width: 100%;
  box-sizing: border-box;
}

/* line 335, app/assets/stylesheets/spree/frontend/screen.css.scss */
a.secondary-button {
  color: #df0000;
  background-color: white;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
  border-radius: 20px;
  margin-left: 0;
  margin-right: 4px;
  border: 1px solid #df0000;
}

/* line 346, app/assets/stylesheets/spree/frontend/screen.css.scss */
a.secondary-button:hover {
  background-color: #f2f2f2;
  color: #df0000;
}

/* line 351, app/assets/stylesheets/spree/frontend/screen.css.scss */
a.secondary-button.large {
  padding: 7px 10px;
  font-size: 14px;
}

/* line 357, app/assets/stylesheets/spree/frontend/screen.css.scss */
input[type='submit'],
input[type='button'],
input[type='reset'],
button,
a.button {
  background-color: #df0000;
  border-color: #df0000;
  border-radius: 6px;
  padding: 12px 20px;
  color: white;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  cursor: pointer;
  height: 48px;
}

/* line 388, app/assets/stylesheets/spree/frontend/screen.css.scss */
input.large[type='submit'],
input.large[type='button'],
input.large[type='reset'],
button.large,
a.button.large {
  padding: 7px 10px;
  font-size: 14px;
}

/* line 393, app/assets/stylesheets/spree/frontend/screen.css.scss */
input.gray[type='submit'],
input.gray[type='button'],
input.gray[type='reset'],
button.gray,
a.button.gray {
  background-color: #727276;
  border-color: #59595c;
}

/* line 398, app/assets/stylesheets/spree/frontend/screen.css.scss */
input[type='submit']:hover,
input[type='button']:hover,
input[type='reset']:hover,
button:hover,
a.button:hover {
  background-image: none;
  background-color: #404042;
  border-color: #404042;
  color: #FFFFFF;
}

/* line 407, app/assets/stylesheets/spree/frontend/screen.css.scss */
.ie8 a.button {
  line-height: 16px;
}

/* line 415, app/assets/stylesheets/spree/frontend/screen.css.scss */
input.disabled[type='button'],
input.disabled[type='submit'],
button.disabled {
  background: #ccc;
  border-color: #ccc;
  text-shadow: none;
}

/* line 422, app/assets/stylesheets/spree/frontend/screen.css.scss */
input[type='checkbox'],
label {
  vertical-align: middle;
}

/* line 427, app/assets/stylesheets/spree/frontend/screen.css.scss */
a.button,
a.secondary-button {
  display: inline-block;
  line-height: 15px;
  margin-top: -2px;
  vertical-align: bottom;
}

/* line 435, app/assets/stylesheets/spree/frontend/screen.css.scss */
fieldset {
  border: 0 !important;
  padding: 0;
  margin: 0;
}

/* line 441, app/assets/stylesheets/spree/frontend/screen.css.scss */
.search-input {
  padding: 22px 15px;
}

/*--------------------------------------*/
/* Footer
/*--------------------------------------*/
/* line 447, app/assets/stylesheets/spree/frontend/screen.css.scss */
footer#footer {
  padding: 10px 0;
  border-top: 1px solid #d9d9db;
}

/*--------------------------------------*/
/* Paragraphs
/*--------------------------------------*/
/* line 455, app/assets/stylesheets/spree/frontend/screen.css.scss */
p {
  padding: 10px 0;
}

/*--------------------------------------*/
/* Tables
/*--------------------------------------*/
/* line 463, app/assets/stylesheets/spree/frontend/screen.css.scss */
table thead {
  background-color: #d9d9db;
  text-transform: uppercase;
}

/* line 468, app/assets/stylesheets/spree/frontend/screen.css.scss */
table thead tr th {
  padding: 5px 10px;
}

/* line 476, app/assets/stylesheets/spree/frontend/screen.css.scss */
table tbody tr,
table tfoot tr {
  border-bottom: 1px solid #d9d9db;
}

/* line 479, app/assets/stylesheets/spree/frontend/screen.css.scss */
table tbody tr td,
table tfoot tr td {
  vertical-align: middle;
  padding: 5px 10px;
}

/* line 484, app/assets/stylesheets/spree/frontend/screen.css.scss */
table tbody tr.alt, table tbody tr.odd,
table tfoot tr.alt,
table tfoot tr.odd {
  background-color: #e3e3e3;
}

/* line 493, app/assets/stylesheets/spree/frontend/screen.css.scss */
#breadcrumbs {
  border-bottom: 1px solid #d9d9db;
  padding: 3px 0;
  margin-bottom: 15px;
}

/* line 499, app/assets/stylesheets/spree/frontend/screen.css.scss */
#breadcrumbs li a {
  color: #df0000;
}

/* line 502, app/assets/stylesheets/spree/frontend/screen.css.scss */
#breadcrumbs li span {
  text-transform: uppercase;
  font-weight: bold;
}

/*--------------------------------------*/
/* Flash notices & errors
/*--------------------------------------*/
/* line 512, app/assets/stylesheets/spree/frontend/screen.css.scss */
.flash, .errorExplanation {
  padding: 10px;
  color: var(--clr-blue-light);
  font-weight: bold;
}

/* line 517, app/assets/stylesheets/spree/frontend/screen.css.scss */
.flash.notice, .notice.errorExplanation {
  background-color: var(--clr-blue);
}

/* line 520, app/assets/stylesheets/spree/frontend/screen.css.scss */
.flash.success, .success.errorExplanation {
  background-color: #8dba53;
}

/* line 523, app/assets/stylesheets/spree/frontend/screen.css.scss */
.flash.error, .error.errorExplanation {
  background-color: #e45353;
}

/* line 528, app/assets/stylesheets/spree/frontend/screen.css.scss */
.errorExplanation {
  background-color: #e45353;
}

/* line 532, app/assets/stylesheets/spree/frontend/screen.css.scss */
.errorExplanation p {
  font-weight: normal;
}

/* line 536, app/assets/stylesheets/spree/frontend/screen.css.scss */
.errorExplanation ul {
  list-style: disc outside;
  margin-left: 30px;
}

/* line 540, app/assets/stylesheets/spree/frontend/screen.css.scss */
.errorExplanation ul li {
  font-weight: normal;
}

/*--------------------------------------*/
/* Main search bar
/*--------------------------------------*/
/* line 549, app/assets/stylesheets/spree/frontend/screen.css.scss */
#search-bar {
  display: block;
}

/*--------------------------------------*/
/* Products
/*--------------------------------------*/
/* line 557, app/assets/stylesheets/spree/frontend/screen.css.scss */
[data-hook='product_show'] h6 {
  font-size: 14px;
}

/* line 562, app/assets/stylesheets/spree/frontend/screen.css.scss */
.product-section-title {
  text-transform: uppercase;
  margin-top: 45px;
  margin-bottom: 50px;
}

/* line 568, app/assets/stylesheets/spree/frontend/screen.css.scss */
.add-to-cart {
  margin-top: 15px;
}

/* line 571, app/assets/stylesheets/spree/frontend/screen.css.scss */
.add-to-cart input[type='number'] {
  margin-right: 3px;
}

/* line 576, app/assets/stylesheets/spree/frontend/screen.css.scss */
div[data-hook='inside_cart_form'] #subtotal span.order-total, table#cart-detail tbody#line_items tr td[data-hook='cart_item_price'],
table#cart-detail tbody#line_items tr td[data-hook='cart_item_total'], #order_details td.price span,
#order_details td.total span,
#order_summary td.price span,
#order_summary td.total span, #checkout-summary table #summary-order-total, #checkout-summary table tr[data-hook='item_total'] td:last-child strong, span.price {
  font-weight: bold;
  color: #252525;
}

/* line 584, app/assets/stylesheets/spree/frontend/screen.css.scss */
span.price.selling {
  font-size: 20px;
  padding: 0px 0px 0px 10px;
}

/* line 589, app/assets/stylesheets/spree/frontend/screen.css.scss */
span.price.diff {
  font-weight: bold;
}

/* line 594, app/assets/stylesheets/spree/frontend/screen.css.scss */
.taxon-title {
  font-size: 20px;
}

/* line 598, app/assets/stylesheets/spree/frontend/screen.css.scss */
.search-results-title {
  font-size: 14px;
}

/* line 602, app/assets/stylesheets/spree/frontend/screen.css.scss */
.subtaxon-title {
  text-transform: uppercase;
}

/* line 605, app/assets/stylesheets/spree/frontend/screen.css.scss */
.subtaxon-title a {
  color: #df0000;
}

/* line 610, app/assets/stylesheets/spree/frontend/screen.css.scss */
.search-results-title {
  text-transform: uppercase;
  border-bottom: 1px solid #d9d9db;
}

/* line 616, app/assets/stylesheets/spree/frontend/screen.css.scss */
#sidebar_products_search .navigation {
  margin-bottom: 15px;
}

/* line 620, app/assets/stylesheets/spree/frontend/screen.css.scss */
#sidebar_products_search .filter-title {
  display: block;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px solid #ededed;
  margin-bottom: 5px;
  color: #df0000;
  font-size: 14px;
  line-height: 24px;
}

/* line 632, app/assets/stylesheets/spree/frontend/screen.css.scss */
.taxon {
  overflow: hidden;
}

/* line 637, app/assets/stylesheets/spree/frontend/screen.css.scss */
#product-description .product-title {
  border-bottom: 1px solid #d9d9db;
  margin-bottom: 15px;
  font-size: 16px;
  margin-top: 30px;
  font-weight: 900;
  text-transform: uppercase;
}

/* line 647, app/assets/stylesheets/spree/frontend/screen.css.scss */
#product-description [data-hook='product-description'] {
  font-size: 12px;
  color: #404042;
}

/* line 653, app/assets/stylesheets/spree/frontend/screen.css.scss */
#product-thumbnails {
  margin-top: 10px;
}

/* line 656, app/assets/stylesheets/spree/frontend/screen.css.scss */
#product-thumbnails li {
  margin-right: 6px;
  border: 1px solid #d9d9db;
}

/* line 660, app/assets/stylesheets/spree/frontend/screen.css.scss */
#product-thumbnails li img {
  padding: 5px;
}

/* line 664, app/assets/stylesheets/spree/frontend/screen.css.scss */
#product-thumbnails li:hover, #product-thumbnails li.selected {
  border-color: #df0000;
}

/* line 671, app/assets/stylesheets/spree/frontend/screen.css.scss */
#product-properties {
  border: 1px solid #d9d9db;
  padding: 10px;
  width: 100%;
}

/* line 679, app/assets/stylesheets/spree/frontend/screen.css.scss */
#product-variants ul li {
  padding: 5px;
}

/* line 686, app/assets/stylesheets/spree/frontend/screen.css.scss */
#cart-form #inside-product-cart-form:after {
  content: ' ';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

/* line 696, app/assets/stylesheets/spree/frontend/screen.css.scss */
#empty-cart-button {
  border: none;
  background-color: lightgray;
  padding: 10px;
  color: #df0000;
}

/* line 701, app/assets/stylesheets/spree/frontend/screen.css.scss */
#empty-cart-button:hover {
  text-decoration: underline;
}

/*--------------------------------------*/
/* Checkout
/*--------------------------------------*/
/* line 709, app/assets/stylesheets/spree/frontend/screen.css.scss */
.checkout_form_wrapper {
  text-align: left;
}

/* line 713, app/assets/stylesheets/spree/frontend/screen.css.scss */
.out-of-stock {
  background: #df0000;
  color: white;
  padding: 5px;
  padding-right: 10px;
  font-weight: bold;
}

/* line 721, app/assets/stylesheets/spree/frontend/screen.css.scss */
.progress-steps {
  list-style: decimal inside;
  overflow: auto;
}

/* line 725, app/assets/stylesheets/spree/frontend/screen.css.scss */
.progress-steps li {
  float: left;
  margin-right: 20px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 5px 20px;
  color: #727276;
}

/* line 733, app/assets/stylesheets/spree/frontend/screen.css.scss */
.progress-steps li.current-first, .progress-steps li.current {
  background-color: #df0000;
  color: #FFFFFF;
}

/* line 739, app/assets/stylesheets/spree/frontend/screen.css.scss */
.progress-steps li.completed-first, .progress-steps li.completed {
  background-color: #d9d9db;
  color: #FFFFFF;
}

/* line 744, app/assets/stylesheets/spree/frontend/screen.css.scss */
.progress-steps li.completed-first a, .progress-steps li.completed a {
  color: #FFFFFF;
}

/* line 748, app/assets/stylesheets/spree/frontend/screen.css.scss */
.progress-steps li.completed-first:hover, .progress-steps li.completed:hover {
  background-color: #df0000;
  color: #FFFFFF;
}

/* line 752, app/assets/stylesheets/spree/frontend/screen.css.scss */
.progress-steps li.completed-first:hover a, .progress-steps li.completed:hover a {
  color: #FFFFFF;
}

/* line 755, app/assets/stylesheets/spree/frontend/screen.css.scss */
.progress-steps li.completed-first:hover a:hover, .progress-steps li.completed:hover a:hover {
  color: #FFFFFF;
}

/* line 764, app/assets/stylesheets/spree/frontend/screen.css.scss */
#payment-methods {
  list-style: none;
}

/* line 768, app/assets/stylesheets/spree/frontend/screen.css.scss */
#payment-methods li fieldset {
  border: none;
  padding: 0;
}

/* line 775, app/assets/stylesheets/spree/frontend/screen.css.scss */
#checkout-summary {
  text-align: center;
  border: 1px solid #d9d9db;
  margin-top: 23px;
  margin-left: 0;
}

/* line 781, app/assets/stylesheets/spree/frontend/screen.css.scss */
#checkout-summary h3 {
  text-transform: uppercase;
  font-size: 14px;
  border-bottom: 1px solid #d9d9db;
}

/* line 787, app/assets/stylesheets/spree/frontend/screen.css.scss */
#checkout-summary table {
  width: 100%;
}

/* line 798, app/assets/stylesheets/spree/frontend/screen.css.scss */
#checkout-summary table tr[data-hook='order_total'] {
  border-bottom: none;
}

/* line 802, app/assets/stylesheets/spree/frontend/screen.css.scss */
#checkout-summary table #summary-order-total {
  font-size: 14px;
}

/* line 809, app/assets/stylesheets/spree/frontend/screen.css.scss */
#billing,
#shipping,
#shipping_method,
#payment,
#order_details,
#order_summary {
  margin-top: 10px;
  border: 1px solid #d9d9db;
  padding: 10px;
}

/* line 819, app/assets/stylesheets/spree/frontend/screen.css.scss */
#billing legend,
#shipping legend,
#shipping_method legend,
#payment legend,
#order_details legend,
#order_summary legend {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  color: #df0000;
  padding: 5px;
  margin-left: 15px;
}

/* line 831, app/assets/stylesheets/spree/frontend/screen.css.scss */
#billing input[type='text'],
#billing input[type='email'],
#billing input[type='tel'],
#billing input[type='number'],
#billing select,
#billing textarea,
#shipping input[type='text'],
#shipping input[type='email'],
#shipping input[type='tel'],
#shipping input[type='number'],
#shipping select,
#shipping textarea {
  width: 100%;
}

/* line 841, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order_details,
#order_summary {
  padding: 0;
}

/* line 845, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order_details div:last-child,
#order_summary div:last-child {
  margin-left: -1px;
}

/* line 851, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order_details .payment-info .cc-type img,
#order_summary .payment-info .cc-type img {
  vertical-align: middle;
}

/* line 864, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order_details table tfoot,
#order_summary table tfoot {
  text-align: right;
  color: #727276;
}

/* line 868, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order_details table tfoot tr,
#order_summary table tfoot tr {
  border: none;
}

/* line 872, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order_details table tfoot#order-total,
#order_summary table tfoot#order-total {
  text-transform: uppercase;
  font-size: 16px;
  color: #404042;
}

/* line 877, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order_details table tfoot#order-total tr,
#order_summary table tfoot#order-total tr {
  border-top: 1px solid #d9d9db;
}

/* line 880, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order_details table tfoot#order-total tr td,
#order_summary table tfoot#order-total tr td {
  padding: 10px;
}

/* line 886, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order_details table tfoot#subtotal,
#order_summary table tfoot#subtotal {
  text-transform: uppercase;
  font-size: 16px;
  color: #404042;
}

/* line 894, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order_details .steps-data div.columns,
#order_summary .steps-data div.columns {
  padding: 5px;
  margin: 0;
}

/* line 898, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order_details .steps-data div.columns:first-child,
#order_summary .steps-data div.columns:first-child {
  margin-left: 10px;
}

/* line 903, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order_details .steps-data h6,
#order_summary .steps-data h6 {
  border-bottom: 1px solid #d9d9db;
  margin-bottom: 5px;
}

/* line 912, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method p#minstrs {
  clear: both;
}

/* line 915, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method p#minstrs label {
  width: 100%;
}

/* line 920, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method p label {
  float: left;
  font-weight: bold;
  font-size: 14px;
  margin-right: 40px;
  padding: 5px;
}

/* line 929, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method .shipment {
  margin-bottom: 30px;
}

/* line 933, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method .stock-shipping-method-title {
  background-color: #f3f3f4;
  text-align: center;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 11px;
}

/* line 941, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method .stock-location {
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: normal;
  background-color: #df0000;
  color: white;
}

/* line 951, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method .unshippable .stock-location {
  background-color: #e45353;
}

/* line 956, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method .shipping-methods {
  list-style: none;
  margin: 0;
  padding: 10px 0;
}

/* line 961, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method .shipping-methods .shipping-method {
  display: inline-block;
  margin: 5px 10px 5px 0;
}

/* line 965, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method .shipping-methods .shipping-method label {
  font-weight: bold;
}

/* line 968, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method .shipping-methods .shipping-method label .rate-cost {
  color: #df0000;
}

/* line 976, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method table.stock-contents thead {
  background-color: #f3f3f4;
}

/* line 979, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method table.stock-contents thead th {
  font-size: 11px;
  font-weight: normal;
}

/* line 986, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method table.stock-contents tbody tr td {
  text-align: center;
}

/* line 989, app/assets/stylesheets/spree/frontend/screen.css.scss */
#shipping_method table.stock-contents tbody tr td.item-name {
  text-align: left;
}

/* line 998, app/assets/stylesheets/spree/frontend/screen.css.scss */
p[data-hook='use_billing'] {
  float: right;
  margin-top: -18px;
  background-color: #FFFFFF;
  padding: 5px;
}

/* line 1005, app/assets/stylesheets/spree/frontend/screen.css.scss */
.coupon-code {
  margin-top: 20px;
  padding: 10px;
}

/* line 1009, app/assets/stylesheets/spree/frontend/screen.css.scss */
.coupon-code form {
  display: flex;
  flex-flow: row wrap;
}

/* line 1014, app/assets/stylesheets/spree/frontend/screen.css.scss */
.coupon-code label {
  flex: 1 100%;
  text-align: left;
}

/* line 1019, app/assets/stylesheets/spree/frontend/screen.css.scss */
.coupon-code input[type='text'] {
  flex: 1 auto;
  width: 50%;
  margin-right: 5px;
}

/* line 1025, app/assets/stylesheets/spree/frontend/screen.css.scss */
.coupon-code-apply-button {
  white-space: nowrap;
}

/* line 1030, app/assets/stylesheets/spree/frontend/screen.css.scss */
#coupon_status {
  margin-top: 10px;
  font-weight: bold;
  font-size: 100%;
}

/* line 1034, app/assets/stylesheets/spree/frontend/screen.css.scss */
#coupon_status.success {
  color: #8dba53;
}

/* line 1037, app/assets/stylesheets/spree/frontend/screen.css.scss */
#coupon_status.error, #coupon_status.alert {
  color: #e45353;
}

/* line 1044, app/assets/stylesheets/spree/frontend/screen.css.scss */
.terms_and_conditions .policy {
  height: 100px;
  width: 100%;
  overflow: scroll;
}

/*--------------------------------------*/
/* Cart
/*--------------------------------------*/
/* line 1054, app/assets/stylesheets/spree/frontend/screen.css.scss */
table#cart-detail {
  width: 100%;
  border-collapse: separate;
}

/* line 1060, app/assets/stylesheets/spree/frontend/screen.css.scss */
table#cart-detail tbody#line_items tr td[data-hook='cart_item_price'],
table#cart-detail tbody#line_items tr td[data-hook='cart_item_total'] {
  font-size: 20px;
}

/* line 1066, app/assets/stylesheets/spree/frontend/screen.css.scss */
table#cart-detail tbody#line_items tr td[data-hook='cart_item_quantity'] .line_item_quantity {
  width: 65px;
}

/* line 1071, app/assets/stylesheets/spree/frontend/screen.css.scss */
table#cart-detail tbody#line_items tr td[data-hook='cart_item_delete'] .delete {
  display: block;
  width: 20px;
}

/* line 1081, app/assets/stylesheets/spree/frontend/screen.css.scss */
div[data-hook='inside_cart_form'] .links {
  margin-top: 15px;
  text-align: right;
}

/* line 1086, app/assets/stylesheets/spree/frontend/screen.css.scss */
div[data-hook='inside_cart_form'] #subtotal {
  text-align: right;
  text-transform: uppercase;
  margin-top: 15px;
}

/* line 1097, app/assets/stylesheets/spree/frontend/screen.css.scss */
#empty-cart {
  margin-top: -50px;
  float: left;
}

/* line 1102, app/assets/stylesheets/spree/frontend/screen.css.scss */
.cart-subtotal,
.cart-total {
  background: #00ADEE;
}

/* line 1106, app/assets/stylesheets/spree/frontend/screen.css.scss */
.cart-subtotal td h5,
.cart-total td h5 {
  color: #FFFFFF;
}

/* line 1111, app/assets/stylesheets/spree/frontend/screen.css.scss */
.adjustment:nth-child(even) {
  background: #eaeaea;
}

/*--------------------------------------*/
/* Account
/*--------------------------------------*/
/* line 1121, app/assets/stylesheets/spree/frontend/screen.css.scss */
#existing-customer h6,
#new-customer h6,
#forgot-password h6 {
  text-transform: uppercase;
}

/* line 1127, app/assets/stylesheets/spree/frontend/screen.css.scss */
#registration h6 {
  text-transform: uppercase;
}

/* line 1131, app/assets/stylesheets/spree/frontend/screen.css.scss */
#registration #existing-customer {
  width: auto;
  text-align: left;
}

/* line 1138, app/assets/stylesheets/spree/frontend/screen.css.scss */
#existing-customer {
  background: #FFFFFF;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  width: 400px;
  margin: 40px auto;
  text-align: center;
}

/* line 1149, app/assets/stylesheets/spree/frontend/screen.css.scss */
#user-info {
  margin-bottom: 15px;
  border: 1px solid #d9d9db;
  padding: 10px;
}

/* line 1154, app/assets/stylesheets/spree/frontend/screen.css.scss */
#user-info dd {
  margin-left: 0px;
}

/*--------------------------------------*/
/* Order
/*--------------------------------------*/
/* line 1162, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order_summary {
  margin-top: 0;
}

/* line 1164, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order_summary h1 {
  padding-left: 10px;
}

/* line 1169, app/assets/stylesheets/spree/frontend/screen.css.scss */
#order p[data-hook='links'] {
  margin-left: 10px;
  overflow: auto;
}

/* line 1178, app/assets/stylesheets/spree/frontend/screen.css.scss */
table.order-summary tbody tr td {
  width: 10%;
  text-align: center;
}

/* line 1183, app/assets/stylesheets/spree/frontend/screen.css.scss */
table.order-summary tbody tr td:first-child a {
  text-transform: uppercase;
  font-weight: bold;
  color: #df0000;
}

/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  /* line 1207, app/assets/stylesheets/spree/frontend/screen.css.scss */
  footer#footer {
    width: 748px;
  }
  /* line 1210, app/assets/stylesheets/spree/frontend/screen.css.scss */
  p[data-hook='use_billing'] {
    margin-top: -15px;
  }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
  /* line 1217, app/assets/stylesheets/spree/frontend/screen.css.scss */
  html {
    -webkit-text-size-adjust: none;
  }
  /* line 1221, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #order_details .steps-data div.columns,
#order_summary .steps-data div.columns {
    padding: 0;
    margin: 0;
  }
  /* line 1226, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #order_details .steps-data div.columns:first-child,
#order_summary .steps-data div.columns:first-child {
    margin: 0;
  }
  /* line 1231, app/assets/stylesheets/spree/frontend/screen.css.scss */
  nav#taxonomies {
    text-align: center;
  }
  /* line 1234, app/assets/stylesheets/spree/frontend/screen.css.scss */
  nav#taxonomies ul {
    padding-left: 0;
    list-style: none;
  }
  /* line 1240, app/assets/stylesheets/spree/frontend/screen.css.scss */
  ul#nav-bar {
    text-align: center;
  }
  /* line 1244, app/assets/stylesheets/spree/frontend/screen.css.scss */
  .steps-data div.columns {
    margin-bottom: 15px;
    text-align: center;
  }
  /* line 1251, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #order_details table[data-hook='order_details'],
#order table[data-hook='order_details'] {
    width: 100%;
  }
  /* line 1257, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #update-cart #subtotal,
#update-cart .links {
    width: 50%;
    float: left;
    text-align: left;
  }
  /* line 1263, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #update-cart #subtotal {
    text-align: right;
  }
}

/* line 1269, app/assets/stylesheets/spree/frontend/screen.css.scss */
.container {
  min-height: 50vh;
}

/* line 1272, app/assets/stylesheets/spree/frontend/screen.css.scss */
.container-homepage {
  margin: 0;
  width: 100%;
}

/* line 1278, app/assets/stylesheets/spree/frontend/screen.css.scss */
.homepage-card {
  background: #FFFFFF;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  width: 400px;
  margin: 40px auto;
  text-align: center;
}

/* line 1289, app/assets/stylesheets/spree/frontend/screen.css.scss */
input[type='radio'] {
  display: inline-block;
  border-radius: 5px;
  height: 15px;
}

/* line 1295, app/assets/stylesheets/spree/frontend/screen.css.scss */
input {
  display: inline-block;
  border-radius: 5px;
  height: 35px;
}

/* line 1301, app/assets/stylesheets/spree/frontend/screen.css.scss */
select {
  display: inline-block;
  border-radius: 5px;
  height: 35px;
  padding-left: 10px;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: center;
  border: 1px solid #dfdfdf;
  padding-right: 25px;
  /* Some browsers will not display the caret when using calc, so we put the fallback first */
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  /* line 1325, app/assets/stylesheets/spree/frontend/screen.css.scss */
  footer#footer {
    width: auto;
  }
  /* line 1329, app/assets/stylesheets/spree/frontend/screen.css.scss */
  input,
select {
    vertical-align: baseline;
  }
  /* line 1334, app/assets/stylesheets/spree/frontend/screen.css.scss */
  figure#logo {
    text-align: center;
  }
  /* line 1338, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #link-to-login {
    display: block;
    text-align: center;
  }
  /* line 1343, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #search-bar {
    display: block;
    text-align: center;
  }
  /* line 1347, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #search-bar select {
    margin-bottom: 10px;
  }
  /* line 1370, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table#cart-detail tbody tr td[data-hook='cart_item_description'],
table#cart-detail tbody tr td[data-hook='order_item_description'],
table[data-hook='order_details'] tbody tr td[data-hook='cart_item_description'],
table[data-hook='order_details'] tbody tr td[data-hook='order_item_description'] {
    font-size: 11px;
    line-height: 15px;
    width: 100px;
  }
  /* line 1376, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table#cart-detail tbody tr td[data-hook='cart_item_description'] h4,
table#cart-detail tbody tr td[data-hook='order_item_description'] h4,
table[data-hook='order_details'] tbody tr td[data-hook='cart_item_description'] h4,
table[data-hook='order_details'] tbody tr td[data-hook='order_item_description'] h4 {
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 10px;
  }
  /* line 1382, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table#cart-detail tbody tr td[data-hook='cart_item_price'],
table#cart-detail tbody tr td[data-hook='cart_item_total'],
table#cart-detail tbody tr td[data-hook='order_item_price'],
table#cart-detail tbody tr td[data-hook='order_item_total'],
table[data-hook='order_details'] tbody tr td[data-hook='cart_item_price'],
table[data-hook='order_details'] tbody tr td[data-hook='cart_item_total'],
table[data-hook='order_details'] tbody tr td[data-hook='order_item_price'],
table[data-hook='order_details'] tbody tr td[data-hook='order_item_total'] {
    font-size: 12px;
  }
  /* line 1390, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table#cart-detail tbody tr td[data-hook='cart_item_image'] img,
table#cart-detail tbody tr td[data-hook='order_item_image'] img,
table[data-hook='order_details'] tbody tr td[data-hook='cart_item_image'] img,
table[data-hook='order_details'] tbody tr td[data-hook='order_item_image'] img {
    width: 70px;
  }
}

/* line 1400, app/assets/stylesheets/spree/frontend/screen.css.scss */
#logo {
  padding: 20px 0;
}

/* line 1403, app/assets/stylesheets/spree/frontend/screen.css.scss */
#logo > a {
  display: inline-block;
}

@media only screen and (max-width: 767px) {
  /* line 1409, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #empty-cart {
    clear: both;
    margin-top: 0;
    float: none;
  }
}

@media only screen and (max-width: 767px) {
  /* line 1417, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #empty-cart {
    /* yes, this is ugly... */
    margin-top: 0 !important;
  }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
  /* line 1425, app/assets/stylesheets/spree/frontend/screen.css.scss */
  .progress-steps li {
    padding: 0;
    margin: 0;
    width: 50%;
  }
  /* line 1430, app/assets/stylesheets/spree/frontend/screen.css.scss */
  .progress-steps li span {
    display: block;
    padding: 10px 20px;
  }
  /* line 1436, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #shipping_method p label {
    float: none;
    display: block;
    text-align: center;
    margin-right: 0;
  }
  /* line 1443, app/assets/stylesheets/spree/frontend/screen.css.scss */
  p[data-hook='use_billing'] {
    float: none;
    margin-top: 0;
  }
  /* line 1452, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table#cart-detail tbody tr td[data-hook='cart_item_description'],
table#cart-detail tbody tr td[data-hook='order_item_description'],
table[data-hook='order_details'] tbody tr td[data-hook='cart_item_description'],
table[data-hook='order_details'] tbody tr td[data-hook='order_item_description'] {
    padding: 0 !important;
    text-indent: -9999px;
  }
  /* line 1457, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table#cart-detail tbody tr td[data-hook='cart_item_description'] h4,
table#cart-detail tbody tr td[data-hook='order_item_description'] h4,
table[data-hook='order_details'] tbody tr td[data-hook='cart_item_description'] h4,
table[data-hook='order_details'] tbody tr td[data-hook='order_item_description'] h4 {
    display: none;
  }
  /* line 1463, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table#cart-detail tbody tr td[data-hook='cart_item_image'] img,
table#cart-detail tbody tr td[data-hook='order_item_image'] img,
table[data-hook='order_details'] tbody tr td[data-hook='cart_item_image'] img,
table[data-hook='order_details'] tbody tr td[data-hook='order_item_image'] img {
    width: 70px;
  }
  /* line 1467, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table#cart-detail tbody tr td[data-hook='cart_item_price'],
table#cart-detail tbody tr td[data-hook='cart_item_total'],
table[data-hook='order_details'] tbody tr td[data-hook='cart_item_price'],
table[data-hook='order_details'] tbody tr td[data-hook='cart_item_total'] {
    font-size: 14px !important;
  }
  /* line 1475, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table.order-summary {
    display: block;
    position: relative;
    width: 100%;
  }
  /* line 1480, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table.order-summary thead {
    display: block;
    float: left;
  }
  /* line 1484, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table.order-summary tbody {
    display: block;
    width: auto;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
  }
  /* line 1491, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table.order-summary thead tr {
    display: block;
  }
  /* line 1494, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table.order-summary th {
    display: block;
  }
  /* line 1497, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table.order-summary tbody tr {
    display: inline-block;
    vertical-align: top;
  }
  /* line 1501, app/assets/stylesheets/spree/frontend/screen.css.scss */
  table.order-summary td {
    display: block;
    min-height: 1.25em;
  }
  /* line 1507, app/assets/stylesheets/spree/frontend/screen.css.scss */
  figure#logo {
    text-align: center;
  }
  /* line 1511, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #link-to-login {
    display: block;
    text-align: center;
  }
  /* line 1516, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #search-bar {
    display: block;
    text-align: center;
  }
  /* line 1520, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #search-bar select {
    margin-bottom: 10px;
  }
  /* line 1525, app/assets/stylesheets/spree/frontend/screen.css.scss */
  aside#sidebar {
    text-align: center;
  }
  /* line 1528, app/assets/stylesheets/spree/frontend/screen.css.scss */
  aside#sidebar ul {
    padding-left: 0;
  }
  /* line 1531, app/assets/stylesheets/spree/frontend/screen.css.scss */
  aside#sidebar ul li {
    list-style-type: none;
  }
  /* line 1551, app/assets/stylesheets/spree/frontend/screen.css.scss */
  #content {
    text-align: center;
  }
}

/*--------------------------------------*/
/* Calculators
/*--------------------------------------*/
/* line 1560, app/assets/stylesheets/spree/frontend/screen.css.scss */
.calculator-image {
  width: 40%;
}

/* line 1563, app/assets/stylesheets/spree/frontend/screen.css.scss */
.calculator-product-quantity {
  width: 60%;
}

/* line 1567, app/assets/stylesheets/spree/frontend/screen.css.scss */
.calculator-product {
  width: 100%;
  flex-direction: row;
  display: flex;
}

/* line 1573, app/assets/stylesheets/spree/frontend/screen.css.scss */
.calculator-product-name {
  margin-top: 50px;
  font-size: 20px;
  font-weight: bold;
}

/* line 1579, app/assets/stylesheets/spree/frontend/screen.css.scss */
.calculator-quantity {
  margin-top: 20px;
}

/* line 1583, app/assets/stylesheets/spree/frontend/screen.css.scss */
.calculator-resume-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

/* line 1591, app/assets/stylesheets/spree/frontend/screen.css.scss */
.calculator-personalization {
  width: 60%;
}

/* line 1595, app/assets/stylesheets/spree/frontend/screen.css.scss */
.login-button {
  background-color: white;
  color: black;
  border-radius: 20px;
  padding: 2px 20px 2px 20px;
  margin-left: 10px;
}

/* line 1603, app/assets/stylesheets/spree/frontend/screen.css.scss */
.top-bar {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
}

/* line 1610, app/assets/stylesheets/spree/frontend/screen.css.scss */
.top-bar-contact {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 1617, app/assets/stylesheets/spree/frontend/screen.css.scss */
.top-bar-menu {
  flex-direction: row;
  display: flex;
  align-items: center;
}

/* line 1623, app/assets/stylesheets/spree/frontend/screen.css.scss */
.top-bar-item {
  margin-left: 20px;
  margin-right: 20px;
}

/* line 1628, app/assets/stylesheets/spree/frontend/screen.css.scss */
.cart-info-container {
  border: black;
}

/* line 1632, app/assets/stylesheets/spree/frontend/screen.css.scss */
.bottom-bar-container {
  background-color: #eeeeee;
  height: 60px;
  align-items: center;
  padding: 10px;
  color: black;
  flex-direction: row;
  display: flex;
  justify-content: center;
}

/* line 1643, app/assets/stylesheets/spree/frontend/screen.css.scss */
.bottom-bar {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
}

/* line 1650, app/assets/stylesheets/spree/frontend/screen.css.scss */
.bottom-bar-item {
  background-color: transparent !important;
  color: black !important;
  font-weight: bold;
  width: 180px;
  transition: 0.5s;
}

/* line 1659, app/assets/stylesheets/spree/frontend/screen.css.scss */
.bottom-bar-item:hover {
  transition: 0.5s;
  color: #d00c20 !important;
  font-size: 18px !important;
}

/* line 1665, app/assets/stylesheets/spree/frontend/screen.css.scss */
.footer-container {
  height: 120px;
  background-color: white;
  padding: 10px;
  display: flex;
  justify-content: center;
}

/* line 1674, app/assets/stylesheets/spree/frontend/screen.css.scss */
.footer-top-item {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 5px;
  font-weight: bold;
  color: black;
}

/* line 1682, app/assets/stylesheets/spree/frontend/screen.css.scss */
.footer {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: black;
}

/* line 1691, app/assets/stylesheets/spree/frontend/screen.css.scss */
.bottom-footer {
  height: 35px;
  align-items: center;
  background-color: #d00c20;
  border-top: none;
  justify-content: center;
  display: flex;
  color: white;
}

/* line 1701, app/assets/stylesheets/spree/frontend/screen.css.scss */
.top-footer {
  height: 150px;
  align-items: center;
  background-color: #231e1f;
  border-top: none;
  justify-content: center;
  display: flex;
  color: white;
}

/* line 1711, app/assets/stylesheets/spree/frontend/screen.css.scss */
.footer-separator {
  margin-left: 10px;
  margin-right: 10px;
}

/* line 1716, app/assets/stylesheets/spree/frontend/screen.css.scss */
.footer-item {
  display: flex;
  flex-direction: row;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 5px;
  font-weight: bold;
  color: black;
}

/* line 1726, app/assets/stylesheets/spree/frontend/screen.css.scss */
.footer-menu {
  flex-direction: row;
  display: flex;
  justify-content: center;
}

/* line 1732, app/assets/stylesheets/spree/frontend/screen.css.scss */
.footer-menu-section {
  flex-direction: column;
  display: flex;
  justify-content: center;
}

/* line 1738, app/assets/stylesheets/spree/frontend/screen.css.scss */
.order-print-head {
  background-color: #df0000 !important;
}

/* line 1742, app/assets/stylesheets/spree/frontend/screen.css.scss */
.product-price {
  border-top: 1px solid #cfcfcf;
  border-bottom: 1px solid #cfcfcf;
  padding: 20px 0px 20px 0px;
}

/* line 1748, app/assets/stylesheets/spree/frontend/screen.css.scss */
.product-price-text {
  font-size: 20px;
}

/* line 1753, app/assets/stylesheets/spree/frontend/screen.css.scss */
.add-to-cart-button {
  background-color: #df0000;
  border-color: transparent;
  border-radius: 20px;
  padding: 10px;
  width: 200px;
}

/* line 1761, app/assets/stylesheets/spree/frontend/screen.css.scss */
.calculator-button {
  border-radius: 20px;
  padding: 10px;
  width: 200px;
}

/* line 1770, app/assets/stylesheets/spree/frontend/screen.css.scss */
.additional-info {
  border-bottom: 1px solid #cfcfcf;
}

/* line 1774, app/assets/stylesheets/spree/frontend/screen.css.scss */
.additional-info-title {
  width: 200px;
  margin-top: 20px;
  color: white;
  padding: 20px;
  border-radius: 10px 10px 0px 0px;
  background-color: #df0000 !important;
}

/* line 1783, app/assets/stylesheets/spree/frontend/screen.css.scss */
.table-additional-info {
  margin-top: 20px;
}

/* line 1787, app/assets/stylesheets/spree/frontend/screen.css.scss */
.label-item-cart {
  margin-top: 10px;
  font-weight: 400;
  font-size: 16px;
}

/* line 1793, app/assets/stylesheets/spree/frontend/screen.css.scss */
.value-item-cart {
  margin-top: 20px;
  font-weight: 300;
  font-size: 16px;
}

/* line 1799, app/assets/stylesheets/spree/frontend/screen.css.scss */
.cart-details {
  padding: 0px;
  margin-top: 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

/* line 1808, app/assets/stylesheets/spree/frontend/screen.css.scss */
.total-price {
  font-size: 20px;
  font-weight: 500;
  color: #df0000;
}

/* line 1814, app/assets/stylesheets/spree/frontend/screen.css.scss */
.cart-footer {
  width: 100%;
  height: 100px;
  background-color: white;
  bottom: 0;
  border-top: 1px solid #df0000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 1826, app/assets/stylesheets/spree/frontend/screen.css.scss */
.calculator-title-container {
  display: flex;
  justify-content: center;
}

/* line 1831, app/assets/stylesheets/spree/frontend/screen.css.scss */
.calculator-title {
  color: black;
  border-bottom: 3px solid red;
}

/* line 1836, app/assets/stylesheets/spree/frontend/screen.css.scss */
.resume-title {
  margin-bottom: 15px;
  font-size: 24px;
}

/* line 1841, app/assets/stylesheets/spree/frontend/screen.css.scss */
.resume-container {
  margin-top: 30px;
  border-radius: 5px;
  padding: 20px;
  box-shadow: -1px 1px 13px 4px rgba(195, 195, 195, 0.46);
}

/* line 1849, app/assets/stylesheets/spree/frontend/screen.css.scss */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

/* line 1855, app/assets/stylesheets/spree/frontend/screen.css.scss */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* line 1864, app/assets/stylesheets/spree/frontend/screen.css.scss */
.dropdown {
  position: relative;
  display: inline-block;
}

/* line 1869, app/assets/stylesheets/spree/frontend/screen.css.scss */
.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* line 1878, app/assets/stylesheets/spree/frontend/screen.css.scss */
.dropdown-content {
  display: none;
  opacity: 0;
  visibility: hidden;
  background-color: #f9f9f9;
  width: 100%;
  position: absolute;
  left: 0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* line 1890, app/assets/stylesheets/spree/frontend/screen.css.scss */
.dropdown-content:hover {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* line 1897, app/assets/stylesheets/spree/frontend/screen.css.scss */
.dropdown-content .header {
  background: #e2211c;
  color: white;
}

/* Create three equal columns that floats next to each other */
/* line 1903, app/assets/stylesheets/spree/frontend/screen.css.scss */
.column {
  float: left;
  width: 18%;
  padding: 15px;
  margin-left: 20px;
  height: auto;
  min-height: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* line 1913, app/assets/stylesheets/spree/frontend/screen.css.scss */
.column p {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  color: #333;
  transition: color 0.3s ease;
}

/* line 1920, app/assets/stylesheets/spree/frontend/screen.css.scss */
.column p:hover {
  color: #e2211c;
}

/* line 1925, app/assets/stylesheets/spree/frontend/screen.css.scss */
.column:hover {
  background-color: #f5f5f5;
}

/* line 1930, app/assets/stylesheets/spree/frontend/screen.css.scss */
.subcategories-content {
  width: 100%;
  min-height: 200px;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  background-color: #fff;
}

/* line 1939, app/assets/stylesheets/spree/frontend/screen.css.scss */
.subcategory {
  width: 25%;
  padding: 20px 30px 20px 30px;
}

/* line 1944, app/assets/stylesheets/spree/frontend/screen.css.scss */
.subcategory p {
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

/* line 1950, app/assets/stylesheets/spree/frontend/screen.css.scss */
.subcategory p:hover {
  color: #e2211c;
}

/* line 1954, app/assets/stylesheets/spree/frontend/screen.css.scss */
.subcategories-list {
  width: 80%;
}

/* line 1959, app/assets/stylesheets/spree/frontend/screen.css.scss */
.subcategory-image {
  width: 20%;
}

/* line 1963, app/assets/stylesheets/spree/frontend/screen.css.scss */
.select-variant {
  width: 300px !important;
}

/* line 1967, app/assets/stylesheets/spree/frontend/screen.css.scss */
.discounts {
  font-size: 30px;
  font-weight: 600;
  background: #e3ebfd;
  padding: 0.1em 0.3em;
}

/* line 1974, app/assets/stylesheets/spree/frontend/screen.css.scss */
.tooltip {
  display: inline-block;
  border-bottom: 1px dotted black;
  background-color: rgba(88, 85, 85, 0.952);
  color: white;
  width: 20px;
  text-align: center;
  border-radius: 50%;
}

/* line 1985, app/assets/stylesheets/spree/frontend/screen.css.scss */
.tooltip.title {
  position: absolute;
  margin-top: 10px;
  margin-left: 50%;
}

/* line 1991, app/assets/stylesheets/spree/frontend/screen.css.scss */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: #2b2a2a;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  margin-left: -250px;
}

/* line 2008, app/assets/stylesheets/spree/frontend/screen.css.scss */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* line 2012, app/assets/stylesheets/spree/frontend/screen.css.scss */
.select2-drop {
  box-shadow: none;
  width: 100px !important;
}

/* line 2017, app/assets/stylesheets/spree/frontend/screen.css.scss */
.variants-list {
  overflow-y: auto;
  max-height: 200px;
}

/* line 2022, app/assets/stylesheets/spree/frontend/screen.css.scss */
.variant-element {
  border-bottom: 1px solid #dbdbdb;
  height: 35px;
}

/* line 2027, app/assets/stylesheets/spree/frontend/screen.css.scss */
.favourite-products-title {
  font-size: 32px;
  display: flex;
  width: 100%;
  text-align: center;
  justify-content: center;
  margin: 20px;
}

/* line 2042, app/assets/stylesheets/spree/frontend/screen.css.scss */
.header-container {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dbdbdb;
  margin-bottom: 20px;
}

/* line 2049, app/assets/stylesheets/spree/frontend/screen.css.scss */
.menu-header {
  align-items: center;
  display: flex;
}

/* line 2054, app/assets/stylesheets/spree/frontend/screen.css.scss */
.whatsapp-button {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #1bd741;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  align-items: center;
  display: flex;
  justify-content: center;
}

/* line 2073, app/assets/stylesheets/spree/frontend/screen.css.scss */
.contacto-footer-container {
  display: flex;
  color: #1bd741;
  flex-direction: column;
  align-items: center;
  color: white;
  width: 100%;
}

/* line 2080, app/assets/stylesheets/spree/frontend/screen.css.scss */
.contacto-footer-container .title-contact {
  font-weight: 900;
  font-size: 40px;
}

/* line 2085, app/assets/stylesheets/spree/frontend/screen.css.scss */
.contacto-footer-container .first-comment {
  font-size: 15px;
}

/* line 2089, app/assets/stylesheets/spree/frontend/screen.css.scss */
.contacto-footer-container .second-comment {
  color: gray;
  align-self: center;
}

/* line 2095, app/assets/stylesheets/spree/frontend/screen.css.scss */
.ushopcl-logo {
  max-width: 60px;
  max-height: -moz-fit-content;
  max-height: fit-content;
}

/* line 2101, app/assets/stylesheets/spree/frontend/screen.css.scss */
.btn {
  border-radius: 10px;
  padding: 10px 20px;
}

/* line 2106, app/assets/stylesheets/spree/frontend/screen.css.scss */
.btn__outline {
  border: 1px solid var(--clr-link);
  color: var(--clr-link);
}

/* line 2111, app/assets/stylesheets/spree/frontend/screen.css.scss */
.btn__outline:hover {
  background-color: var(--clr-link);
  color: white;
}

/* line 2116, app/assets/stylesheets/spree/frontend/screen.css.scss */
.headline-2 {
  --clr-black: #171515;
  font-size: 24px;
  font-weight: 600;
  color: var(--clr-black);
}

/* line 2122, app/assets/stylesheets/spree/frontend/screen.css.scss */
.py-10 {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* line 2129, app/assets/stylesheets/spree/frontend/screen.css.scss */
.ushop-logo-constrained img {
  max-height: 80px !important;
  width: auto !important;
  display: block !important;
}
/*
Placeholder manifest file.
the installer will append this file to the app vendored assets here: 'vendor/assets/stylesheets/spree/frontend/all.css'
*/

#paypal_commerce_platform_overlay{
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100;
}

/* Ocultar el segundo paso (Payment) en la barra de progreso */
ol.progress-steps li:nth-child(2) {
  display: none;
}

/* Renumerar los pasos visibles usando contadores CSS */
ol.progress-steps {
  list-style: none; /* Quitar numeración por defecto si existe */
  padding-left: 0;  /* Quitar padding por defecto */
  counter-reset: stepCounter; /* Iniciar un contador llamado stepCounter */
}

ol.progress-steps li:not(:nth-child(2)) { /* Aplicar a todos menos al segundo oculto */
  counter-increment: stepCounter; /* Incrementar el contador por cada li visible */
  position: relative; /* Para posicionar el número */
  margin-left: 2em; /* Dejar espacio para el número */
  margin-bottom: 0.5em; /* Espacio entre pasos */
}

/* Mostrar el número del contador antes del contenido del li visible */
ol.progress-steps li:not(:nth-child(2))::before {
  content: counter(stepCounter) "."; /* Mostrar el número y un punto */
  position: absolute;
  left: -2em; /* Posicionar a la izquierda del texto */
  top: 0; /* Ajustar alineación vertical si es necesario */
  width: 1.5em; /* Ancho para el número */
  text-align: right; /* Alinear número a la derecha */
  font-weight: bold; /* Estilo opcional */
  color: #888; /* Color gris por defecto para el número */
}

/* Opcional: Estilos diferentes para números de pasos activos/completados */
ol.progress-steps li.completed-first::before,
ol.progress-steps li.completed::before {
  color: #555; /* Un gris más oscuro para completados */
}

ol.progress-steps li.current::before {
  color: #D9534F; /* Rojo (o tu color primario) para el actual */
  font-weight: bold;
}

/* Ajustar el estilo del texto del paso (el span/a) si es necesario 
ol.progress-steps li span,
ol.progress-steps li a {
}

*/
/* Estilos para corregir problemas con iconos SVG demasiado grandes */

/* Asegurarse de que todos los SVG tengan un tamaño razonable */
svg {
  max-width: 24px !important;
  max-height: 24px !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
}

/* Ocultar cualquier SVG que no esté dentro de un contenedor adecuado */
body > svg:not([class]),
#product-details > svg:not([class]),
.product_info > svg:not([class]) {
  display: none !important;
}

/* Regla específica para los iconos de verificación (check marks) */
svg path[d="M5 13l4 4L19 7"],
svg path[stroke-linecap="round"][stroke-linejoin="round"][d*="M5 13l4 4L19 7"] {
  max-width: 16px !important;
  max-height: 16px !important;
  transform: scale(0.5) !important;
}

/* Iconos en la disponibilidad de stock */
.stock-availability svg,
.product-availability svg {
  max-width: 16px !important;
  max-height: 16px !important;
  width: 16px !important;
  height: 16px !important;
}

/* Asegurarse de que los iconos gigantes sean controlados */
svg:not([class*="w-"]):not([width]):not([class*="icon"]) {
  width: 24px !important;
  height: 24px !important;
}

/* Controlar el tamaño del contenedor del icono */
.stock-availability, 
.product-availability {
  max-width: 100% !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
}

/* Eliminar cualquier carácter unicode de verificación que pueda estar presente */
.check-mark:before,
[class*="check"]:before {
  content: none !important;
} 
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
  /* Estilos para asegurar que el logo tenga el tamaño correcto */
  .ushop-header-logo img {
    max-height: 70px !important;
    width: auto !important;
  }
  
  /* Añadiendo soporte explícito para las clases responsivas de Tailwind */
  /* Esto aumenta la especificidad para asegurar que no sea sobrescrito */
  button.md\:hidden {
    display: block !important;
  }
  
  @media (min-width: 768px) {
    button.md\:hidden {
      display: none !important;
    }
  }
  
  /* Estilos del botón toggle para hamburguesa */
  .ushop-mobile-toggle {
    display: block !important;
  }
  
  /* Estilos base mejorados para la nav */
  .ushop-main-nav {
    display: none !important;
    transition: all 0.3s ease-in-out !important;
  }
  
  /* Estilo para menú activo */
  .ushop-menu-item.active .main-link {
    color: #df0000 !important;
    position: relative !important;
  }
  
  .ushop-menu-item.active .main-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: -6px !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #df0000 !important;
  }
  
  /* Mejoras para desktop */
  @media (min-width: 768px) {
    /* Ocultar el botón hamburguesa en desktop */
    .ushop-mobile-toggle {
      display: none !important;
    }
    
    .ushop-main-nav {
      display: flex !important;
      position: static !important;
      width: auto !important;
      height: auto !important;
      background: transparent !important;
      z-index: auto !important;
      transform: none !important;
      padding: 0 !important;
    }
    
    .ushop-main-nav ul {
      justify-content: flex-end !important;
    }
    
    .ushop-menu-item {
      position: relative !important;
    }
    
    .ushop-menu-item .main-link {
      padding: 12px 0 !important;
      font-weight: 500 !important;
      letter-spacing: 0.02em !important;
      transition: color 0.2s !important;
    }
    
    .ushop-menu-item .main-link:hover {
      color: #df0000 !important;
    }
    
    .ushop-mobile-controls {
      display: none !important;
    }
    
    .ushop-desktop-cart {
      display: flex !important;
      margin-left: 20px !important;
    }
    
    /* Efectos de hover mejorados para submenús */
    .ushop-submenu {
      top: 100% !important;
      transform: translateY(0) !important;
      opacity: 0 !important;
      visibility: hidden !important;
      transition: all 0.3s !important;
      border-radius: 6px !important;
      border: 1px solid #f0f0f0 !important;
      z-index: 100 !important;
      padding-top: 10px !important;
      margin-top: -10px !important;
    }
    
    /* Creamos un área invisible para evitar que se pierda el hover */
    .ushop-menu-item::after {
      content: '' !important;
      display: block !important;
      position: absolute !important;
      height: 20px !important;
      width: 100% !important;
      bottom: -20px !important;
      left: 0 !important;
      z-index: 90 !important;
    }
    
    .ushop-menu-item:hover .ushop-submenu {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    
    /* Aseguramos que el submenu permanezca visible cuando el mouse está sobre él */
    .ushop-submenu:hover {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    
    .ushop-submenu-item a:hover {
      color: #df0000 !important;
      background-color: #f9f9f9 !important;
    }
    
    /* Estilos específicos para los toggles en desktop */
    button.ushop-submenu-toggle.md\:hidden {
      display: none !important;
    }
  }
  
  /* Mejoras para mobile */
  @media (max-width: 767px) {
    body.menu-open {
      overflow: hidden !important;
    }
    
    .ushop-main-nav {
      transform: translateX(-100%) !important;
    }
    
    .ushop-main-nav.open {
      display: block !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 50 !important;
      background-color: white !important;
      padding: 5rem 1.5rem 1.5rem 1.5rem;
      overflow-y: auto !important;
      transform: translateX(0) !important;
    }
    
    .ushop-main-nav ul {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 0 !important;
    }
    
    .ushop-menu-item {
      border-bottom: 1px solid #f0f0f0 !important;
      padding: 8px 0 !important;
    }
    
    .ushop-menu-item:last-child {
      border-bottom: none !important;
    }
    
    .ushop-menu-item .main-link {
      padding: 8px 0 !important;
      width: 100% !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
    }
    
    /* Importante: Estos estilos son clave para que el submenu se muestre */
    .ushop-submenu {
      display: none !important;
      position: static !important;
      box-shadow: none !important;
      border: none !important;
      padding-left: 20px !important;
      margin-top: 8px !important;
      margin-bottom: 8px !important;
      background-color: #f9f9f9 !important;
      border-radius: 4px !important;
      padding: 8px !important;
    }
    
    /* Este es el selector clave que necesita sobrescribir la propiedad display */
    .ushop-menu-item.open .ushop-submenu {
      display: block !important;
    }
    
    .ushop-submenu-item {
      margin-bottom: 4px !important;
    }
    
    .ushop-submenu-item:last-child {
      margin-bottom: 0 !important;
    }
    
    .ushop-menu-arrow {
      transition: transform 0.3s !important;
    }
    
    .ushop-menu-item.open .ushop-menu-arrow {
      transform: rotate(180deg) !important;
    }
    
    .ushop-menu-item.open .fa-chevron-down {
      transform: rotate(180deg) !important;
    }
    
    .mobile-menu-close {
      display: block !important;
      position: absolute !important;
      top: 20px !important;
      right: 20px !important;
      font-size: 24px !important;
      cursor: pointer !important;
      z-index: 55 !important;
    }
    
    .ushop-desktop-cart {
      display: none !important;
    }
    
    .ushop-mobile-title {
      display: block !important;
      font-size: 18px !important;
      font-weight: 600 !important;
      margin-bottom: 20px !important;
      padding-bottom: 10px !important;
      border-bottom: 1px solid #eee !important;
    }
    
    /* Asegurar que los toggles de submenú se muestran en mobile */
    button.ushop-submenu-toggle.md\:hidden {
      display: flex !important;
    }
  }
}

/* Estilos para el header */
.ushop-header {
  @apply fixed top-0 left-0 w-full bg-white shadow-md z-10 py-3;
}

.ushop-header-inner {
  @apply flex items-center justify-between w-full;
}

.ushop-logo img {
  @apply h-auto max-h-12 w-auto;
}

/* Estilos para navegación principal */
.ushop-main-nav {
  @apply hidden md:block;
}

@media (max-width: 767px) {
  .ushop-main-nav {
    @apply fixed inset-0 bg-white p-4 pt-16 z-20 transform -translate-x-full transition-transform duration-300 overflow-y-auto;
    opacity: 0;
  }

  .ushop-main-nav.open {
    @apply translate-x-0;
    opacity: 1;
  }

  .ushop-main-nav > ul {
    @apply flex-col gap-y-4 gap-x-0;
  }

  body.menu-open {
    @apply overflow-hidden;
  }

  .mobile-menu-close {
    @apply absolute top-4 right-4 block;
  }
}

/* Estilos para desktop nav */
@media (min-width: 768px) {
  .ushop-desktop-cart {
    @apply flex;
  }
}

/* Estilos para items del menú */
.ushop-menu-item {
  @apply relative;
}

.ushop-menu-item .main-link {
  @apply relative font-medium text-gray-800 hover:text-[#df0000] transition-colors duration-200;
}

.ushop-menu-item.active .main-link {
  @apply text-[#df0000];
}

/* Estilos para submenús */
.ushop-submenu {
  min-width: 260px;
  @apply hidden;
  z-index: 100 !important;
}

@media (min-width: 768px) {
  .ushop-menu-item:hover .ushop-submenu {
    @apply block;
  }
  
  /* Selector adicional para asegurar que el submenú se mantiene visible */
  .ushop-submenu:hover {
    display: block !important;
  }
}

@media (max-width: 767px) {
  .ushop-menu-item {
    @apply border-b border-gray-200 pb-2;
  }

  .ushop-menu-item.open .ushop-submenu {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    min-width: 0 !important;
    padding-left: 1rem !important;
    margin-top: 0.5rem !important;
    border-top: 1px solid #f0f0f0 !important;
    padding-top: 0.5rem !important;
  }

  .ushop-submenu-item {
    @apply mb-2;
  }

  .ushop-menu-item.open .ushop-menu-arrow {
    transform: rotate(180deg) !important;
  }

  .ushop-submenu-toggle {
    @apply p-2 text-gray-500;
    min-width: 40px !important;
    text-align: center !important;
  }
}

/* Animaciones y transiciones */
.ushop-menu-arrow {
  transition: transform 0.2s ease;
}

/* Cotización */
.cart-count {
  @apply font-bold;
}

/* Estilos adicionales para el menú móvil */
@media (max-width: 767px) {
  .ushop-submenu-toggle {
    min-width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background-color: #f5f5f5 !important;
    transition: background-color 0.2s !important;
    margin-left: 8px !important;
    z-index: 5 !important;
  }
  
  .ushop-submenu-toggle:hover {
    background-color: #e5e5e5 !important;
  }
  
  .ushop-submenu-toggle:active {
    background-color: #d5d5d5 !important;
  }
} 

@media (max-width: 767px) {
  .sm_hidden{
    display: none;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */