/* =========================================================
   DOLCI HANDS — RESEÑAS
   IDENTIDAD VISUAL
========================================================= */


/* =========================================================
   BASE
========================================================= */

.reviews-page {
    width: 100%;
    min-height: calc(100vh - 80px);

    background:
        var(--cream, #f7f0e8);

    color:
        var(--chocolate, #351f19);

    overflow-x: hidden;
}

.reviews-page *,
.reviews-page *::before,
.reviews-page *::after {
    box-sizing: border-box;
}

.reviews-page img {
    display: block;
    max-width: 100%;
}


/* =========================================================
   CONTENEDOR
========================================================= */

.reviews-container {
    width: min(1180px, calc(100% - 72px));

    margin: 0 auto;

    padding:
        72px 0 100px;
}


/* =========================================================
   HERO
========================================================= */

.reviews-hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: end;

    gap: 50px;

    margin-bottom: 38px;
}

.reviews-hero-content {
    max-width: 680px;
}

.reviews-eyebrow {
    display: block;

    margin-bottom: 12px;

    color:
        var(--terracotta, #b86f5b);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.reviews-hero h1 {
    margin: 0;

    color:
        var(--chocolate-deep, #2f1c18);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 4.3vw, 58px);

    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -.035em;
}

.reviews-hero p {
    max-width: 520px;

    margin: 17px 0 0;

    color:
        var(--text-soft, #806a5e);

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   BOTÓN PRINCIPAL
========================================================= */

.reviews-primary-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-width: 168px;
    height: 46px;

    padding:
        0 20px;

    border:
        1px solid
        var(--terracotta, #b86f5b);

    border-radius: 11px;

    background:
        transparent;

    color:
        var(--terracotta-dark, #a95742);

    font-family: inherit;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.reviews-primary-button:hover {
    background:
        var(--terracotta, #b86f5b);

    color: #fff;

    transform:
        translateY(-1px);
}


/* =========================================================
   LAYOUT PRINCIPAL
========================================================= */

.reviews-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        280px;

    gap: 34px;

    align-items: start;
}

.reviews-main {
    min-width: 0;
}


/* =========================================================
   FILTROS
========================================================= */

.reviews-controls {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.2fr;

    gap: 10px;

    margin-bottom: 18px;

    padding:
        16px;

    border:
        1px solid
        rgba(74, 44, 36, .10);

    border-radius: 16px;

    background:
        rgba(255, 253, 248, .65);
}

.reviews-control {
    min-width: 0;
}

.reviews-control label {
    display: block;

    margin:
        0 0 6px;

    color:
        #765f55;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}

.reviews-control select,
.reviews-control input {
    width: 100%;
    height: 42px;

    padding:
        0 12px;

    border:
        1px solid
        #ddc9b5;

    border-radius: 10px;

    outline: none;

    background:
        #fffdf8;

    color:
        #4a2c24;

    font-family: inherit;

    font-size: 11px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.reviews-control select:focus,
.reviews-control input:focus {
    border-color:
        var(--terracotta, #b86f5b);

    box-shadow:
        0 0 0 3px
        rgba(184, 111, 91, .08);
}


/* =========================================================
   BUSCADOR
========================================================= */

.reviews-search-input {
    position: relative;
}

.reviews-search-input input {
    padding-right: 38px;
}

.reviews-search-input span {
    position: absolute;

    top: 50%;
    right: 13px;

    transform:
        translateY(-50%);

    color:
        #6f5a50;

    font-size: 18px;

    pointer-events: none;
}


/* =========================================================
   LISTA DE RESEÑAS
========================================================= */

.reviews-list {
    width: 100%;
}


/* =========================================================
   RESEÑA
========================================================= */

.review-item {
    display: grid;

    grid-template-columns:
        92px
        minmax(0, 1fr)
        155px;

    gap: 22px;

    align-items: center;

    min-height: 138px;

    padding:
        20px 0;

    border-bottom:
        1px solid
        rgba(74, 44, 36, .12);
}

.review-item:first-child {
    border-top:
        1px solid
        rgba(74, 44, 36, .12);
}


/* =========================================================
   IMAGEN DEL PRODUCTO
========================================================= */

.review-item-image {
    width: 92px;
    height: 92px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.review-item-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 7px 9px
            rgba(65, 39, 30, .10)
        );
}


/* =========================================================
   CONTENIDO
========================================================= */

.review-item-content {
    min-width: 0;
}

.review-rating {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 5px;
}

.review-stars {
    display: flex;

    align-items: center;

    color:
        var(--terracotta-dark, #a95742);

    font-size: 14px;

    letter-spacing: 1px;

    white-space: nowrap;
}

.star {
    line-height: 1;
}

.star-empty {
    opacity: .42;
}

.review-score {
    color:
        #806a5e;

    font-size: 10px;
    font-weight: 700;
}

.review-item h3 {
    margin:
        0 0 6px;

    color:
        var(--chocolate-deep, #2f1c18);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    font-weight: 500;

    line-height: 1.2;
}

.review-comment {
    max-width: 500px;

    margin: 0;

    color:
        #68554d;

    font-size: 11px;

    line-height: 1.55;
}


/* =========================================================
   AUTOR
========================================================= */

.review-author {
    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;
}

.review-author-avatar {
    width: 36px;
    height: 36px;

    flex:
        0 0 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        #efe1d5;

    color:
        #68463a;

    font-family:
        Georgia,
        serif;

    font-size: 14px;
}

.review-author > div {
    min-width: 0;
}

.review-author-name {
    display: block;

    margin-bottom: 3px;

    overflow: hidden;

    color:
        #4a2c24;

    font-size: 10px;
    font-weight: 700;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.review-author-date {
    display: block;

    color:
        #806a5e;

    font-size: 9px;

    white-space: nowrap;
}


/* =========================================================
   SIDEBAR — COMPARTE TU EXPERIENCIA
========================================================= */

.reviews-sidebar {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


/* =========================================================
   TARJETA PRINCIPAL
========================================================= */

.reviews-sidebar-card {
    padding: 26px 22px 22px;

    border:
        1px solid
        rgba(74, 44, 36, .09);

    border-radius: 17px;

    background:
        rgba(255, 253, 248, .82);

    box-shadow:
        0 8px 24px
        rgba(74, 44, 36, .045);

    text-align: center;
}


/* =========================================================
   ICONO
========================================================= */

.reviews-share-icon {
    width: 63px;
    height: 63px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin:
        0 auto 17px;

    background: transparent;

    border: 0;
}

.reviews-share-icon img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   TÍTULO
========================================================= */

.reviews-sidebar-card h2 {
    margin:
        0 0 10px;

    color:
        #351f19;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 19px;

    font-weight: 500;

    line-height: 1.2;
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.reviews-sidebar-card > p {
    max-width: 225px;

    margin:
        0 auto;

    color:
        #806a5e;

    font-size: 10px;

    line-height: 1.6;
}


/* =========================================================
   BOTÓN AÑADIR RESEÑA
========================================================= */

.reviews-sidebar .reviews-primary-button {
    width: 100%;
    height: 38px;

    min-width: 0;

    margin-top: 17px;

    border:
        1px solid
        var(--terracotta, #b86f5b);

    border-radius: 9px;

    background:
        var(--terracotta, #b86f5b);

    color:
        #fff;

    font-size: 10px;

    box-shadow: none;
}

.reviews-sidebar .reviews-primary-button:hover {
    background:
        var(--terracotta-dark, #a95742);

    color:
        #fff;

    transform:
        translateY(-1px);
}


/* =========================================================
   CUIDA TUS PALABRAS
========================================================= */

.reviews-community {
    margin-top:
        18px;

    padding:
        15px;

    border:
        1px solid
        rgba(74, 44, 36, .08);

    border-radius: 12px;

    background:
        #fcf7f1;

    text-align: left;
}

.reviews-community strong {
    display: block;

    margin-bottom: 6px;

    color:
        #4a2c24;

    font-size: 10px;

    font-weight: 800;
}

.reviews-community p {
    margin:
        0;

    color:
        #806a5e;

    font-size: 9px;

    line-height: 1.6;

    text-align: left;
}


/* =========================================================
   ESTADÍSTICAS
========================================================= */

.reviews-stats-card {
    margin-top: 16px;

    padding:
        22px 20px 20px;

    text-align: left;
}

.reviews-stats-card h2 {
    margin:
        0 0 18px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    font-weight: 500;

    color:
        #351f19;
}


/* =========================================================
   PROMEDIO
========================================================= */

.reviews-stat-number {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 4px;
}

.reviews-stat-number strong {
    color:
        #351f19;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 34px;

    font-weight: 500;

    line-height: 1;
}

.reviews-stat-stars {
    color:
        var(--terracotta-dark, #a95742);

    font-size: 14px;

    letter-spacing: 1px;

    white-space: nowrap;
}

.reviews-stat-caption {
    margin:
        0 0 20px;

    color:
        #806a5e;

    font-size: 9px;

    line-height: 1.5;
}


/* =========================================================
   DISTRIBUCIÓN
========================================================= */

.review-breakdown {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.review-breakdown-row {
    display: grid;

    grid-template-columns:
        64px
        minmax(0, 1fr)
        30px;

    align-items: center;

    gap: 7px;
}

.review-breakdown-row label {
    color:
        #68554d;

    font-size: 8px;

    white-space: nowrap;
}

.review-breakdown-row > span:last-child {
    color:
        #806a5e;

    font-size: 8px;

    text-align: right;
}

.review-breakdown-bar {
    height: 6px;

    overflow: hidden;

    border-radius: 999px;

    background:
        #eaded4;
}

.review-breakdown-bar span {
    display: block;

    width:
        var(--review-width, 0%);

    height: 100%;

    border-radius: inherit;

    background:
        var(--terracotta, #b86f5b);

    transition:
        width .3s ease;
}


/* =========================================================
   RESEÑAS VACÍAS
========================================================= */

.reviews-empty {
    padding:
        70px 20px;

    text-align: center;

    border:
        1px solid
        rgba(74, 44, 36, .10);

    border-radius: 16px;

    background:
        rgba(255, 253, 248, .55);
}

.reviews-empty h2 {
    margin:
        0 0 8px;

    color:
        #4a2c24;

    font-family:
        Georgia,
        serif;

    font-size: 22px;

    font-weight: 500;
}

.reviews-empty p {
    margin: 0;

    color:
        #806a5e;

    font-size: 11px;
}


/* =========================================================
   PAGINACIÓN
========================================================= */

.reviews-pagination {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    padding-top:
        20px;
}

.reviews-pagination button,
.reviews-pagination a {
    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;

    border-radius: 50%;

    background:
        transparent;

    color:
        #4a2c24;

    font-size: 10px;

    text-decoration: none;

    cursor: pointer;
}

.reviews-pagination .active {
    background:
        #4a2c24;

    color:
        #fffdf8;
}


/* =========================================================
   MODALES
========================================================= */

body.review-modal-open {
    overflow: hidden;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .reviews-container {
        width:
            min(
                calc(100% - 48px),
                760px
            );

        padding:
            58px 0 90px;
    }

    .reviews-hero {
        gap: 30px;
    }

    .reviews-hero h1 {
        font-size: 44px;
    }

    .reviews-layout {
        grid-template-columns: 1fr;
    }

    .reviews-sidebar {
        display: grid;

        grid-template-columns:
            1fr 1fr;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

    .reviews-container {
        width:
            calc(100% - 32px);

        padding:
            42px 0 90px;
    }


    /* HERO */

    .reviews-hero {
        display: block;

        margin-bottom: 24px;
    }

    .reviews-eyebrow {
        margin-bottom: 10px;

        font-size: 9px;
    }

    .reviews-hero h1 {
        max-width: 350px;

        font-size: 34px;

        line-height: 1.02;
    }

    .reviews-hero p {
        max-width: 340px;

        margin-top: 13px;

        font-size: 12px;

        line-height: 1.6;
    }

    .reviews-hero-action {
        width: 100%;
    }

    .reviews-primary-button {
        width: 100%;

        margin-top: 18px;
    }


/* =========================================================
   LAYOUT — MÓVIL
========================================================= */

.reviews-layout {
    display: flex;
    flex-direction: column;
}


/*
   Convertimos los contenedores intermedios
   en transparentes para poder ordenar
   sus elementos directamente.
*/

.reviews-main {
    display: contents;
}

.reviews-sidebar {
    display: contents;
}

.reviews-controls {
    display: contents;
}


/* =========================================================
   COMPARTE TU EXPERIENCIA
========================================================= */

.reviews-sidebar-card:first-child {
    order: 1;
}


/* =========================================================
   BUSCADOR
========================================================= */

.reviews-controls .reviews-search {
    order: 2;

    width: 100%;

    margin: 0 0 8px;
}


/* =========================================================
   ORDENAR
========================================================= */

.reviews-controls .reviews-control:nth-child(1) {
    order: 3;
}


/* =========================================================
   PRODUCTO
========================================================= */

.reviews-controls .reviews-control:nth-child(2) {
    order: 4;
}


/* =========================================================
   LISTA DE RESEÑAS
========================================================= */

.reviews-list {
    order: 5;
}


/* =========================================================
   PAGINACIÓN
========================================================= */

.reviews-pagination {
    order: 6;
}


/* =========================================================
   ESTADÍSTICAS
========================================================= */

.reviews-stats-card {
    order: 7;

    margin-top: 18px;
}


/* ICONO */

.reviews-sidebar-card:first-child
.reviews-share-icon {

    grid-column: 1;
    grid-row: 1 / span 2;

    width: 42px;
    height: 42px;

    margin: 0;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* TÍTULO */

.reviews-sidebar-card:first-child h2 {

    grid-column: 2;

    margin: 0;

    font-size: 18px;

    line-height: 1.2;
}


/* DESCRIPCIÓN */

.reviews-sidebar-card:first-child > p {

    grid-column: 2;

    margin: 0;

    font-size: 12px;

    line-height: 1.45;
}


/* BOTÓN */

.reviews-sidebar-card:first-child
.reviews-primary-button {

    grid-column: 1 / -1;

    width: 100%;

    margin-top: 10px;

    min-height: 44px;

    padding: 11px 16px;

    border-radius: 10px;

    font-size: 12px;
}


/* AVISO */

.reviews-sidebar-card:first-child
.reviews-community {

    grid-column: 1 / -1;

    width: 100%;

    margin-top: 10px;

    padding: 14px 15px;

    box-sizing: border-box;
}

.reviews-sidebar-card:first-child
.reviews-community strong {

    display: block;

    margin-bottom: 6px;

    font-size: 11px;

    line-height: 1.3;
}


.reviews-sidebar-card:first-child
.reviews-community p {

    margin: 0;

    font-size: 10px;

    line-height: 1.5;
}

/* =========================================================
   SIDEBAR EN MÓVIL
========================================================= */

.reviews-sidebar-card {
    width: 100%;

    padding:
        22px 18px;

    border-radius: 16px;
}


/* Comparte tu experiencia */

.reviews-sidebar-card:first-child {
    order: 1;
}


/* =========================================================
   ESTADÍSTICAS
========================================================= */

.reviews-stats-card {
    order: 7;

    margin-top: 18px;

    text-align: left;
}

.reviews-stats-card h2 {
    margin-bottom: 14px;

    font-size: 18px;
}

.reviews-stat-number {
    gap: 9px;
}

.reviews-stat-number strong {
    font-size: 34px;
}

.reviews-stat-stars {
    font-size: 13px;
}

.reviews-stat-caption {
    font-size: 9px;

    margin-bottom: 17px;
}

.review-breakdown {
    gap: 7px;
}

.review-breakdown-row {
    grid-template-columns:
        62px
        minmax(0, 1fr)
        28px;

    gap: 7px;
}

.review-breakdown-row label,
.review-breakdown-row > span:last-child {
    font-size: 8px;
}

.review-breakdown-bar {
    height: 6px;
}


    /* FILTROS */

    .reviews-controls {
        grid-template-columns:
            1fr 1fr;

        gap: 8px;

        margin-bottom: 20px;

        padding: 0;

        border: 0;

        background:
            transparent;
    }

    .reviews-control label {
        display: none;
    }

    .reviews-control select,
    .reviews-control input {
        height: 40px;

        border-radius: 10px;

        font-size: 10px;
    }

    .reviews-control:nth-child(3) {
        grid-column:
            1 / -1;
    }


    /* RESEÑAS */

    .review-item {
        grid-template-columns:
            64px
            minmax(0, 1fr);

        gap: 12px;

        align-items: start;

        min-height: 0;

        padding:
            18px 0;
    }

    .review-item-image {
        width: 64px;
        height: 64px;
    }

    .review-stars {
        font-size: 12px;
    }

    .review-score {
        font-size: 9px;
    }

    .review-item h3 {
        margin-bottom: 5px;

        font-size: 16px;
    }

    .review-comment {
        font-size: 10px;

        line-height: 1.5;
    }


    /* AUTOR */

    .review-author {
        grid-column:
            2;

        padding-top:
            9px;

        border-top:
            1px solid
            rgba(74, 44, 36, .08);
    }

    .review-author-avatar {
        width: 28px;
        height: 28px;

        flex-basis:
            28px;

        font-size: 11px;
    }

    .review-author-name {
        font-size: 9px;
    }

    .review-author-date {
        font-size: 8px;
    }


    /* EMPTY */

    .reviews-empty {
        padding:
            50px 15px;
    }

}


/* =========================================================
   MÓVILES PEQUEÑOS
========================================================= */

@media (max-width: 390px) {

    .reviews-container {
        width:
            calc(100% - 24px);

        padding-top:
            36px;
    }

    .reviews-hero h1 {
        font-size: 31px;
    }

    .review-item {
        grid-template-columns:
            58px
            minmax(0, 1fr);

        gap: 10px;
    }

    .review-item-image {
        width: 58px;
        height: 58px;
    }

    .review-item h3 {
        font-size: 15px;
    }

    .review-comment {
        font-size: 10px;
    }

}


/* =========================================================
   NAVBAR — DIVISOR
========================================================= */

.reviews-page {
    border-top: 1px solid rgba(74, 44, 36, .10);
}

/* =========================================================
   FILTROS MÓVILES — RESEÑAS
   CORRECCIÓN CONSOLIDADA
========================================================= */

.reviews-mobile-toolbar,
.reviews-mobile-filters-panel {
    display: none;
}


@media (max-width: 700px) {

    /* =====================================================
       ORDEN ORIGINAL — NO ALTERAR
    ===================================================== */

    .reviews-layout {
        display: flex;
        flex-direction: column;
    }

    .reviews-main {
        display: contents;
    }

    .reviews-sidebar {
        display: contents;
    }

    .reviews-controls {
        display: contents;
    }

    .reviews-sidebar-card:first-child {
        order: 1;
    }

    /*
       La barra móvil ocupa el lugar de los controles.
       No se cambia el orden del contenido original.
    */
    .reviews-mobile-toolbar {
        order: 2;
    }

    .reviews-list {
        order: 5;
    }


    /* =====================================================
       BARRA MÓVIL
       FILTROS IZQUIERDA + BUSCADOR DERECHA
    ===================================================== */

    .reviews-mobile-toolbar {
        position: relative;
        z-index: 10000;

        display: grid;

        grid-template-columns:
            auto
            minmax(0, 1fr);

        align-items: center;

        gap: 8px;

        width: 100%;

        margin:
            18px 0;
    }


    /* =====================================================
       BOTÓN COMPACTO DE FILTROS
    ===================================================== */

    .reviews-mobile-filters {
        position: relative;
        z-index: 10001;

        width: 48px;
        height: 44px;
    }

    .reviews-mobile-filters-button {
        position: relative;
        z-index: 10003;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 5px;

        width: 48px;
        height: 44px;

        padding: 0;

        box-sizing: border-box;

        border:
            1px solid
            rgba(74, 44, 36, .16);

        border-radius: 11px;

        background:
            #fffaf6;

        color:
            #4a2c24;

        cursor: pointer;

        transition:
            background .2s ease,
            border-color .2s ease;
    }

    .reviews-mobile-filters-button:hover {
        background:
            #f9f0e8;
    }

    .reviews-mobile-filters-button[aria-expanded="true"] {
        border-color:
            #bd725b;

        background:
            #f9eee7;
    }


    /* =====================================================
       ICONOS
    ===================================================== */

    .reviews-filter-icon,
    .reviews-filter-chevron {
        fill: none;

        stroke: currentColor;

        stroke-linecap: round;
        stroke-linejoin: round;

        flex-shrink: 0;
    }

    .reviews-filter-icon {
        width: 16px;
        height: 16px;

        stroke-width: 1.7;
    }

    .reviews-filter-chevron {
        width: 11px;
        height: 11px;

        stroke-width: 1.7;

        transition:
            transform .2s ease;
    }

    .reviews-mobile-filters-button[aria-expanded="true"]
    .reviews-filter-chevron {
        transform:
            rotate(180deg);
    }


    /* =====================================================
       BUSCADOR PRINCIPAL
    ===================================================== */

    .reviews-mobile-toolbar .reviews-search {
        display: block;

        width: 100%;
        min-width: 0;

        margin: 0;
    }

    .reviews-mobile-toolbar .reviews-search label {
        display: none;
    }

    .reviews-mobile-toolbar .reviews-search-input {
        width: 100%;
    }

    .reviews-mobile-toolbar
    .reviews-search-input input {
        width: 100%;
        height: 44px;

        box-sizing: border-box;

        padding:
            0 14px;

        border:
            1px solid
            rgba(74, 44, 36, .16);

        border-radius:
            11px;

        background:
            #fffaf6;

        color:
            #4a2c24;

        font-family:
            inherit;

        font-size:
            12px;

        outline:
            none;
    }

    .reviews-mobile-toolbar
    .reviews-search-input input:focus {
        border-color:
            #bd725b;
    }


    /* =====================================================
       CONTROLES DESKTOP OCULTOS
    ===================================================== */

    .reviews-control-sort,
    .reviews-control-product {
        display: none;
    }


    /* =====================================================
       PANEL DE FILTROS
       ABSOLUTO: NO EMPUJA LAS RESEÑAS
    ===================================================== */

    .reviews-mobile-filters-panel {
        position: absolute;

        top:
            calc(100% + 7px);

        left: 0;

        z-index: 10002;

        display: block;

        width:
            min(
                350px,
                calc(100vw - 32px)
            );

        max-height:
            calc(100vh - 155px);

        box-sizing: border-box;

        overflow-y: auto;

        padding:
            38px 16px 16px;

        border:
            1px solid
            rgba(74, 44, 36, .12);

        border-radius:
            4px
            14px
            14px
            14px;

        background:
            #fffdf9;

        box-shadow:
            0 12px 28px
            rgba(74, 44, 36, .13);

        visibility:
            hidden;

        opacity:
            0;

        pointer-events:
            none;

        transform:
            translateY(-4px);

        transform-origin:
            top left;

        transition:
            opacity .16s ease,
            transform .16s ease,
            visibility .16s ease;
    }

    .reviews-mobile-filters-panel.is-open {
        visibility:
            visible;

        opacity:
            1;

        pointer-events:
            auto;

        transform:
            translateY(0);
    }


    /* =====================================================
       INDICADOR — CONECTA EL PANEL CON EL BOTÓN
    ===================================================== */

    .reviews-mobile-filters-panel::before {
        content:
            "";

        position:
            absolute;

        top:
            -7px;

        left:
            17px;

        width:
            13px;

        height:
            13px;

        box-sizing:
            border-box;

        background:
            #fffdf9;

        border-top:
            1px solid
            rgba(74, 44, 36, .12);

        border-left:
            1px solid
            rgba(74, 44, 36, .12);

        transform:
            rotate(45deg);
    }


    /* =====================================================
       TÍTULO DEL PANEL
    ===================================================== */

    .reviews-mobile-filters-panel::after {
        content:
            "FILTROS";

        position:
            absolute;

        top:
            14px;

        left:
            16px;

        color:
            #6b5046;

        font-size:
            10px;

        font-weight:
            800;

        letter-spacing:
            .14em;

        pointer-events:
            none;
    }


    /* =====================================================
       CONTROLES INTERNOS
    ===================================================== */

    .reviews-mobile-filters-panel
    .reviews-control {
        display: block;

        width: 100%;

        margin:
            0 0 15px;
    }

    .reviews-mobile-filters-panel
    .reviews-control:last-child {
        margin-bottom:
            0;
    }

    .reviews-mobile-filters-panel
    .reviews-control label {
        display: block;

        margin:
            0 0 7px;

        color:
            #6b5046;

        font-size:
            9px;

        font-weight:
            800;

        letter-spacing:
            .11em;

        text-transform:
            uppercase;
    }


    /* =====================================================
       ORDENAR
    ===================================================== */

    .reviews-mobile-filters-panel
    select {
        width: 100%;
        height: 43px;

        box-sizing: border-box;

        padding:
            0 12px;

        border:
            1px solid
            rgba(74, 44, 36, .10);

        border-radius:
            9px;

        background:
            #fff;

        color:
            #4a2c24;

        font-family:
            inherit;

        font-size:
            11px;

        outline:
            none;
    }

    .reviews-mobile-filters-panel
    select:focus {
        border-color:
            #bd725b;
    }


    /* =====================================================
       BUSCADOR DE PRODUCTOS
    ===================================================== */

    .reviews-mobile-product-search {
        position:
            relative;

        width:
            100%;

        margin-bottom:
            9px;
    }

    .reviews-mobile-product-search svg {
        position:
            absolute;

        left:
            12px;

        top:
            50%;

        width:
            15px;

        height:
            15px;

        transform:
            translateY(-50%);

        fill:
            none;

        stroke:
            #8b7067;

        stroke-width:
            1.7;

        stroke-linecap:
            round;

        stroke-linejoin:
            round;

        pointer-events:
            none;
    }

    .reviews-mobile-product-search input {
        width:
            100%;

        height:
            43px;

        box-sizing:
            border-box;

        padding:
            0 12px 0 36px;

        border:
            1px solid
            rgba(74, 44, 36, .10);

        border-radius:
            9px;

        background:
            #fff;

        color:
            #4a2c24;

        font-family:
            inherit;

        font-size:
            11px;

        outline:
            none;
    }

    .reviews-mobile-product-search input:focus {
        border-color:
            #bd725b;
    }


    /* =====================================================
       LISTA DE PRODUCTOS
    ===================================================== */

    .reviews-mobile-product-list {
        display:
            flex;

        flex-direction:
            column;

        gap:
            2px;

        max-height:
            190px;

        overflow-y:
            auto;

        padding-right:
            2px;
    }

    .reviews-mobile-product-option {
        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        width:
            100%;

        min-height:
            38px;

        padding:
            7px 9px;

        border:
            0;

        border-radius:
            8px;

        background:
            transparent;

        color:
            #5e463e;

        font-family:
            inherit;

        font-size:
            11px;

        text-align:
            left;

        cursor:
            pointer;

        transition:
            background .15s ease;
    }

    .reviews-mobile-product-option:hover {
        background:
            #f8eee7;
    }

    .reviews-mobile-product-option.is-selected {
        background:
            #f5e5dc;

        color:
            #4a2c24;

        font-weight:
            600;
    }

    .reviews-mobile-product-check {
        display:
            none;

        font-size:
            12px;

        color:
            #bd725b;
    }

    .reviews-mobile-product-option.is-selected
    .reviews-mobile-product-check {
        display:
            inline;
    }


    /* =====================================================
       SCROLLBAR
    ===================================================== */

    .reviews-mobile-product-list::-webkit-scrollbar {
        width:
            4px;
    }

    .reviews-mobile-product-list::-webkit-scrollbar-track {
        background:
            transparent;
    }

    .reviews-mobile-product-list::-webkit-scrollbar-thumb {
        background:
            rgba(74, 44, 36, .18);

        border-radius:
            10px;
    }


    /* =====================================================
       CAPAS
    ===================================================== */

    .reviews-content,
    .reviews-list,
    .review-item {
        position:
            relative;

        z-index:
            1;
    }


    /* =====================================================
       ESTADÍSTICAS
       NO SE CAMBIA SU ORDEN ORIGINAL
    ===================================================== */

    .reviews-stats-card {
        width:
            100%;

        box-sizing:
            border-box;

        margin-top:
            18px;
    }
}


@media (max-width: 390px) {

    .reviews-mobile-toolbar {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        gap:
            7px;
    }

    .reviews-mobile-filters-panel {
        width:
            calc(100vw - 24px);

        max-width:
            350px;
    }
}


/* =========================================================
   CAPAS — MODALES POR ENCIMA DE LOS FILTROS MÓVILES
========================================================= */

@media (max-width: 700px) {

    /*
     * Los filtros pueden quedar por encima
     * del contenido normal de reseñas,
     * pero NUNCA por encima de un modal.
     */

    .reviews-mobile-toolbar,
    .reviews-mobile-filters-panel {
        z-index: 100;
    }


    /*
     * Los modales de reseñas siempre tienen
     * prioridad visual absoluta.
     */

    #review-product-modal,
    #review-form-modal {
        position: fixed;
        z-index: 99999;
    }
}


/* =========================================================
   CORRECCIÓN — BUSCADOR DESKTOP DE RESEÑAS
========================================================= */

@media (min-width: 701px) {

    .reviews-controls .reviews-search {
        display: block !important;
        grid-column: auto;
        width: 100%;
        margin: 0;
    }

    .reviews-controls .reviews-search label {
        display: block;
    }

    .reviews-controls .reviews-search-input {
        display: block;
        width: 100%;
    }

    .reviews-controls .reviews-search-input input {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

}


/* =========================================================
   CORRECCIÓN — BUSCADOR DESKTOP
   El buscador está dentro de .reviews-mobile-toolbar
   en el HTML, pero en desktop debe ocupar la 3ra columna.
========================================================= */

@media (min-width: 701px) {

    .reviews-mobile-toolbar {
        display: contents !important;
    }

    .reviews-mobile-toolbar .reviews-search {
        display: block !important;
        width: 100%;
        margin: 0;
        grid-column: 3;
    }

    .reviews-mobile-toolbar .reviews-search label {
        display: block;
    }

    .reviews-mobile-toolbar .reviews-search-input {
        display: block;
        width: 100%;
    }

    .reviews-mobile-toolbar .reviews-search-input input {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .reviews-mobile-filters-button {
        display: none !important;
    }

}


/* =========================================================
   MENSAJE "PRÓXIMAMENTE" — MÓVIL
========================================================= */

@media (max-width: 700px) {

    #review-unavailable-message {
        position: fixed !important;

        left: 50% !important;
        right: auto !important;

        bottom: 24px !important;

        width: calc(100% - 40px) !important;
        max-width: 420px !important;

        margin: 0 !important;

        transform: translateX(-50%) !important;

        box-sizing: border-box;

        z-index: 999999 !important;

        pointer-events: none;
    }

}