/* =========================================================
   FULLSCREEN SEARCH – COMPUEXPRESS PRO STYLE
   ========================================================= */

/* HEADER FULLSCREEN */
.dfd-header {
  background: #00A7D6 !important; /* Azul turquesa real del header */
  padding-bottom: 16px !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.dfd-fullscreen .dfd-header .dfd-close-button {
  background: #FFFFFF !important;
  border-radius: 25px !important;
  transition: 0.2s ease;
}

.dfd-fullscreen .dfd-header .dfd-close-button:hover {
  background: #FFB100 !important;
  color: #003B6F !important;
}

/* BARRA DE BÚSQUEDA */
.dfd-fullscreen .dfd-header .dfd-logo + .dfd-searchbox {
  border-radius: 25px !important;
  border: 2px solid #00B5E2 !important; /* Azul claro exacto */
  background: #FFFFFF !important;
  box-shadow: 0 0 6px rgba(0, 167, 214, 0.25);
}

/* BOTONES DE SUGERENCIA */
.dfd-suggestion-button {
  background-color: #FFB100 !important; /* Amarillo banner */
  border: 1px solid #FFFFFF !important;
  border-radius: 20px !important;
  padding: 5px 12px !important;
}

.dfd-suggestion-button > button {
  color: #003B6F !important; /* Azul marino del logo */
  font-weight: bold !important;
  text-transform: uppercase !important;
}

/* TITULOS SUGERENCIAS */
.dfd-fullscreen .dfd-suggestions .dfd-title-sm {
  color: #003B6F !important; /* Azul marino */
  font-weight: 700 !important;
}

/* LOGO */
.dfd-logo {
  max-width: 250px !important;
  height: auto !important;
}

/* SOLO ESTO DEBERÍA SER SUFICIENTE */
a.dfd-branding { 
  display: none !important; 
}

/* =========================================================
   CARDS – PRODUCTOS RECOMENDADOS
   ========================================================= */

/* CARD GENERAL */
.dfd-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  border-radius: 12px !important;
  transition: transform 0.20s ease, box-shadow 0.20s ease;
  overflow: hidden !important;
}

.dfd-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

/* CONTENIDO CARD */
.dfd-card-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 10px !important;
  text-align: center !important;
}

/* IMAGEN */
.dfd-card img {
  object-fit: contain !important;
  margin-bottom: 10px !important;
  max-height: 160px !important;
  width: 100% !important;
  display: block !important;
}

/* MODELO */
.dfd-card-custom-model {
  margin-top: 5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #FFB100 !important;
  font-size: 14px !important;
}

/* TÍTULO DEL PRODUCTO */
.dfd-card-title {
  margin-top: 10px !important;
  text-align: center !important;
  min-height: 65px !important;
  color: #003B6F !important; /* Azul del texto */
  font-weight: 700 !important;
  font-size: 16px !important;
}

/* MARCA */
.dfd-card-brand {
  text-transform: uppercase !important;
  color: #FFB100 !important;
  font-weight: bold !important;
}

/* FILAS */
.dfd-card-row {
  margin-top: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* =========================================================
   PRECIOS (FORZAR AZUL, YA NO VERDE)
   ========================================================= */

/* contenedor pricing */
.dfd-fullscreen .dfd-card .dfd-card-pricing,
.dfd-fullscreen .dfd-card .dfd-card-pricing * {
  font-feature-settings: "tnum" 1 !important;
}

/* precio normal (forzado azul) */
.dfd-fullscreen .dfd-card .dfd-card-price,
.dfd-fullscreen .dfd-card .dfd-card-price *,
.dfd-fullscreen .dfd-card [class*="price"]:not(.dfd-card-price--sale),
.dfd-fullscreen .dfd-card [class*="price"]:not(.dfd-card-price--sale) * {
  color: #0076A3 !important; /* Azul de precios */
  font-weight: 800 !important;
}

/* precio oferta (rojo) */
.dfd-fullscreen .dfd-card .dfd-card-price--sale,
.dfd-fullscreen .dfd-card .dfd-card-price--sale * {
  color: red !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

/* si existe "precio anterior" tachado */
.dfd-fullscreen .dfd-card .dfd-card-price--compare,
.dfd-fullscreen .dfd-card .dfd-card-price--compare * {
  opacity: 0.65 !important;
  text-decoration: line-through !important;
}

/* =========================================================
   STOCK
   ========================================================= */
.dfd-card-stock-in {
  font-weight: bold !important;
  color: #00CC66 !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* SKU */
.dfd-card-sku {
  font-weight: 800 !important;
  color: #003B6F !important;
}

/* =========================================================
   BOTÓN AÑADIR AL CARRITO (BASE AMARILLO, HOVER TURQUESA)
   ========================================================= */

/* (base genérica por si el markup no trae wrapper) */
.dfd-card button {
  width: auto !important;
  font-weight: bold !important;
  background: #FFB100 !important;           /* Amarillo base */
  border: 2px solid #FFB100 !important;
  border-radius: 8px !important;
  color: #003B6F !important;                /* Texto azul */
  padding: 10px 18px !important;
  transition: 0.20s ease !important;
}

.dfd-card button:hover {
  background: #00A7D6 !important;           /* Turquesa hover */
  border-color: #00A7D6 !important;
  color: #FFFFFF !important;                /* Texto blanco */
}

/* =========================================================
   FIX: "Añadir al carrito" NO se encime + botón bien armado
   ========================================================= */

/* 1) Alinear precio + add-to-cart en una misma fila */
.dfd-fullscreen .dfd-card .dfd-card-pricing{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

.dfd-fullscreen .dfd-card .dfd-card-pricing .dfd-card-price,
.dfd-fullscreen .dfd-card .dfd-card-pricing .dfd-card-price--sale{
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* 2) Convertir el bloque completo add-to-cart en botón */
.dfd-fullscreen .dfd-card .dfd-feat-add-to-cart,
.dfd-fullscreen .dfd-card .dfd-add-to-cart,
.dfd-fullscreen .dfd-card .dfd-card-add-to-cart,
.dfd-fullscreen .dfd-card [data-role*="add-to-cart"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  background: #FFB100 !important;
  border: 2px solid #FFB100 !important;
  color: #003B6F !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

/* texto “Añadir al carrito” (si viene en span/div/a) */
.dfd-fullscreen .dfd-card .dfd-feat-add-to-cart span,
.dfd-fullscreen .dfd-card .dfd-add-to-cart span,
.dfd-fullscreen .dfd-card .dfd-card-add-to-cart span,
.dfd-fullscreen .dfd-card [data-role*="add-to-cart"] span,
.dfd-fullscreen .dfd-card .dfd-feat-add-to-cart a,
.dfd-fullscreen .dfd-card .dfd-add-to-cart a,
.dfd-fullscreen .dfd-card .dfd-card-add-to-cart a,
.dfd-fullscreen .dfd-card [data-role*="add-to-cart"] a{
  color: inherit !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* botón interno (icono) */
.dfd-fullscreen .dfd-card .dfd-feat-add-to-cart button,
.dfd-fullscreen .dfd-card .dfd-add-to-cart button,
.dfd-fullscreen .dfd-card .dfd-card-add-to-cart button,
.dfd-fullscreen .dfd-card [data-role*="add-to-cart"] button{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #003B6F !important;
}

/* si trae svg/icono */
.dfd-fullscreen .dfd-card .dfd-feat-add-to-cart button svg,
.dfd-fullscreen .dfd-card .dfd-add-to-cart button svg,
.dfd-fullscreen .dfd-card .dfd-card-add-to-cart button svg,
.dfd-fullscreen .dfd-card [data-role*="add-to-cart"] button svg{
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

/* hover premium */
.dfd-fullscreen .dfd-card .dfd-feat-add-to-cart:hover,
.dfd-fullscreen .dfd-card .dfd-add-to-cart:hover,
.dfd-fullscreen .dfd-card .dfd-card-add-to-cart:hover,
.dfd-fullscreen .dfd-card [data-role*="add-to-cart"]:hover{
  background: #00A7D6 !important;
  border-color: #00A7D6 !important;
  color: #FFFFFF !important;
}

.dfd-fullscreen .dfd-card .dfd-feat-add-to-cart:hover button,
.dfd-fullscreen .dfd-card .dfd-add-to-cart:hover button,
.dfd-fullscreen .dfd-card .dfd-card-add-to-cart:hover button,
.dfd-fullscreen .dfd-card [data-role*="add-to-cart"]:hover button{
  color: #FFFFFF !important;
}