/* 1. DISEÑO PARA PC */
.custom-mobile-search-final {
    display: none !important;
}

.site-header .header-inner {
    display: flex !important;
    align-items: center;
}

.aws-container {
    flex: 1 !important;
    max-width: 800px !important;
    margin: 0 40px !important;
}

/* 2. DISEÑO PARA MÓVIL (LOGO A LA IZQUIERDA Y BUSCADOR) */
@media (max-width: 991px) {
    
    /* FORZAR LOGO A LA IZQUIERDA */
    .site-header .site-branding, 
    .site-header .logo,
    .site-header .header-logo {
        margin-left: 15px !important;
        margin-right: auto !important;
        text-align: left !important;
    }

    .site-header .header-inner {
        justify-content: flex-start !important;
        display: flex !important;
    }

    /* BUSCADOR */
    .custom-mobile-search-final {
        display: block !important;
        width: 100% !important;
        padding: 10px 15px !important;
        background: #ffffff !important;
        position: fixed !important;
        top: 60px !important; /* Altura donde termina el logo */
        left: 0;
        right: 0;
        z-index: 9999 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    body {
        padding-top: 125px !important; /* Espacio para Header + Buscador */
    }
    
    .site-header {
        top: 0 !important;
        position: fixed !important;
        width: 100% !important;
        z-index: 10000 !important;
        height: 60px !important;
        background: #00b1ff !important;
    }
}

/* 3. ESTILO DE LUPA Y BORDES */
.aws-container .aws-search-btn {
    background-color: #00b1ff !important;
    border-radius: 0 30px 30px 0 !important;
    width: 50px !important;
}

.aws-container .aws-search-field {
    border-radius: 30px 0 0 30px !important;
    border: 1px solid #00b1ff !important;
    height: 42px !important;
}




/* Estilo para que el SKU parezca una categoría más */
.custom-sku-meta {
    font-size: 13px !important; /* Ajusta según el tamaño de tu tema */
    color: #777 !important; /* Color gris típico de las categorías */
    margin-left: 10px !important; /* Separación de la categoría */
    display: inline-block !important;
}


/* Forzar ancho máximo en Header y Footer */
header, footer, .site-header, .site-footer {
    max-width: 1200px !important; /* Ajusta a 1200 o el ancho de tu web */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Asegurar que el fondo no se rompa */
body.single-product {
    display: flex;
    flex-direction: column;
    align-items: center;
}