/* ---------- CATEGORÍAS HOME: 5 columnas desktop | 1 columna móvil ---------- */

/* El contenedor ocupa el 95 % del ancho de la pantalla */
.section-categories-index .container{
    max-width:95% !important;
    width:95% !important;
    margin:0 auto !important;
}

/* ► Desktop (≥ 768 px): una sola fila con 5 columnas */
@media (min-width:768px){
    /* Forzamos una única fila */
    .section-categories-index .row{
        display:flex !important;
        flex-wrap:nowrap !important;
        justify-content:space-between;
    }
    /* Cada columna ocupa el 20 % (100 / 5) */
    .section-categories-index .row > .col-md-6{
        flex:0 0 20% !important;
        max-width:20% !important;
    }
}

/* ► Móvil (< 768 px): una categoría debajo de la otra */
@media (max-width:767.98px){
    .section-categories-index .row{
        display:block !important;   /* Flujo vertical */
    }
    .section-categories-index .row > .col-md-6{
        width:100% !important;
        max-width:100% !important;
    }
}

/* Las imágenes llenan su contenedor sin deformarse */
.section-categories-index_item img{
    width:100%;
    height:auto;
    object-fit:contain;
}
/*  ↓ 1 pt en la tipografía de los botones sobre las imágenes  */
.section-categories-index .btn-outline-primary__custom{
    font-size: calc(100% - 1pt) !important;
}

/* ---------- FIN CATEGORÍAS HOME: 5 columnas desktop | 1 columna móvil ---------- */

/* ---------- HEADER ---------- */
/* 1. Asegura que todo el header sea el “lienzo” de la franja negra */
.page-header {                     /* selector del header principal */
    position: relative;
}

/* 2. Dibuja una pseudo-capa negra que cubra TODO el ancho y la misma altura
      de la .top-bar, colocándola *detrás* del contenido */
.page-header::before {
    content: "";
    position: absolute;
    top: 0;                       /* arranca en el borde superior */
    left: 0;
    width: 100%;
    height: 38px;                 /* misma altura que .top-bar */
    background: #000;             /* color del preheader */
    z-index: 0;                   /* por detrás de los demás elementos */
}

/* 3. Eleva la .top-bar para que quede por encima de la pseudo-capa */
.top-bar {
    position: relative;
    z-index: 2;
}

/* 4. Quita el fondo blanco que provoca el “corte” */
.logo__container {
    background: transparent !important;
    position: relative;
    z-index: 1;                   /* encima de la pseudo-capa, debajo de .top-bar */
}

/* 5. (Opcional) Sólo en escritorio; en móvil podría no hacer falta */
@media (max-width: 991.98px) {
    .page-header::before {
        display: none;            /* ajusta según tu diseño mobile */
    }
}
/* ---------- FIN HEADER ---------- */

/* ---------- LOGOTIPO ---------- */
/* 1 - Reiniciamos el margen que habíamos agregado */
.logo__container{
    margin-top: 0 !important;        /* quita el salto grande */
    padding: 16px 0 0 0;                  /* aire simétrico arriba-abajo (≈6 px) */
    display: flex;                   /* centrado vertical real */
    align-items: center;
}

/* 2 - Limitamos la altura máxima del logo para que no toque bordes */
.logo__container img{
    max-height: 64px;                /* ajústalo a tu gusto: 56–68 px suele ir bien */
    height: auto;
    width: auto;                     /* evita distorsión */
}

/* 3 - Nos aseguramos de que el resto del header siga alineado */
.header-main,        /* o el contenedor que envuelva logo+nav */
.navbar,             /* depende de tu plantilla */
.header-content{
    display: flex;
    align-items: center;             /* todo el bloque centrado vertical */
}

/* 4 - Opcional: en pantallas pequeñas reducimos aún más el logo */
@media (max-width: 991.98px){
    .logo__container{
        padding: 4px 0;              /* un poco menos de aire en mobile */
    }
    .logo__container img{
        max-height: 48px;
    }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::FORM HOME FILTROS :::::::::::::::::::::::::::::::::::::::::*/

:root{
  --rmc-yellow:#FFD400;
  --rmc-dark:#0F1114;
  --rmc-ink:#2B2E34;
  --rmc-line:#E2E7EF;
  --rmc-panel:#F3F3F4; 
  --rmc-radius:14px;
  --rmc-field-h:52px;
}

/* Contenedor del formulario */
section.angulo-content form[data-section="filtros-atributos-home"]{
  max-width:1100px;
  margin:-18px auto 28px;
  padding:16px 18px;
  background:var(--rmc-panel);          /* <- gris azulado */
  border:1px solid var(--rmc-line);
  border-radius:var(--rmc-radius);
  box-shadow:0 10px 26px rgba(15,17,20,.06);
}

/* Eliminar la línea amarilla decorativa previa */
section.angulo-content form[data-section="filtros-atributos-home"]::after{
  content:none !important;
  display:none !important;
}

/* Espaciado columnas */
form[data-section="filtros-atributos-home"] .form-group{ margin-bottom:12px; }

/* ===== Selects (bootstrap-multiselect) ===== */
form[data-section="filtros-atributos-home"] 
.btn-group > .multiselect.dropdown-toggle.custom-select{
  display:flex !important; align-items:center; justify-content:space-between; gap:8px;
  height:var(--rmc-field-h); line-height:var(--rmc-field-h);
  padding:0 16px;
  border-radius:999px !important;                 /* píldora */
  border:2px solid var(--rmc-line) !important;
  background:#fff !important;
  color:var(--rmc-ink) !important;
  font-weight:600; letter-spacing:.2px;
  box-shadow:none !important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
form[data-section="filtros-atributos-home"] 
.btn-group > .multiselect.dropdown-toggle.custom-select:hover{
  border-color:#D6DCE6 !important;
}
form[data-section="filtros-atributos-home"] 
.btn-group > .multiselect.dropdown-toggle.custom-select:focus{
  border-color:var(--rmc-yellow) !important;
  box-shadow:0 0 0 3px rgba(255,212,0,.35) !important;
  outline:none !important;
}
form[data-section="filtros-atributos-home"] .multiselect-selected-text{
  width:100%; text-align:left; font-size:15px;
}

/* Dropdown */
form[data-section="filtros-atributos-home"] .multiselect-container.dropdown-menu{
  border-radius:12px; border:1px solid #E3E7EF; padding:8px 0 6px;
  box-shadow:0 16px 40px rgba(0,0,0,.12); max-height:280px; overflow:auto; z-index:1055;
}
form[data-section="filtros-atributos-home"] .multiselect-container .dropdown-item{
  padding:8px 14px; font-size:14px;
}
form[data-section="filtros-atributos-home"] .multiselect-container .dropdown-item:hover{
  background:rgba(255,212,0,.12);
}

/* ===== Botón Buscar ===== */
form[data-section="filtros-atributos-home"] .boton-especial{
  height:var(--rmc-field-h);
  line-height:calc(var(--rmc-field-h) - 4px);
  padding:0 28px !important;
  border-radius:999px !important;                 /* igual de redondeado que el hover */
  border:2px solid var(--rmc-yellow) !important;  /* borde amarillo */
  background:var(--rmc-yellow) !important;        /* default amarillo */
  color:var(--rmc-dark) !important;
  font-weight:800; letter-spacing:.3px;
  box-shadow:0 8px 18px rgba(255,212,0,.35);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
form[data-section="filtros-atributos-home"] .boton-especial i{ margin-right:6px; }

/* Hover negro */
form[data-section="filtros-atributos-home"] .boton-especial:hover{
  background:var(--rmc-dark) !important;
  border-color:var(--rmc-dark) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(15,17,20,.25);
}
form[data-section="filtros-atributos-home"] .boton-especial:active{
  transform:translateY(1px);
}

/* ===== Responsive 100% ===== */
@media (max-width:991.98px){
  section.angulo-content form[data-section="filtros-atributos-home"]{
    margin:10px 12px 22px; padding:12px;
  }
}
@media (max-width:575.98px){
  :root{ --rmc-field-h:48px; }
  /* selects y botón a 100% de ancho en mobile */
  form[data-section="filtros-atributos-home"] .btn-group,
  form[data-section="filtros-atributos-home"] .btn-group > .multiselect.dropdown-toggle.custom-select{
    width:100%;
  }
  form[data-section="filtros-atributos-home"] .boton-especial{
    width:100%;
    padding:0 22px !important;
  }
}



/* ====== Remincor | Filtros: radios uniformes de 10px ====== */
:root{
  --rmc-radius: 10px; /* unifica radios */
}

/* Contenedor */
section.angulo-content form[data-section="filtros-atributos-home"]{
  border-radius: var(--rmc-radius) !important;
}

/* Select del plugin (antes era pill/999px) */
form[data-section="filtros-atributos-home"] 
.btn-group > .multiselect.dropdown-toggle.custom-select{
  border-radius: var(--rmc-radius) !important;
}

/* Menú desplegable */
form[data-section="filtros-atributos-home"] 
.multiselect-container.dropdown-menu{
  border-radius: var(--rmc-radius) !important;
}

/* Buscador dentro del dropdown e inputs genéricos */
form[data-section="filtros-atributos-home"] .multiselect-filter .form-control,
form[data-section="filtros-atributos-home"] .multiselect-filter .input-group-text,
form[data-section="filtros-atributos-home"] .form-control,
form[data-section="filtros-atributos-home"] .custom-select{
  border-radius: var(--rmc-radius) !important;
}

/* Botón Buscar (antes era pill/999px) */
form[data-section="filtros-atributos-home"] .boton-especial{
  border-radius: var(--rmc-radius) !important;
}

/* Mobile: por si el tema cambia estilos en breakpoints */
@media (max-width: 575.98px){
  form[data-section="filtros-atributos-home"] 
  .btn-group > .multiselect.dropdown-toggle.custom-select,
  form[data-section="filtros-atributos-home"] .boton-especial{
    border-radius: var(--rmc-radius) !important;
  }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::FIN FORM HOME FILTROS :::::::::::::::::::::::::::::::::::::::::*/

/* Quitar espacio superior de la sección de categorías */
.categories.section-categories-index,
.section-categories-index{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Por si la plantilla agrega espacio dentro del container/row */
.section-categories-index .container{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.section-categories-index .row{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Asegura que el primer item no empuje hacia abajo */
.section-categories-index .section-categories-index_item{
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =========================================================
   Remincor – Header Search (CSS only)
   - Oculta CONTACTAR
   - Botón de lupa integrado y centrado
   - Placeholder custom: "Encontrá tu repuesto"
   ========================================================= */

/* 1) Ocultar botón CONTACTAR (alta especificidad) */
.header__content.flex-row.search-visible.d-flex .navbar-menu-search .menu-contact-button-container{
  display:none !important;
}

/* 2) El wrapper del buscador puede crecer, pero sin romper el layout */
.header__content.flex-row.search-visible.d-flex .navbar-menu-search .header__search-wrapper{
  flex:1 1 auto !important;
  max-width:780px !important;
  min-width:420px !important;
}

/* 3) El formulario actúa de marco del input + botón */
.header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border-radius:10px !important;
  box-shadow:none !important;
}

/* 4) Campo de búsqueda */
.header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .field.search{
  flex:1 1 auto !important;
  margin:0 !important;
}
.header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .field.search .control{
  position:relative !important;
  margin:0 !important;
  min-height:48px !important; /* asegura referencia vertical */
}

.header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .field.search .control .intBuscar{
  width:100% !important;
  height:48px !important;
  line-height:48px !important;
  border-radius:10px !important;
  border:1.5px solid #E2E7EF !important;
  background:#fff !important;
  color:#2B2E34 !important;
  font-weight:600 !important;
  padding:0 56px 0 16px !important; /* espacio a la derecha para el botón */
  box-shadow:0 6px 16px rgba(15,17,20,.06) !important;
  transition:border-color .2s ease, box-shadow .2s ease !important;
}

/* Foco delicado */
.header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .field.search .control .intBuscar:focus{
  outline:none !important;
  border-color:#FFD400 !important;
  box-shadow:0 0 0 3px rgba(255,212,0,.28) !important;
}

/* 5) Placeholder custom sin tocar HTML:
      - ocultamos el nativo
      - pintamos uno falso sobre el control
*/
.header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .field.search .control .intBuscar::placeholder{
  color:transparent !important;
}
.header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .field.search .control::after{
  content:"Buscar repuestos";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:#96A0B2;
  pointer-events:none;
  font-weight:500;
  letter-spacing:.2px;
  opacity:.95;
  transition:opacity .15s ease;
}
/* Ocultar el pseudo-placeholder al enfocar o si el input no está vacío (requiere :has en navegadores modernos) */
.header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .field.search .control:focus-within::after{
  opacity:0;
}
.header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .field.search .control:has(.intBuscar:not(:placeholder-shown))::after{
  opacity:0;
}

/* 6) Botón de la lupa integrado y perfectamente centrado */
.header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .actions{
  position:absolute !important;
  right:8px !important;
  top:10% !important;
  transform:translateY(-10%) !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .actions .action.search{
  height:36px !important;           /* menor que el input para respiración visual */
  width:42px !important;
  line-height:1 !important;
  border-radius:10px !important;
  border:1.5px solid #FFD400 !important;
  background:#FFD400 !important;
  color:#0F1114 !important;         /* icono oscuro sobre amarillo */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  box-shadow:0 6px 16px rgba(255,212,0,.28) !important;
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .08s ease !important;
}
.header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .actions .action.search:hover{
  background:#0F1114 !important;
  border-color:#0F1114 !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(15,17,20,.25) !important;
}
.header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .actions .action.search:active{
  transform:translateY(1px) !important;
}

/* Ícono dentro del botón */
.header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .actions .action.search .search-icon-wrapper svg{
  width:18px !important;
  height:18px !important;
  fill:currentColor !important;
}

/* 7) Responsive: usa todo el ancho disponible en móvil */
@media (max-width: 767.98px){
  .header__content.flex-row.search-visible.d-flex .navbar-menu-search .header__search-wrapper{
    max-width:100% !important;
    min-width:0 !important;
  }
  .header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .field.search .control .intBuscar{
    height:46px !important;
    line-height:46px !important;
    padding-right:56px !important;
  }
  .header__content.flex-row.search-visible.d-flex .navbar-menu-search .search_form_wrap .actions .action.search{
    height:34px !important;
    width:40px !important;
  }
}