/* STYLOS GENERALES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.bg-custon-00071E {
    background-color: #00071e;
}
.bg-custon-000A29 {
    background-color: #000a29;
}

/* HEADER SUPERIOR */
.header-superior-container {
    height: 48px;
}
.flag-icon {
    width: 24px;
    height: auto;
}
.hour-text {
    font-size: 0.9rem;
}

/* HEADER PRINCIPAL */
.header-principal {
    height: 90px;
}
.logo-img {
    max-height: 50px;
    height: auto;
}
.search-wrap {
    max-width: 600px;
}
.search-input {
    border-right: none;
}
.search-btn i {
    font-size: 1rem;
}
.user-icon {
    width: 38px;
    height: 38px;
    object-fit: cover;
}
.sign-in-text {
    font-size: 0.8rem;
    opacity: 0.8;
}
.icon-heart {
    font-size: 18px;
}
.cart-icon-img,
.notif-icon-img {
    width: 28px;
    height: auto;
}
.badge-count {
    font-size: 0.7rem;
}

/* HEADER INFERIOR */
.header-inferior {
    height: 40px;
}
.header-inferior-container {
    /* La .container y .d-flex ya vienen de Bootstrap */
}
.allcat-text {
    font-weight: 600;
    font-size: 0.9rem;
}
.header-separator {
    display: inline-block;
    width: 1px;
    height: 20px;
    background-color: #fff;
    opacity: 0.3;
}

.fav-dropdown .dropdown-toggle,
.cart-dropdown .dropdown-toggle,
.notif-dropdown .dropdown-toggle {
    text-decoration: none;
    position: relative;
    cursor: pointer;
}

.fav-dropdown .dropdown-menu,
.cart-dropdown .dropdown-menu,
.notif-dropdown .dropdown-menu {
    min-width: 200px;
    border-radius: 0.4rem;
}

.fav-dropdown .dropdown-header,
.cart-dropdown .dropdown-header,
.notif-dropdown .dropdown-header {
    font-weight: 600;
}

.fav-dropdown .dropdown-divider,
.cart-dropdown .dropdown-divider,
.notif-dropdown .dropdown-divider {
    margin: 0.5rem 0;
}

.fav-dropdown .dropdown-item,
.cart-dropdown .dropdown-item,
.notif-dropdown .dropdown-item {
    font-size: 0.9rem;
}

.fav-dropdown .dropdown-item:hover,
.cart-dropdown .dropdown-item:hover,
.notif-dropdown .dropdown-item:hover {
    background-color: #e2e6ea;
    color: #000;
}

/* Generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.bg-custon-00071E {
    background-color: #00071e;
}
.bg-custon-000A29 {
    background-color: #000a29;
}

/* Header Superior */
.header-superior-container {
    height: 35px;
}
.header-separator {
    display: inline-block;
    width: 1px;
    height: 20px;
    background-color: #fff;
    opacity: 0.3;
}
.flag-icon {
    width: 24px;
    height: auto;
}
.hour-text {
    font-size: 0.9rem;
}

/* Navbar principal */
.logo-img {
    max-height: 50px;
}

/* Barra inferior */
.header-inferior {
    height: 40px;
}
.allcat-text {
    font-weight: 600;
    font-size: 0.9rem;
}

a.text-white.text-decoration-none.me-3 {
    color: #adb5bd !important;
}
header-inferior.bg-custon-000A29.text-white {
    padding: 25px;
}
nav.navbar.navbar-expand-lg.bg-custon-000A29.text-white {
    padding-top: 18px;
}

li.nav-item.dropdown .position-absolute.badge {
    top: -5px;
    right: -5px;
    transform: none; /* Quita la traducción si usabas translate-middle */
}

/* footer */
.custom-footer-ecommerce {
    background: linear-gradient(#0b0d1f, #131639);
    color: #fff;
    font-size: 0.9rem;
}

.custom-footer-ecommerce a {
    color: #fff;
    text-decoration: none;
}
.custom-footer-ecommerce a:hover {
    text-decoration: underline;
}

/* Texto principal */
.custom-footer-title-main {
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
}
.custom-footer-subtitle {
    font-size: 0.85rem;
    color: #bbb;
}

/* Suscripción */
.custom-footer-newsletter-label {
    font-size: 0.85rem;
    color: #ccc;
}
.custom-footer-form-subscribe {
    flex-wrap: nowrap;
}
.custom-footer-input {
    width: 200px;
    background-color: #1f2240;
    border: 1px solid #333;
    color: #fff;
    font-size: 0.85rem;
    height: 35px;
    padding: 0 0.5rem;
}
.custom-footer-btn-subscribe {
    background-color: #ffc107;
    color: #000;
    border: none;
    font-size: 0.85rem;
    height: 35px;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0 1rem;
}
.custom-footer-btn-subscribe:hover {
    background-color: #ffb000;
}
.custom-footer-disclaimer {
    font-size: 0.7rem;
}

/* Separador */
.custom-footer-divider {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Secciones de columna */
.custom-footer-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.custom-footer-links li {
    margin-bottom: 0.3rem;
}
.custom-footer-links li a {
    color: #ccc;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}
.custom-footer-links li a:hover {
    color: #fff;
}

/* Logo México */
.custom-footer-mexico {
    max-width: 80px;
    object-fit: contain;
}

/* Redes sociales */
.custom-footer-social li {
    margin-right: 0.7rem;
}
.custom-footer-social li a i {
    font-size: 1rem;
    transition: color 0.2s ease;
}
.custom-footer-social li a i:hover {
    color: #ffc107;
}

/* Tiendas App/Google */
.custom-footer-store-badge {
    height: 25px;
    transition: opacity 0.2s ease;
}
.custom-footer-store-badge:hover {
    opacity: 0.8;
}

/* Derechos reservados */
.custom-footer-rights small {
    color: #888;
}
form.custom-footer-form-subscribe.d-flex.align-items-center {
    width: 380px;
}
.custom-footer-title-main {
    font-weight: 600;
    font-size: 1.25rem;
    color: #ffffff !important;
}
.py-4 {
    padding-top: 2.5rem !important;
}
.custom-footer-store-badge {
    height: 45px;
    transition: opacity 0.2s ease;
}
.custom-footer-ecommerce {
    background: linear-gradient(#0b0d1f, #131639);
    color: #fff;
    font-size: 0.9rem;
    margin-top: 150px;
}

.custom-footer-input {
    width: 200px;
    background-color: #ddd;
    border: 1px solid #0c0e22;
    color: #fff;
    font-size: 0.85rem;
    height: 35px;
    padding: 0 0.5rem;
}
.custom-footer-btn-subscribe {
    background-color: #ffc107;
    color: #000;
    border: none;
    font-size: 0.85rem;
    height: 34px;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0 0.9rem;
    top: 1px;
    position: relative;
    border: none;
    border-radius: 1px;
}

.all-categories {
    cursor: pointer;
}
.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 86rem;
    background-color: #fff;
    color: #000;
    z-index: 999;
}
.all-categories:hover .mega-menu {
    display: block;
}
.menu-column {
    background-color: #fff;
}
.menu-column ul li {
    padding: 0.5rem 1rem;
    transition: background-color 0.2s;
    cursor: pointer;
}
.menu-column ul li:hover {
    background-color: #f8f8f8;
}
#child-col li {
    width: 33.33%;
    text-align: center;
    margin-bottom: 1rem;
}
#child-col li img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
}

/* Contenedor del dropdown con tu estética */
.dropdown-account {
    position: relative;
    border: none;
    min-width: 220px; /* Ajusta a tu gusto */
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    margin-top: 10px; /* Separarlo un poco del botón */
}

/* Contenido interno de la "burbuja" */
.account-popup-content {
    background-color: #fff; /* o tu color preferido */
    border-radius: 4px;
    /* Si quieres un borde alrededor: border: 1px solid #ddd; */
}

/* Botón “Identify” */
.account-popup-content .btn.btn-warning {
    background-color: #ffc107; /* ajusta a tu gusto */
    border: none;
    font-size: 0.95rem;
}

/* Textos */
.account-popup-content p {
    color: #333;
    font-size: 0.88rem;
    margin-bottom: 0;
}

.account-popup-content a {
    text-decoration: underline;
}

.account-popup-content a:hover {
    color: #0056b3; /* ejemplo */
}

ul.dropdown-menu.show {
    top: 68px;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0),
        0px 54px 22px 0px rgba(150, 150, 150, 0.01),
        0px 31px 18px 0px rgba(150, 150, 150, 0.05),
        0px 14px 14px 0px rgba(150, 150, 150, 0.09),
        0px 3px 7px 0px rgba(150, 150, 150, 0.1) !important;
    right: -120px;
}

.dropdown-account {
    position: relative;
    /* antes podría ser min-width: 200px */
    min-width: 280px; /* Auméntalo aquí */
    border-radius: 6px;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0),
        0px 54px 22px 0px rgba(150, 150, 150, 0.01),
        0px 31px 18px 0px rgba(150, 150, 150, 0.05),
        0px 14px 14px 0px rgba(150, 150, 150, 0.09),
        0px 3px 7px 0px rgba(150, 150, 150, 0.1) !important;

    margin-top: 10px;
}

/* Contenedor interno del contenido */
.account-popup-content {
    background-color: #fff;
    /* Ajusta el padding si quieres más espacio “interior” */
    padding: 1rem 1.5rem;
    border-radius: 4px;
}

ul#cart-items {
    left: -190px !important;
}

span.triangulo-cat.favorite-dropdown-menu-light {
    left: 97px;
    top: -12px;
}

ul#favorite-items {
    left: -92px;
    width: 380px;
    top: 58px !important;
}
ul.dropdown-menu.dropdown-menu-end.dropdown-account.show {
    min-width: 200px !important;
    right: -42px;
    box-shadow: 0px 85px 24px 0px rgba(150, 150, 150, 0),
        0px 54px 22px 0px rgba(150, 150, 150, 0.01),
        0px 31px 18px 0px rgba(150, 150, 150, 0.05),
        0px 14px 14px 0px rgba(150, 150, 150, 0.09),
        0px 3px 7px 0px rgba(150, 150, 150, 0.1) !important;
}

.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.dropdown-menu .dropdown-item i {
    margin-right: 8px;
}

/* Para el dropdown de Bootstrap */
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
    background-color: #ffc107 !important;
    color: #000 !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.dropdown-menu .dropdown-item {
    text-decoration: none !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
    text-decoration: none !important;
}

.dropdown-menu .dropdown-item:focus i,
.dropdown-menu .dropdown-item:active i {
    color: #212529 !important;
}

.dropdown-menu .dropdown-item i {
    color: #212529;
}
.dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Oscurecimiento */
    z-index: 999; /* Debe estar por debajo del z-index del dropdown */
    display: none; /* Oculto por defecto */
}

/* Cuando queremos mostrarlo, le agregamos .show */
.dropdown-overlay.show {
    display: block;
}

/* Asegúrate de que tus dropdowns tengan z-index mayor a 999 */
.dropdown-menu {
    z-index: 1000; /* Por ejemplo, para superponer el menú sobre el overlay */
}
span.triangulo-cat.cart-dropdown-menu-light {
    position: relative;
    top: -50px !important;
    left: 180px;
}

span.triangulo-cat.notification-dropdown-menu-light {
    top: -12px !important;
    left: 215px;
}

ul#notification-items {
    top: 58px;
}

ul.dropdown-menu.dropdown-menu-end.dropdown-menu-light.idioma-dropdown.show {
    right: -35px;
}

ul.dropdown-menu.dropdown-menu-end.dropdown-account.desconected.show {
    right: -93px;
    width: 235px;
}

img.img-user-header.conect {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffffff;
}

/* header estiles and resposive */
.idioma-btn {
    height: 32px;
    padding: 0 16px;
    gap: 8px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffc107;
    border: none;
    color: #212529;
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
    transition: background-color 0.15s ease;
}

.idioma-btn.dropdown-toggle::after {
    display: none;
}

.idioma-btn:hover {
    background-color: #e0a800;
}

.idioma-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(223, 179, 0, 0.5);
}
#searchForm {
    display: flex !important;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 19.5px;
    overflow: hidden;
    height: 40px;
    max-width: 553px !important;
}

#searchForm .form-control {
    flex: 1;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #fff !important;
    padding: 0 16px;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
}

#searchForm .form-control::placeholder {
    color: #fff !important;
    opacity: 1;
}
#searchForm .form-control::-webkit-input-placeholder {
    color: #fff !important;
    opacity: 1;
}
#searchForm .form-control::-moz-placeholder {
    color: #fff !important;
    opacity: 1;
}
#searchForm .form-control:-ms-input-placeholder {
    color: #fff !important;
    opacity: 1;
}
#searchForm .form-control:-moz-placeholder {
    color: #fff !important;
    opacity: 1;
}

#searchForm .form-control:focus {
    outline: none;
    box-shadow: none;
}

#searchForm .search {
    flex: 0 0 auto;
    width: 98px;
    height: 32px;
    background-color: #ffc700;
    border: none;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 8px !important;
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 12px;
    color: #000a29;
    margin-right: 3px;
}
#searchForm .search {
    transition: background-color 0.15s ease;
}

#searchForm .search:hover {
    background-color: #e0a800;
}

#searchForm .search:focus {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(223, 179, 0, 0.5);
}

.header-inferior .nav-link {
    transition: color 0.2s ease, background-color 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.header-inferior .nav-link:hover {
    color: #ffc700 !important;
    text-decoration: none;
}
.header-inferior .nav-link {
    transition: color 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.header-inferior .nav-link:hover {
    color: #ffc700 !important;
    background: none;
}

.header-superior a {
    transition: color 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.header-superior a:hover {
    color: #ffc700 !important;
    text-decoration: underline;
}

.container.d-flex.justify-content-end.align-items-center.header-superior-container
    a:hover {
    color: #ffc107 !important;
}

/* search input */
/* Mantener el fondo del input transparente */
#searchForm .form-control,
#searchForm .form-control:focus {
    background: transparent !important;
    color: #fff !important;
}

/* Contenedor de los resultados */
/* 1) Permite que el dropdown sobresalga */
#searchForm {
    position: relative;
    overflow: visible !important;
    z-index: 100; /* por si tienes otros elementos con z-index */
}

/* 2) Contenedor absoluto */
.autocomplete {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-width: 553px;
    z-index: 2000;
    pointer-events: none; /* hasta que llenes items */
}
.autocomplete {
    display: none;
}
/* 3) Lista con fondo y scroll */
.autocomplete-items {
    pointer-events: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    max-height: 600px;
    overflow-y: auto;
    margin: 0;
    padding: 8px 0;
}

/* resto igual que antes */
.autocomplete-section-header {
    color: #212529;
    padding: 8px 16px;
    margin: 0;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
}
.autocomplete-divider {
    height: 1px;
    background: #eee;
    margin: 4px 0;
}
.autocomplete-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
}
.autocomplete-item + .autocomplete-item {
    border-top: 1px solid #eee;
}
.autocomplete-item:hover {
    background: rgba(0, 0, 0, 0.03);
}
.autocomplete-item img,
.autocomplete-item i {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 12px;
    color: #666;
}
.autocomplete-item .text-block {
    display: flex;
    flex-direction: column;
}
.autocomplete-item .line1 {
    font-size: 14px;
    font-weight: 600;
    color: #212529;
    line-height: 1.2;
}
.autocomplete-item .line2 {
    font-size: 13px;
    opacity: 0.8;
    margin-top: 2px;
}
.autocomplete-item .line3 {
    font-size: 13px;
    font-weight: 700;
    color: #ffc700;
    margin-top: 2px;
}

/* placeholder blanco */
#searchForm .form-control {
    color: #fff !important;
}
#searchForm .form-control::placeholder {
    color: #fff !important;
    opacity: 1 !important;
}
/* Contenedor horizontal de certificaciones */
.certifications-list {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 0 16px 8px; /* mismo padding lateral que las filas */
}

/* Cada “tarjeta” de certificación */
.cert-item {
    cursor: pointer;
    flex-shrink: 0;
}

/* Imagen dentro */
.cert-item img {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    border-radius: 4px;
}
.certifications-list {
    display: inline-flex !important;
}

/* Fila de autocompletar (categorías y productos) */
.autocomplete-item-search,
.autocomplete-item {
    display: flex;
    align-items: center;
    padding: 0px 15px;
    cursor: pointer;
    border: none !important;
}

.autocomplete-item-search + .autocomplete-item-search,
.autocomplete-item + .autocomplete-item {
    border-top: 1px solid #eee;
}
.autocomplete-item-search:hover,
.autocomplete-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Iconos o imágenes dentro de la fila */
.autocomplete-item-search img,
.autocomplete-item-search i,
.autocomplete-item img,
.autocomplete-item i {
    width: 32px;
    height: 30px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 4px;
    color: #666;
    margin-top: 8px;
}

/* Bloque de texto */
.autocomplete-item-search .text-block,
.autocomplete-item .text-block {
    display: flex;
    flex-direction: column;
}

/* Línea principal */
.autocomplete-item-search .line1,
.autocomplete-item .line1 {
    font-size: 14px;
    font-weight: 600;
    color: #212529;
    line-height: 1.2;
}

/* Línea secundaria */
.autocomplete-item-search .line2,
.autocomplete-item .line2 {
    font-size: 13px;
    opacity: 0.8;
    margin-top: 2px;
}

/* Precio/producto extra */
.autocomplete-item-search .line3,
.autocomplete-item .line3 {
    font-size: 13px;
    font-weight: 700;
    color: #ffc700;
    margin-top: 2px;
}

/* 1) Forzar placeholder blanco en ambos forms */
#searchForm .form-control,
#searchFormMobile .form-control {
    color: #fff !important;
}
#searchForm .form-control::placeholder,
#searchFormMobile .form-control::placeholder {
    color: #fff !important;
    opacity: 1 !important;
}

/* 2) Que el dropdown no se corte */
#searchForm,
#searchFormMobile {
    position: relative !important;
    overflow: visible !important;
}
.container.d-flex.justify-content-end.align-items-center a:hover {
    color: #ffc107 !important;
}

/* --- SOLO ES OCULTAR LA FRANJA SUPERIOR --- */
@media (min-width: 992px) {
    /* ❶– navbar (logo + buscador + iconos) sigue sticky — ya lo tienes */
    nav.navbar.desktop-sticky {
        position: sticky;
        top: 0;
        z-index: 1030;
    }

    /* ❷– Franja superior con animación */
    .header-superior {
        transition: transform 0.3s ease;
        will-change: transform;
    }

    /*  ⬇️  ¡activa la clase que el JS añade!  */
    .header-superior.hide {
        transform: translateY(-100%);
    }
}
/* =============================== */
/*  DESKTOP – barras pegajosas     */
/*  (solo oculta la franja superior) */
/* =============================== */
@media (min-width: 992px) {
    /* ❶- NAV (logo + buscador + iconos) */
    nav.navbar.desktop-sticky {
        position: sticky;
        top: 0; /* siempre arriba          */
        z-index: 1030; /* sobre el contenido      */
    }

    /* ❷- BANDA DE CATEGORÍAS (header-inferior)
          se “pega” justo debajo del NAV  */
    .header-inferior {
        position: sticky;
        top: 90px;
        z-index: 1029;
    }

    /* ❸- FRANJA SUPERIOR (links + reloj) */
    .header-superior {
        transition: transform 0.3s ease;
        will-change: transform;
    }
    .header-superior.hide {
        /* la clase la pone el JS */
        transform: translateY(-100%);
    }

    /* ❹- Cuando la franja superior desaparece
          no cambia nada: nav sigue en top:0,
          header-inferior sigue justo debajo   */
}

/* ---------- «New products»  ---------- */
.section-title-block.custon-home-tittle {
    width: 100%;
    height: 56px;
    border-radius: 5px;
    gap: 16px;
    padding: 16px;
    background: white;
}
.section-title-block.custon-home-tittle .section-title {
    margin: 0; /* sin margen extra  */
    font-weight: 700;
    font-size: 1.35rem; /* ≈ 22 px           */
    color: #001458; /* azul corporativo  */
}

/* si no quieres mostrar subtítulo ni línea divisoria */
.section-title-block.custon-home-tittle .section-subtitle,
.section-title-block.custon-home-tittle .section-divider {
    display: none;
}
button.btn.btn-primary.buy-now-btn.add-to-cart-btn {
    border-radius: 4px;
    padding: 8px 20px !important;
    background: #ff6701 !important;
    height: 32px;
}
button.btn.btn-primary.buy-now-btn.add-to-cart-btn:hover {
    background: #ff6701ad !important;
}
/* --- estilo base (igual alto que el naranja) --- */
.forklift-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; /* mismo alto y ancho para que sea cuadrado */
    height: 32px; /* igual que tu botón naranja */
    padding: 0; /* sin relleno extra */
    border-radius: 4px; /* mismo radio que el buy-now-btn */
    border: 1px solid #dee2e6; /* gris claro de outline-primary */
    background-color: #fff; /* fondo blanco */
    margin: 0 8px; /* separación izquierda y derecha */
    transition: background-color 0.2s, border-color 0.2s;
}

/* centrar y dimensionar el SVG */
.forklift-btn svg {
    flex-shrink: 0;
    width: 16px;
    height: 12px;
}

/* --- hover “lleno” naranja + icono blanco --- */
.forklift-btn:hover {
    background-color: #a1a1a1;
    border-color: #a1a1a1;
}

.forklift-btn:hover svg path {
    fill: #001458;
}