/* Reviews Container - Force Single Column */
#reviews {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    /* Override potential grid */
}

/* Comments Section (The List) */
#reviews #comments {
    width: 100% !important;
    float: none !important;
    order: 3;
    /* Show last */
}

/* Review Form Wrapper (Where the "Only registered..." notice lives) */
#reviews #review_form_wrapper {
    width: 100% !important;
    float: none !important;
    margin-top: 0 !important;
    order: 2;
    /* Show after header, before list */
    border: none !important;
    padding: 0 !important;
}

/* Header Handling */
#reviews #comments h2 {

    /* If the H2 is inside #comments, we might need to visually move it? 
       Usually the structure is:
       #reviews
         #comments
/* Reviews Container - Force Single Column */
    #reviews {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        grid-template-columns: 1fr !important;
        /* Override potential grid */
    }

    /* Comments Section (The List) */
    #reviews #comments {
        width: 100% !important;
        float: none !important;
        order: 3;
        /* Show last */
    }

    /* Review Form Wrapper (Where the "Only registered..." notice lives) */
    #reviews #review_form_wrapper {
        width: 100% !important;
        float: none !important;
        margin-top: 0 !important;
        order: 2;
        /* Show after header, before list */
        border: none !important;
        padding: 0 !important;
    }

    /* Header Handling */
    #reviews #comments h2 {
        /* If the H2 is inside #comments, we might need to visually move it? 
       Usually the structure is:
       #reviews
         #comments
           h2 "Reviews"
           ol.commentlist
         #review_form_wrapper
    */
        /* We can't easily extract the H2 with CSS only if it's inside #comments.
       But if the user wants the notice "Below the header", and header is in #comments,
       we might need to keep #comments first, but move the LIST down.
    */
    }

    /* Better Approach with Flex if H2 is in #comments:
   We make #comments display:contents or flex column? 
   No, let's keep it simple first. If the notice is "Only registered...", 
   let's put it at the very top or valid position.
   User said: "Abajo del encabezado".
   
   If we can't extract H2, we might just put the notice above the list inside #comments via JS?
   Or just Stack them:
   1. Header (in #comments)
   2. Notice (in #review_form_wrapper)
   3. List (in #comments)
   
   Hard to do 1, 2, 3 with CSS if 1&3 are siblings in Parent A, and 2 is in Parent B.
   
   Let's try standard full width first.
*/

    /* Clean List Styling */
    #reviews .commentlist {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0 !important;
        margin-top: 20px !important;
    }

    #reviews .commentlist li {
        display: block !important;
        width: 100% !important;
        background: transparent;
        padding: 0;
        border: none;
        margin-bottom: 20px !important;
        float: none !important;
        clear: both;
        text-align: left !important;
        /* Force left alignment */
    }

    /* Notice Styling */
    .woocommerce-verification-required {
        background: transparent;
        /* Remove yellow bg */
        border: none;
        /* Remove yellow border */
        color: #555;
        /* Neutral color */
        padding: 15px 0;
        /* Remove side padding if distinct bg is gone */
        margin-bottom: 20px;
        text-align: left;
        /* Align left */
    }