/* =========================
   GLOBAL
========================= */

body{

    margin: 0;

    padding: 0;

    background:
    linear-gradient(
        180deg,
        #070b14 0%,
        #0f1625 100%
    );

    color: white;

    overflow-x: hidden;

    font-family: 'Inter', sans-serif;

}

/* =========================
   PRODUCT PAGE
========================= */

.product-page{

    width: 100%;

    min-height: 100vh;

    padding:
    50px 30px 100px;

    overflow-x: hidden;

}

/* =========================
   CONTAINER
========================= */

.product-container{

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
    1.1fr 0.9fr;

    gap: 50px;

    align-items: flex-start;

}

/* =========================
   LEFT SIDE
========================= */

.product-left{

    display: flex;

    flex-direction: column;

    gap: 28px;

}

/* =========================
   GALLERY
========================= */

.product-gallery{

    display: flex;

    flex-direction: column;

    gap: 18px;

}

/* =========================
   MAIN IMAGE
========================= */

.product-main-image{

    position: relative;

    width: 100%;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.02)
    );

    border:
    1px solid rgba(255,255,255,0.06);

    border-radius: 36px;

    overflow: hidden;

    backdrop-filter: blur(12px);

    box-shadow:
    0 25px 80px rgba(0,0,0,0.35);

}

.product-main-image img{

    width: 100%;

    height: 760px;

    object-fit: contain;

    padding: 40px;

    display: block;

}

/* =========================
   PROMO BADGE
========================= */

.product-promo-badge{

    position: absolute;

    top: 24px;

    left: 24px;

    z-index: 30;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
    12px 18px;

    border-radius: 999px;

    background:
    linear-gradient(
        135deg,
        #ff7300 0%,
        #ffb300 100%
    );

    color: white;

    font-size: 15px;

    font-weight: 900;

    letter-spacing: .3px;

    box-shadow:
    0 14px 35px rgba(255,140,0,0.35);

    animation:
    pulsePromo 2s infinite;

}

/* =========================
   ANIMATION
========================= */

@keyframes pulsePromo{

    0%{

        transform: scale(1);

    }

    50%{

        transform: scale(1.05);

    }

    100%{

        transform: scale(1);

    }

}

/* =========================
   THUMBNAILS
========================= */

.product-thumbnails{

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

}

.product-thumbnail{

    width: 88px;

    height: 88px;

    border-radius: 18px;

    overflow: hidden;

    cursor: pointer;

    background:
    rgba(255,255,255,0.04);

    border:
    2px solid transparent;

    transition: .2s;

}

.product-thumbnail:hover{

    transform: translateY(-3px);

}

.product-thumbnail.active{

    border-color: #00d9ff;

    box-shadow:
    0 0 25px rgba(0,217,255,0.25);

}

.product-thumbnail img{

    width: 100%;

    height: 100%;

    object-fit: cover;

}

/* =========================
   RIGHT SIDE
========================= */

.product-info{

    position: sticky;

    top: 30px;

    display: flex;

    flex-direction: column;

    gap: 28px;

}

/* =========================
   CATEGORY
========================= */

.product-category{

    width: fit-content;

    padding:
    10px 18px;

    border-radius: 999px;

    background:
    rgba(0,217,255,0.12);

    color: #00d9ff;

    font-size: 13px;

    font-weight: 700;

}

/* =========================
   TITLE
========================= */

.product-title{

    font-size: 38px;

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -1.5px;

}

/* =========================
   DESCRIPTION
========================= */

.product-description{

    font-size: 15px;

    line-height: 1.9;

    color: #a8b1c4;

}

/* =========================
   PRICE AREA
========================= */

.product-price{

    display: flex;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;

}

/* OLD */

.product-old-price{

    font-size: 24px;

    text-decoration: line-through;

    color: #7f899b;

}

/* CURRENT */

.product-current-price{

    font-size: 48px;

    font-weight: 900;

    color: #00d9ff;

}

/* =========================
   PROMO PERCENT TEXT
========================= */

.product-discount{

    padding:
    10px 14px;

    border-radius: 14px;

    background:
    rgba(255,140,0,0.15);

    color: #ff9d00;

    font-size: 14px;

    font-weight: 800;

}

/* =========================
   VARIATIONS
========================= */

.product-variation-block{

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.product-variation-block h3{

    font-size: 18px;

    font-weight: 700;

    color: #dce3ec;

}

.product-variation-block h3 span{

    color: #00d9ff;

}

/* =========================
   OPTIONS
========================= */

.variation-options{

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

}

/* =========================
   BUTTONS
========================= */

.variation-btn{

    min-height: 64px;

    padding:
    10px 18px;

    border-radius: 18px;

    border:
    2px solid transparent;

    background:
    rgba(255,255,255,0.04);

    color: white;

    display: flex;

    align-items: center;

    gap: 12px;

    cursor: pointer;

    transition: .2s;

    font-size: 14px;

    font-weight: 700;

    backdrop-filter: blur(8px);

}

.variation-btn:hover{

    transform: translateY(-3px);

}

.variation-btn.active{

    border-color: #00d9ff;

    background:
    rgba(0,217,255,0.12);

    box-shadow:
    0 0 20px rgba(0,217,255,0.18);

}

/* =========================
   COLOR
========================= */

.color-btn img{

    width: 46px;

    height: 46px;

    border-radius: 12px;

    object-fit: cover;

}

/* =========================
   SIZE
========================= */

.size-btn{

    justify-content: center;

    min-width: 90px;

}

/* =========================
   STOCK
========================= */

.product-stock{

    font-size: 15px;

    font-weight: 700;

    color: #00ff99;

}

/* =========================
   QUANTITY
========================= */

.quantity-wrapper{

    display: flex;

    align-items: center;

    gap: 12px;

}

.quantity-wrapper button{

    width: 54px;

    height: 54px;

    border: none;

    border-radius: 16px;

    background:
    rgba(255,255,255,0.05);

    color: white;

    font-size: 22px;

    font-weight: 700;

    cursor: pointer;

    transition: .2s;

}

.quantity-wrapper button:hover{

    background: #00d9ff;

    color: black;

}

.quantity-wrapper input{

    width: 90px;

    height: 54px;

    border: none;

    outline: none;

    border-radius: 16px;

    background:
    rgba(255,255,255,0.05);

    color: white;

    text-align: center;

    font-size: 18px;

    font-weight: 700;

}

/* =========================
   ACTIONS
========================= */

.product-actions{

    display: flex;

    gap: 16px;

    flex-wrap: wrap;

}

/* =========================
   BUY BUTTON
========================= */

.buy-button{

    flex: 1;

    min-height: 62px;

    border: none;

    border-radius: 20px;

    background: #00d9ff;

    color: black;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    transition: .2s;

    box-shadow:
    0 10px 30px rgba(0,217,255,0.25);

}

.buy-button:hover{

    transform: translateY(-3px);

}

/* =========================
   SECONDARY BUTTON
========================= */

.secondary-button{

    flex: 1;

    min-height: 62px;

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius: 20px;

    background:
    rgba(255,255,255,0.05);

    color: white;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    transition: .2s;

}

.secondary-button:hover{

    transform: translateY(-3px);

}

/* =========================
   SPECS
========================= */

.product-specs{

    display: grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(220px,1fr)
    );

    gap: 18px;

}

/* CARD */

.spec-card{

    background:
    rgba(255,255,255,0.04);

    border:
    1px solid rgba(255,255,255,0.06);

    border-radius: 24px;

    padding: 24px;

    backdrop-filter: blur(8px);

}

.spec-card h3{

    font-size: 14px;

    color: #8d97a8;

    margin-bottom: 12px;

}

.spec-card p{

    font-size: 18px;

    font-weight: 700;

    line-height: 1.5;

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .product-container{

        grid-template-columns: 1fr;

        gap: 16px;

        overflow: hidden;

    }

    /* Desfaz as colunas: filhos viram itens diretos do grid */
    .product-left,
    .product-info{
        display: contents;
    }

    /* Evitar overflow em itens do grid */
    .product-container > *,
    .product-left > *,
    .product-info > *{
        min-width: 0;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* ── Ordem mobile ────────────────────────── */
    .product-category          { order: 1; }
    .product-title             { order: 2; }
    .product-gallery           { order: 3; }
    .product-price             { order: 4; }
    .product-variation-block   { order: 5; }
    .product-stock             { order: 6; }
    .qty-fav-row               { order: 7; }
    .product-actions           { order: 8; }
    .shipping-calc             { order: 9; }
    .product-description       { order: 10; }
    .product-specs             { order: 11; }
    .reviews-section.reviews-inline { order: 12; }

    /* ── Título mobile compacto ──────────────── */
    .product-title{
        font-size: 24px;
        letter-spacing: -0.5px;
        line-height: 1.2;
    }

    /* ── Galeria mobile ──────────────────────── */
    .product-main-image img{
        height: auto;
        max-height: 420px;
        object-fit: contain;
    }

    /* ── Descrição separada visualmente ───────── */
    .product-description{
        border-top: 1px solid rgba(255,255,255,0.06);
        padding-top: 20px;
        margin-top: 4px;
    }

    /* ── Specs ────────────────────────────────── */
    .product-specs{
        border-top: 1px solid rgba(255,255,255,0.06);
        padding-top: 20px;
    }

    /* ── Reviews dentro do fluxo mobile ──────── */
    .reviews-section.reviews-inline{
        border-top: 1px solid rgba(255,255,255,0.06);
        padding-top: 24px;
        margin-top: 4px;
    }

}

@media(max-width:900px){

    .product-current-price{

        font-size: 32px;

    }

    .product-main-image img{

        max-height: 380px;

    }

}

@media(max-width:700px){

    .product-page{

        padding:
        20px 14px 70px;

    }

    .product-container{
        gap: 12px;
    }

    .product-title{

        font-size: 22px;

        letter-spacing: -0.5px;

    }

    .product-current-price{

        font-size: 28px;

    }

    .product-main-image img{

        max-height: 340px;

        padding: 16px;

    }

    .product-actions{

        flex-direction: column;

    }

    .variation-btn{

        width: 100%;

    }

    .product-thumbnail{

        width: 60px;

        height: 60px;

    }

    .product-promo-badge{

        top: 12px;

        left: 12px;

        font-size: 12px;

        padding:
        8px 12px;

    }

    .shipping-calc{
        padding: 18px;
    }

}

@media(max-width:520px){

    .product-specs{

        grid-template-columns: 1fr;

    }

}

/* =========================================================
   CALCULADORA DE FRETE
========================================================= */

.shipping-calc{
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 24px;
}
.shipping-calc h3{
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    color: white;
}
.shipping-form{
    display: flex;
    gap: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    transition: border-color .2s;
}
.shipping-form:focus-within{
    border-color: rgba(0,217,255,0.4);
}
.shipping-form input{
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: white;
    font-size: 14px;
    padding: 0 16px;
    height: 48px;
    font-family: 'Inter', sans-serif;
}
.shipping-form input::placeholder{
    color: #6f7694;
}
.shipping-form button{
    background: #00d9ff;
    color: black;
    border: none;
    font-weight: 700;
    font-size: 14px;
    padding: 0 22px;
    cursor: pointer;
    transition: background .2s;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}
.shipping-form button:hover{
    background: #00b8d9;
}
.shipping-link{
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: #00d9ff;
    opacity: .7;
    transition: opacity .2s;
}
.shipping-link:hover{
    opacity: 1;
}

/* Resultado */
.shipping-result{
    margin-top: 18px;
}
.shipping-dest{
    font-size: 13px;
    color: #8d95b3;
    margin-bottom: 12px;
}
.shipping-dest strong{
    color: white;
}
.shipping-options{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shipping-option{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
}
.shipping-icon{
    font-size: 20px;
    flex-shrink: 0;
}
.shipping-info{
    flex: 1;
}
.shipping-info strong{
    display: block;
    font-size: 13.5px;
    color: white;
    margin-bottom: 2px;
}
.shipping-info small{
    color: #8d95b3;
    font-size: 12px;
}
.shipping-price{
    font-size: 15px;
    font-weight: 800;
    color: #00d9ff;
    white-space: nowrap;
}
.shipping-error{
    color: #ff6b6b;
    font-size: 13px;
}
.shipping-loading{
    color: #8d95b3;
    font-size: 13px;
}

/* =========================================================
   AVALIAÇÕES
========================================================= */

.reviews-section{
    width: 100%;
    padding: 0 30px 80px;
}
/* Quando está dentro da coluna direita */
.reviews-section.reviews-inline{
    padding: 0;
    margin-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 32px;
}
.reviews-inline .reviews-container{
    max-width: 100%;
}
.reviews-inline .reviews-header h2{
    font-size: 22px;
    margin-bottom: 18px;
}
.reviews-inline .reviews-summary{
    flex-direction: column;
    gap: 20px;
}
.reviews-inline .reviews-bars{
    max-width: 100%;
}
.reviews-inline .reviews-big-number{
    font-size: 42px;
}
.reviews-inline .reviews-score{
    min-width: auto;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.reviews-inline .review-form-box{
    padding: 20px;
}
.reviews-inline .review-card{
    padding: 18px;
}
.reviews-container{
    max-width: 1500px;
    margin: 0 auto;
}

.reviews-header{
    margin-bottom: 32px;
}
.reviews-header h2{
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 24px;
    color: white;
}

/* Resumo */
.reviews-summary{
    display: flex;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.reviews-loading{
    color: rgba(255,255,255,.4);
    font-size: 14px;
}
.reviews-empty p{
    color: rgba(255,255,255,.4);
    font-size: 14px;
}
.reviews-score{
    text-align: center;
    min-width: 140px;
}
.reviews-big-number{
    display: block;
    font-size: 52px;
    font-weight: 900;
    color: white;
    line-height: 1;
}
.reviews-score-stars{
    margin: 10px 0 8px;
}
.reviews-total-count{
    display: block;
    font-size: 13px;
    color: #8d95b3;
    margin-top: 4px;
}
.reviews-inline .reviews-total-count{
    display: inline;
    margin-top: 0;
}
.reviews-inline .reviews-score-stars{
    margin: 0;
}

/* Barras */
.reviews-bars{
    flex: 1;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reviews-bar-row{
    display: flex;
    align-items: center;
    gap: 10px;
}
.reviews-bar-label{
    font-size: 13px;
    color: #8d95b3;
    min-width: 36px;
    text-align: right;
}
.reviews-bar-track{
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.reviews-bar-fill{
    height: 100%;
    background: #ffb800;
    border-radius: 4px;
    transition: width .4s ease;
}
.reviews-bar-count{
    font-size: 12px;
    color: rgba(255,255,255,.35);
    min-width: 24px;
}

/* Stars */
.star{ color: rgba(255,255,255,.15); }
.star.filled{ color: #ffb800; }
.star.half{ color: #ffb800; opacity: .6; }
.star.empty{ color: rgba(255,255,255,.12); }

/* Formulário */
.review-form-box{
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 32px;
}
.review-form-box h3{
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 18px;
}
.review-stars-input{
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}
.review-stars-input span{
    font-size: 32px;
    color: rgba(255,255,255,.15);
    cursor: pointer;
    transition: color .15s, transform .15s;
}
.review-stars-input span:hover{
    transform: scale(1.2);
}
.review-stars-input span.active{
    color: #ffb800;
}
.review-input,
.review-textarea{
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 14px 16px;
    color: white;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    margin-bottom: 12px;
    transition: border-color .2s;
    resize: vertical;
}
.review-input:focus,
.review-textarea:focus{
    outline: none;
    border-color: rgba(0,217,255,.4);
}
.review-input::placeholder,
.review-textarea::placeholder{
    color: #6f7694;
}
.review-submit-btn{
    background: #00d9ff;
    color: black;
    border: none;
    padding: 14px 28px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s;
    font-family: 'Inter', sans-serif;
}
.review-submit-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,217,255,.25);
}
.review-submit-btn:disabled{
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}
.review-msg{
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .88rem;
}
.review-msg.ok{
    background: rgba(0,208,132,.1);
    border: 1px solid rgba(0,208,132,.3);
    color: #00d084;
}
.review-msg.err{
    background: rgba(255,68,68,.1);
    border: 1px solid rgba(255,68,68,.3);
    color: #ff8888;
}

/* Cards */
.reviews-list{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.review-card{
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 18px;
    padding: 24px;
}
.review-card-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.review-card-date{
    font-size: 12px;
    color: rgba(255,255,255,.3);
}
.review-card-title{
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}
.review-card-text{
    font-size: 14px;
    line-height: 1.7;
    color: #a8b1c4;
    margin-bottom: 14px;
}
.review-card-author{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.review-author-name{
    font-size: 13px;
    font-weight: 700;
    color: white;
}
.review-author-rank{
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,.06);
    color: #8d95b3;
}
.review-verified{
    font-size: 11px;
    color: #00d084;
    font-weight: 600;
}
.review-card-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:10px;
    flex-wrap:wrap;
}
.review-util-btn{
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    padding:6px 14px;
    color:rgba(255,255,255,.5);
    font-size:12px;
    font-family:Inter,sans-serif;
    cursor:pointer;
    transition:.2s;
    white-space:nowrap;
}
.review-util-btn:hover{
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.75);
    border-color:rgba(255,255,255,.15);
}
.review-util-btn.active{
    background:rgba(0,208,132,.08);
    border-color:rgba(0,208,132,.25);
    color:#00d084;
}
.review-util-btn:disabled{
    opacity:.5;
    cursor:default;
}
.util-icon{font-size:13px}
.util-count{font-size:11px;opacity:.7}

/* Paginação */
.reviews-pagination{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.review-pag-btn{
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    color: #8d95b3;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
    font-family: 'Inter', sans-serif;
}
.review-pag-btn:hover{
    border-color: rgba(0,217,255,.3);
    color: #00d9ff;
}
.review-pag-btn.active{
    background: #00d9ff;
    color: black;
    border-color: #00d9ff;
}

/* Responsive */
@media(max-width:700px){
    .reviews-section{
        padding: 0 16px 60px;
    }
    .reviews-section.reviews-inline{
        padding: 0;
        padding-top: 24px;
        margin-top: 24px;
    }
    .reviews-header h2{
        font-size: 22px;
    }
    .reviews-summary{
        flex-direction: column;
        gap: 20px;
    }
    .reviews-bars{
        max-width: 100%;
    }
    .review-form-box{
        padding: 20px;
    }
    .review-stars-input span{
        font-size: 28px;
    }
    .review-card{
        padding: 18px;
    }
    .shipping-calc{
        padding: 18px;
    }
}
/* Review author avatar & popup */
.review-author-avatar-wrap{
    position:relative;
    cursor:pointer;
    flex-shrink:0;
}
.review-author-avatar{
    width:30px;height:30px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    border:1.5px solid rgba(255,255,255,.1);
}
.review-author-avatar-fallback{
    width:30px;height:30px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;
}
.review-author-tag{
    color:#6b7490;
    font-weight:400;
    font-size:12px;
}

/* Profile popup */
.review-profile-popup{
    position:absolute;
    bottom:calc(100% + 10px);
    left:0;
    z-index:100;
    background:rgba(12,16,30,.97);
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    padding:16px;
    min-width:280px;
    max-width:340px;
    box-shadow:0 12px 40px rgba(0,0,0,.6);
    backdrop-filter:blur(12px);
    opacity:0;
    transform:translateY(6px);
    transition:.2s;
    pointer-events:auto;
}
.review-profile-popup.visible{
    opacity:1;
    transform:translateY(0);
}
.rpp-header{
    display:flex;
    align-items:center;
    gap:12px;
}
.rpp-avatar-wrap{
    position:relative;
    flex-shrink:0;
}
.rpp-avatar{
    width:52px;height:52px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,.1);
}
.rpp-avatar-fallback{
    background:rgba(255,255,255,.06);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;
}
.rpp-rank-badge{
    position:absolute;
    bottom:-3px;right:-3px;
    width:22px;height:22px;
    object-fit:contain;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.rpp-info{line-height:1.3;min-width:0;overflow:hidden}
.rpp-nick{font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpp-tag{color:#6b7490;font-weight:500}
.rpp-name{font-size:12px;color:rgba(255,255,255,.5)}
.rpp-stats{
    font-size:11px;
    color:#8d95b3;
    margin-top:3px;
    display:flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
}
.rpp-sep{color:rgba(255,255,255,.15)}
.rpp-medals{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.06);
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}
.rpp-medal{
    width:28px;height:28px;
    border-radius:8px;
    background:rgba(255,184,0,.08);
    border:1px solid rgba(255,184,0,.2);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;
}
.rpp-ver-perfil{
    display:block;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.06);
    text-align:center;
    color:#00d9ff;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    transition:color .15s;
}
.rpp-ver-perfil:hover{color:#fff}
.qa-user-link,.review-author-name{
    text-decoration:none;
    color:inherit;
    transition:color .15s;
}
.qa-user-link:hover,.review-author-name:hover{
    color:#00d9ff;
}
.review-author-avatar-wrap{
    text-decoration:none;
}

/* ═══════════════════════════════════
   PERGUNTAS E RESPOSTAS
═══════════════════════════════════ */
.qa-section{
    margin-top:40px;
    padding-top:32px;
    border-top:1px solid rgba(255,255,255,.06);
}
.qa-form{
    display:flex;
    gap:10px;
    margin-bottom:28px;
}
.qa-input{
    flex:1;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:14px 18px;
    color:#fff;
    font-size:14px;
    font-family:Inter,sans-serif;
    outline:none;
    transition:.2s;
}
.qa-input:focus{border-color:rgba(0,217,255,.3)}
.qa-input::placeholder{color:rgba(255,255,255,.3)}
.qa-submit{
    padding:14px 24px;
    background:linear-gradient(135deg,#00d9ff,#0080ff);
    border:none;
    border-radius:14px;
    color:#000;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    white-space:nowrap;
    transition:.2s;
}
.qa-submit:hover{opacity:.85}
.qa-submit:disabled{opacity:.5;cursor:default}
.qa-login-link{
    text-decoration:none;
    color:rgba(255,255,255,.4);
    cursor:pointer;
    display:flex;align-items:center;
}
.qa-login-link:hover{color:#00d9ff;border-color:rgba(0,217,255,.2)}
.qa-empty{color:rgba(255,255,255,.3);font-size:14px;text-align:center;padding:20px 0}

/* Items */
.qa-item{
    padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,.04);
}
.qa-item:last-child{border-bottom:none}
.qa-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
}
.qa-avatar-wrap{position:relative;cursor:pointer;flex-shrink:0}
.qa-avatar{
    width:32px;height:32px;
    border-radius:50%;
    object-fit:cover;
    border:1.5px solid rgba(255,255,255,.1);
    flex-shrink:0;
}
.qa-avatar-sm{width:26px;height:26px}
.qa-avatar-fb{
    background:rgba(255,255,255,.06);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;
}
.qa-user-info{
    display:flex;
    flex-direction:column;
    line-height:1.2;
    flex:1;
    min-width:0;
}
.qa-user-nick{font-size:13px;font-weight:700;color:#fff}
.qa-tag{color:#6b7490;font-weight:400}
.qa-date{font-size:11px;color:rgba(255,255,255,.25)}
.qa-text{
    font-size:14px;
    color:rgba(255,255,255,.8);
    line-height:1.5;
    padding-left:42px;
}

/* Respostas */
.qa-answer{
    margin-left:42px;
    padding:12px 16px;
    margin-top:8px;
    background:rgba(255,255,255,.02);
    border-left:2px solid rgba(255,255,255,.06);
    border-radius:0 12px 12px 0;
}
.qa-answer .qa-text{padding-left:36px}
.qa-loja-badge{
    display:inline-block;
    padding:1px 8px;
    background:rgba(0,217,255,.1);
    border:1px solid rgba(0,217,255,.25);
    border-radius:6px;
    color:#00d9ff;
    font-size:10px;
    font-weight:700;
    margin-left:6px;
    vertical-align:middle;
}

/* Reply */
.qa-reply-wrap{padding-left:42px;margin-top:8px}
.qa-reply-btn{
    background:none;
    border:none;
    color:rgba(255,255,255,.35);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    padding:4px 0;
    font-family:Inter,sans-serif;
}
.qa-reply-btn:hover{color:#00d9ff}
.qa-reply-form{
    display:flex;
    gap:8px;
    margin-top:8px;
}
.qa-reply-input{
    flex:1;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    padding:10px 14px;
    color:#fff;
    font-size:13px;
    font-family:Inter,sans-serif;
    outline:none;
}
.qa-reply-input:focus{border-color:rgba(0,208,132,.3)}
.qa-reply-send{
    padding:10px 18px;
    background:rgba(0,208,132,.15);
    border:1px solid rgba(0,208,132,.25);
    border-radius:10px;
    color:#00d084;
    font-weight:700;
    font-size:12px;
    cursor:pointer;
    white-space:nowrap;
    font-family:Inter,sans-serif;
}
.qa-reply-send:hover{background:rgba(0,208,132,.25)}
.qa-avatar-wrap{position:relative;cursor:pointer;flex-shrink:0}

/* Q&A delete button (moderators) */
.qa-delete{
    background:none;
    border:none;
    color:rgba(255,255,255,.15);
    font-size:14px;
    cursor:pointer;
    padding:4px 8px;
    border-radius:8px;
    margin-left:auto;
    transition:.2s;
    font-family:Inter,sans-serif;
    flex-shrink:0;
}
.qa-delete:hover{
    color:#ff5555;
    background:rgba(255,85,85,.1);
}
.qa-label{font-weight:800;color:#00d9ff;margin-right:4px}
.qa-label-r{color:#00d084}

/* Q&A answer like button */
.qa-answer-actions{
    padding-left:36px;
    margin-top:6px;
}
.qa-like-btn{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    padding:4px 12px;
    color:rgba(255,255,255,.4);
    font-size:12px;
    cursor:pointer;
    transition:.2s;
    font-family:Inter,sans-serif;
}
.qa-like-btn:hover{
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.65);
}
.qa-like-btn.active{
    background:rgba(0,208,132,.08);
    border-color:rgba(0,208,132,.25);
    color:#00d084;
}
.qa-like-btn:disabled{opacity:.5;cursor:default}