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

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f5f5f5;
    overflow-x: hidden;
}

/* HEADER SUPERIOR */
.app-header {
    position: sticky;
    /* fica colado no topo ao rolar */
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    background-color: #ffffff;
    border-bottom: 1px solid #eaeaea;
}

/* botões de ícone */
.header-icon-btn {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ícones */
.header-icon-btn i {
    font-size: 24px;
    color: #111111;
}

/* botão da esquerda (X) encostado na borda */
.header-left-btn {
    margin-right: auto;
}

/* container do lado direito */
.header-right {
    display: flex;
    align-items: center;
    gap: 18px;
    /* espaço entre os ícones */
}

/* botão do carrinho com badge */
.header-cart-btn {
    position: relative;
}

/* bolinha vermelha do carrinho */
.cart-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background-color: #ff3b30;
    color: #ffffff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    font-weight: 600;
}

/* efeito de toque (leve) */
.header-icon-btn:active i {
    transform: scale(0.92);
}

/* ========== MODAL COMPARTILHAR ========== */

.share-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 40;
    /* abaixo do header (50), acima do resto */
}

.share-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.share-sheet {
    width: 100%;
    max-width: 480px;
    background-color: #ffffff;
    border-radius: 16px 16px 0 0;
    padding: 12px 16px 20px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.16);
    transform: translateY(100%);
    transition: transform 0.22s ease-out;
}

.share-overlay.is-active .share-sheet {
    transform: translateY(0);
}

.share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.share-icon-btn {
    border: none;
    background: transparent;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.share-icon-btn i {
    font-size: 22px;
    color: #111111;
}

/* lupa só visual, sem interação */
.share-search {
    cursor: default;
    pointer-events: none;
}

.share-title {
    font-size: 15px;
    font-weight: 600;
    color: #111111;
}

/* opções de compartilhamento */
.share-options {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    cursor: pointer;
    border-radius: 50%;
}

.share-option {
    flex: 1;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

}

/* Cores reais iguais ao app */
.share-option[data-share="copy"] .share-option-icon {
    background: #0b84ff;
    /* azul link */
}

.share-option[data-share="whatsapp"] .share-option-icon,
.share-option[data-share="status"] .share-option-icon {
    background: #25d366;
    /* verde WhatsApp */
}

.share-option[data-share="instagram"] .share-option-icon {
    background: radial-gradient(circle at 30% 30%,
            #fccc63,
            #fbad50,
            #cd486b,
            #8a3ab9,
            #4c68d7);
}

.share-option[data-share="facebook"] .share-option-icon {
    background: #1877f2;
    /* azul Facebook */
}

/* Ícones brancos */
.share-option-icon i {
    font-size: 24px;
    color: #ffffff !important;
}


.share-option-icon i {
    font-size: 24px;
    color: #111111;
}

.share-option span {
    font-size: 11px;
    color: #111111;
}

/* feedback de toque */
.share-option:active .share-option-icon {
    transform: scale(0.94);
}

/* BASE dos círculos */
.share-option-icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    /* 👈 deixa bem redondo */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cores reais iguais ao app */
.share-option[data-share="copy"] .share-option-icon {
    background: #0b84ff;
    /* azul link */
}

.share-option[data-share="whatsapp"] .share-option-icon,
.share-option[data-share="status"] .share-option-icon {
    background: #25d366;
    /* verde WhatsApp */
}

.share-option[data-share="instagram"] .share-option-icon {
    background: radial-gradient(circle at 30% 30%,
            #fccc63,
            #fbad50,
            #cd486b,
            #8a3ab9,
            #4c68d7);
}

.share-option[data-share="facebook"] .share-option-icon {
    background: #1877f2;
    /* azul Facebook */
}

/* Ícones brancos */
.share-option-icon i {
    font-size: 24px;
    color: #ffffff !important;
}

/* ======================= CARRINHO VAZIO ======================= */

.cart-overlay {
    position: fixed;
    inset: 0;
    background: #fff;
    display: none;
    z-index: 45;
    overflow-y: auto;
}

.cart-overlay.is-active {
    display: block;
}

.cart-sheet {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: #ffffff;
}

/* HEADER */
.cart-header {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #e5e5e5;
}

.cart-back-btn {
    background: transparent;
    border: none;
    font-size: 26px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.cart-title {
    font-size: 18px;
    font-weight: 600;
    margin-left: 8px;
}

.cart-header-spacer {
    flex: 1;
}

/* endereço */
.cart-add-address {
    font-size: 13px;
    color: #777;
    padding: 10px 16px;
}

/* Conteúdo */
.cart-empty-content {
    margin-top: 42px;
    text-align: center;
    padding: 0 20px;
}

.cart-empty-img {
    width: 150px;
    height: auto;
    opacity: 0.35;
    margin-bottom: 20px;
}

.cart-empty-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 6px;
}

.cart-empty-subtitle {
    font-size: 14px;
    color: #777;
    margin-bottom: 28px;
}

/* Botão vermelho */
.cart-empty-btn {
    background: #ff3b30;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px 20px;
    font-size: 15px;
    width: 80%;
    max-width: 260px;
    cursor: pointer;
}

/* ======================= 3 PONTINHOS ======================= */

.more-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 48;
}

.more-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.more-sheet {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    padding: 16px;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.18);
    transform: translateY(100%);
    transition: transform 0.22s ease-out;
}

.more-overlay.is-active .more-sheet {
    transform: translateY(0);
}

/* barra de arrastar (igual ao app) */
.more-drag {
    width: 36px;
    height: 4px;
    background: #d7d7d7;
    border-radius: 4px;
    margin: 0 auto 12px;
}

/* botão denunciar */
.more-option {
    width: 100%;
    background: transparent;
    border: none;
    padding: 14px 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.more-option i {
    font-size: 22px;
    color: #111;
}

.more-option span {
    font-size: 15px;
    color: #111;
    font-weight: 500;
}

/* toque */
.more-option:active {
    background: #f2f2f2;
}

/* ======================= DENÚNCIA: MOTIVOS ======================= */

.report-reasons-overlay {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: none;
    z-index: 46;
}

.report-reasons-overlay.is-active {
    display: block;
}

.report-reasons-sheet {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: #ffffff;
}

/* Header de denúncia (igual página interna do app) */
.report-header {
    height: 56px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 16px;
}

.report-back-btn {
    background: transparent;
    border: none;
    font-size: 26px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.report-header-title {
    font-size: 18px;
    font-weight: 600;
    margin-left: 8px;
}

/* Subtítulo "Selecione o motivo" / "Motivo:" */
.report-subtitle {
    font-size: 14px;
    color: #777;
    padding: 12px 16px;
}

/* Lista de motivos */
.report-reasons-list {
    border-top: 1px solid #f0f0f0;
}

.report-reason-item {
    width: 100%;
    background: transparent;
    border: none;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.report-reason-item span {
    font-size: 14px;
    color: #111;
    text-align: left;
}

.report-reason-item i {
    font-size: 18px;
    color: #999;
}

.report-reason-item:active {
    background: #f5f5f5;
}

/* ======================= DENÚNCIA: FORMULÁRIO ======================= */

.report-form-overlay {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: none;
    z-index: 47;
}

.report-form-overlay.is-active {
    display: block;
}

.report-form-sheet {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: #ffffff;
    padding-bottom: 24px;
}

/* Card produto */
.report-product-card {
    display: flex;
    padding: 8px 16px 12px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.report-product-img {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    object-fit: cover;
    background: #f2f2f2;
    margin-right: 10px;
}

.report-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.report-product-title {
    font-size: 14px;
    color: #111;
    margin-bottom: 4px;
}

.report-product-shop {
    font-size: 12px;
    color: #777;
}

/* Seções (descrição / imagens) */
.report-section {
    padding: 12px 16px 0;
}

.report-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13px;
}

.report-section-header span:first-child {
    font-weight: 500;
}

.report-section-header span:last-child {
    font-size: 12px;
    color: #999;
}

/* textarea */
.report-textarea {
    width: 100%;
    min-height: 80px;
    resize: none;
    font-size: 13px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    outline: none;
}

.report-textarea:focus {
    border-color: #ff3b30;
}

/* grid de imagens */
.report-images-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.report-image-add,
.report-image-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    border: 1px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.report-image-add i {
    font-size: 22px;
    color: #999;
}

.report-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* aviso final */
.report-warning {
    font-size: 11px;
    color: #999;
    padding: 12px 16px;
}

/* botão denunciar */
.report-submit-btn {
    width: calc(100% - 32px);
    margin: 0 16px 12px;
    padding: 12px 0;
    background: #ff3b30;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

/* ======================= DENÚNCIA: CONFIRMAÇÃO ======================= */

.report-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    display: none;
    z-index: 48;
    justify-content: center;
    align-items: center;
}

.report-confirm-overlay.is-active {
    display: flex;
}

.report-confirm-box {
    width: 80%;
    max-width: 320px;
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 16px 14px;
    text-align: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.report-confirm-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    margin: 0 auto 10px;
    background: #4cd964;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
}

.report-confirm-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.report-confirm-text {
    font-size: 13px;
    color: #555;
    margin-bottom: 14px;
}

.report-confirm-btn {
    width: 100%;
    background: #ff3b30;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 0;
    font-size: 14px;
    cursor: pointer;
}

/* ================= CARROSSEL ================= */

.product-gallery {
    width: 100%;
    background: #fff;
}

.product-gallery-inner {
    width: 100%;
    position: relative;
}

.product-main {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.product-main-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    cursor: pointer;
}

/* contador 1/9 */
.product-main-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

/* ================= FULLSCREEN ================= */
.gallery-full-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.gallery-full-overlay.is-active {
    display: flex;
}

.gallery-full-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.gallery-full-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-full-close {
    position: absolute;
    top: 20px;
    left: 20px;
    background: transparent;
    border: none;
    font-size: 36px;
    color: #fff;
}

.gallery-full-counter {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 12px;
    border-radius: 20px;
    color: #fff;
    font-size: 16px;
}

/* botões navegação */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    border: none;
    padding: 12px;
    border-radius: 50%;
    color: #fff;
    font-size: 32px;
}

.gallery-prev {
    left: 15px;
}

.gallery-next {
    right: 15px;
}

/* ================= PREÇO / OFERTA RELÂMPAGO ================= */

.product-price-bar {
    width: 100%;
    background: #ff6a00;
    /* laranja TikTok */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px 10px;
    color: #fff;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* COLUNA ESQUERDA */
.price-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* LINHA: [-51%] [R$ 29,00] */
.price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* badge -51% em pílula branca ao lado do preço */
.discount-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 5px;
    padding: 3px 5px;
}

.discount-badge span {
    font-size: 14px;
    font-weight: 800;
    color: #e0004d;
    /* rosa forte do print */
}

/* "R$ 29,00" */
.price-main {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}

.price-currency {
    font-size: 16px;
    font-weight: 700;
}

.price-value {
    font-size: 26px;
    font-weight: 800;
}

/* "R$ 59,00" riscado embaixo */
.price-old {
    margin-top: 6px;
    font-size: 14px;
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.95);
}

/* COLUNA DIREITA */
.price-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* "⚡ Oferta Relâmpago" */
.flash-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 15px;
}

.flash-icon {
    font-size: 18px;
}

/* "Termina em 04:13:16" */
.flash-timer {
    font-size: 16px;
    font-weight: 700;
}

/* ================= FAIXA ROSA DE DESCONTO ================= */

.discount-strip {
    width: 100%;
    background: #ffffff;
    padding: 10px 12px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.discount-pill {
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

/* pílula grande da esquerda */
.discount-pill-main {
    flex: 1;
    justify-content: flex-start;
    background: linear-gradient(90deg, #ffe0ea, #ffd4df);
    color: #ff2758;
}

.discount-pill-icon {
    font-size: 16px;
}

.discount-pill-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* pílula "Economize >" */
.discount-pill-secondary {
    background: linear-gradient(90deg, #ffe0ea, #ffd4df);
    color: #ff2758;
}

.discount-pill-secondary i {
    font-size: 16px;
}

/* ================= MODAL DESCONTOS ================= */

.discount-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    justify-content: center;
    align-items: flex-end;
    z-index: 99999;
}

.discount-overlay.is-active {
    display: flex;
}

.discount-sheet {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    padding: 16px 16px 24px;
    box-sizing: border-box;
}

/* header */
.discount-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 8px;
}

.discount-header h2 {
    font-size: 18px;
    font-weight: 700;
}

.discount-close-btn {
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    background: transparent;
    font-size: 22px;
}

/* texto intro */
.discount-intro {
    font-size: 14px;
    color: #333;
    margin-bottom: 16px;
}

.discount-section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 14px 0 8px;
}

/* cartão rosa */
.discount-card {
    display: flex;
    justify-content: space-between;
    background: #ffe8ef;
    border-radius: 14px;
    padding: 14px;
    gap: 12px;
}

.discount-card-left {
    flex: 1;
}

.discount-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.discount-tag {
    background: #ffedf3;
    color: #ff2758;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
}

.discount-tag-secondary {
    background: #ffe3f1;
}

.discount-card-mainline {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 4px;
}

.discount-card-text {
    font-size: 14px;
    margin-bottom: 6px;
}

.discount-card-footnote {
    font-size: 11px;
    color: #666;
}

.discount-link {
    color: #1677ff;
    text-decoration: none;
}

/* botão Resgatar */
.discount-card-right {
    display: flex;
    align-items: center;
}

.discount-redeem-btn {
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: #ff2758;
    color: #fff;
}

.discount-redeem-btn.is-redeemed {
    background: #ccc;
    color: #666;
}

/* cartão de bônus */
.bonus-card {
    background: #fff7e0;
    border-radius: 14px;
    padding: 12px 14px;
    margin-top: 8px;
}

.bonus-title {
    font-size: 15px;
    font-weight: 700;
    color: #c28700;
    margin-bottom: 4px;
}

.bonus-text {
    font-size: 13px;
    margin-bottom: 2px;
}

.bonus-footnote {
    font-size: 11px;
    color: #777;
}

/* ================= FAIXA ROSA DE DESCONTO ================= */

.discount-strip {
    width: 100%;
    background: #ffffff;
    padding: 10px 12px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

.discount-pill {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

/* Pílula principal */
.discount-pill-main {
    flex: 1;
    background: linear-gradient(90deg, #ffe4ec 0%, #ffd9e6 100%);
    color: #ff2758;
}

.discount-pill-icon {
    font-size: 18px;
}

/* ================= PÍLULA ECONOMIZE COM SETA SOBREPOSTA ================= */

.discount-pill-secondary {
    position: relative;
    background: linear-gradient(90deg, #ffd7e3 0%, #ffffff 95%);
    color: #e60050;
    border-radius: 14px;
    padding: 8px 22px 8px 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    overflow: visible;
}

/* seta com blur sobreposta */
.discount-arrow {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #555;
    z-index: 5;

    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    width: 28px;
    height: 28px;
    border-radius: 50%;

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

/* ================= TÍTULO / SALVAR / RATING ================= */

.product-info {
    padding: 12px 12px 8px;
    background: #ffffff;
}

.product-title-wrapper {
    position: relative;
}

.product-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* título com clamp de linha, controlado via classe .is-expanded */
.product-title {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* número de linhas quando "fechado" */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* quando expandido, deixa mostrar tudo */
.product-title-wrapper.is-expanded .product-title {
    -webkit-line-clamp: unset;
    display: block;
}

/* badge dentro do h1 */
.promo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: 15px;
    font-weight: bolder;
    border-radius: 999px;
    margin-right: 6px;      /* espaço entre o badge e o texto */
    margin-bottom: 0;       /* evita empurrar o texto pra baixo demais */
    background: linear-gradient(90deg, #e6a7b8 0%, #9cf7ec 100%);
    color: #000000;
    letter-spacing: 0.2px;
    white-space: nowrap;    /* badge não quebra em 2 linhas */
}


/* botão salvar */
.product-save-btn {
    border: none;
    background: transparent;
    padding: 2px;
    margin-top: 2px;
}

#productSaveIcon {
    font-size: 24px;
}

/* estado salvo: ícone preenchido e rosa */
.product-save-btn.is-saved #productSaveIcon {
    color: #000000;
}

/* botão da setinha (só aparece quando expandido) */
.product-title-toggle {
    position: absolute;
    right: 0;
    bottom: -4px;
    border: none;
    background: transparent;
    padding: 0;
    display: none;
    font-size: 18px;
    color: #666;
}

/* mostra a setinha apenas quando expandido */
.product-title-wrapper.is-expanded .product-title-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* rating linha de baixo */
.product-rating-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 14px;
}

.rating-star {
    color: #ffb400;
    font-size: 18px;
}

.rating-score {
    font-weight: 600;
}

.rating-count {
    border: none;
    background: transparent;
    color: #1677ff;
    font-size: 14px;
    padding: 0 2px;
}

.rating-separator {
    color: #ccc;
    margin: 0 2px;
}

.rating-sold {
    color: #666;
}

/* ============== BLOCO FRETE + VARIAÇÃO ============== */

.shipping-variant-block {
    background: #fff;
    padding: 12px 16px;
    border-top: 1px solid #f2f2f2;
    border-bottom: 8px solid #f5f5f5;
}

/* Frete */

.shipping-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
}

.shipping-left {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.shipping-icon {
    font-size: 22px;
    color: #333;
    margin-top: 2px;
}

.shipping-texts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shipping-badge {
    display: inline-block;
    background: #e0f9f6;
    color: #00a394;
    font-weight: 700;
    font-size: 12px;
    padding: 2px;
    border-radius: 999px;
    text-align: center;
    width: 60%;
}

.shipping-date {
    font-size: 14px;
    color: #111;
}

.shipping-fee {
    font-size: 14px;
    color: #777;
}

.shipping-fee-old {
    text-decoration: line-through;
    margin-left: 4px;
}

.shipping-arrow {
    font-size: 20px;
    color: #999;
}

/* Variação / selecionado */

.variant-row {
    margin-top: 4px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.variant-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.variant-grid-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #555;
}

.variant-thumbs {
    display: flex;
    gap: 6px;
}

.variant-thumbs img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
}

.variant-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    max-width: 45%;
    text-align: right;
}

.variant-right i {
    font-size: 18px;
    color: #999;
}

.variant-selected-label {
    font-size: 12px;
    color: #999;
}

.variant-selected-value {
    font-size: 14px;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============== MODAL DE VARIAÇÃO ============== */

/* ====== BOTTOM SHEET VARIAÇÕES ====== */
.variant-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 999;
    display: none;
    /* fica invisível até abrir */
}

.variant-overlay.is-active {
    display: block;
}

.variant-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 85vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 16px;
    overflow-y: auto;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12);

    transform: translateY(100%);
    /* escondido inicialmente */
    transition: transform .28s ease;
}

.variant-overlay.is-active .variant-sheet {
    transform: translateY(0);
    /* aparece colado no bottom */
}

/* header */

.variant-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.variant-header-info {
    display: flex;
    gap: 10px;
}

.variant-product-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
}

.variant-header-texts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.variant-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.variant-discount-badge {
    background: #9c1337;
    color: #ffffff;
    font-weight: bolder;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 2px;
}

.variant-price-main {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.variant-price-currency {
    font-size: 16px;
    font-weight: 600;
    color: #9c1337;
}

.variant-price-value {
    font-size: 22px;
    font-weight: 700;
    color: #9c1337;
}

.variant-price-old-row {
    font-size: 14px;
    color: #999;
}

.variant-price-old {
    text-decoration: line-through;
}

.variant-freight-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    width: 70%;
    border-radius: 5px;
    background: #e0f9f6;
    color: #00a394;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.variant-close-btn {
    border: none;
    background: transparent;
    font-size: 22px;
}

/* body */

.variant-body {
    margin-top: 16px;
    flex: 1;
    overflow-y: auto;
}

.variant-section-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.variant-section-count {
    color: #999;
    font-weight: 400;
}

.variant-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.variant-option {
    border-radius: 10px;
    border: 1px solid #eee;
    background: #fafafa;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    text-align: left;
}

.variant-option img {
    width: 80px;
    /* TAMANHO PADRÃO TIKTOK */
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    align-self: center;
    /* centraliza dentro do card */
}


.variant-option span {
    display: block;
    color: #333;
}

.variant-option.is-active {
    border-color: #ff2758;
    background: #fff5f8;
}

/* footer */

.variant-footer {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1.1fr 1.4fr;
    gap: 8px;
}

.variant-btn {
    border-radius: 5px;
    border: none;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
}

.variant-btn-cart {
    background: #f5f5f5;
    color: #111;
}

.variant-btn-buy {
    background: #9c1337;
    ;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.variant-btn-price {
    font-size: 16px;
    font-weight: 700;
}

.variant-btn-subtext {
    font-size: 11px;
    opacity: 0.9;
}

/* Thumbnails pequenas da linha "Selecionado:" */
.variant-inline-imgs img,
.selected-variant-thumbs img,
.product-selected-thumbs img {
    width: 36px;
    /* antes provavelmente 48px ou 60px */
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 4px;
}

/* =============== PROTEÇÃO DO CLIENTE – LINHA RESUMO =============== */

.client-protection-row {
    margin-top: 8px;
    padding: 12px 12px;
    background: #fff7e9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
}

.client-protection-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-protection-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f2c36b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.client-protection-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.client-protection-title {
    font-size: 15px;
    font-weight: 700;
    color: #8a4a12;
}

.client-protection-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 12px;
    color: #5a3a16;
}

.client-protection-arrow {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 18px;
    color: #b07b36;
}

/* =============== PROTEÇÃO DO CLIENTE – MODAL =============== */

.client-protection-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 999;
}

.client-protection-overlay.is-active {
    display: flex;
}

.client-protection-sheet {
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    background: #fff7e9;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.client-protection-header {
    padding: 16px 16px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, #ffe9c4 0%, #fff7e9 60%, #ffffff 100%);
    font-weight: 700;
    font-size: 18px;
}

.client-protection-header h2 {
    margin: 0;
}

.client-protection-close {
    position: absolute;
    right: 10px;
    top: 40%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    font-size: 22px;
    margin-top: 20px;
}

.client-protection-body {
    padding: 12px 16px 16px;
    overflow-y: auto;
}

/* blocos internos */

.cp-block {
    margin-bottom: 18px;
}

.cp-block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #9a5a16;
    margin-bottom: 6px;
}

.cp-block-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffedd0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.cp-block-text {
    font-size: 13px;
    line-height: 1.4;
    color: #4a3215;
    margin: 0 0 8px;
}

.cp-block-subtitle {
    font-size: 13px;
    font-weight: 600;
    color: #4a3215;
    margin: 0 0 6px;
}

.cp-logos-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    height: 20px;
}

.cp-logo-pill {
    padding: 4px 8px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #f0d4a2;
    font-size: 12px;
}

/* ================= RESUMO ================= */

.client-protection-row {
    margin-top: 10px;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border: 1px solid #f1e4d4;
}

.client-protection-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.client-protection-icon {
    font-size: 22px;
    color: #b98027;
}

.client-protection-title {
    font-size: 15px;
    font-weight: 700;
    color: #8a4f0b;
}

.client-protection-tags span {
    display: inline-block;
    font-size: 13px;
    color: #6f4a1b;
    margin-right: 6px;
}

.client-protection-arrow {
    font-size: 20px;
    color: #b98027;
}



/* ================= MODAL ================= */

.client-protection-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 9999;
}

.client-protection-overlay.is-active {
    display: flex;
}

.client-protection-sheet {
    width: 100%;
    max-width: 480px;
    background: #fffdf7;
    border-radius: 18px 18px 0 0;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.client-protection-header {
    padding: 16px;
    background: linear-gradient(135deg, #ffe7c7 0%, #fff6e9 60%);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    position: relative;
}

.client-protection-close {
    position: absolute;
    right: 10px;
    top: 10px;
    background: none;
    border: none;
    font-size: 26px;
}

.client-protection-body {
    overflow-y: auto;
    padding: 16px;
}



/* ================= BLOCOS INTERNOS ================= */

.cp-block {
    margin-bottom: 18px;
}

.cp-block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    color: #8a4f0b;
}

.cp-block-icon {
    font-size: 18px;
    background: #ffe8ca;
    padding: 6px;
    border-radius: 50%;
    color: #b16d0c;
}

.cp-block-text {
    font-size: 13px;
    color: #5a3c14;
    margin-top: 6px;
    line-height: 1.45;
}

.cp-subtitle {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #5a3c14;
}

.cp-logos-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.cp-logo-pill {
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #f2d7ad;
    border-radius: 999px;
    font-size: 12px;
}

/* ================= OFERTAS / CUPOM DE ENVIO ================= */

.offers-row {
    margin-top: 12px;
    padding: 12px 12px 4px;
    background: #ffffff;
}

.offers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.offers-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.offers-arrow {
    font-size: 20px;
    color: #999;
}

/* cartão do cupom */

.shipping-coupon-card {
    position: relative;
    background: #e8fbff;
    border-radius: 16px;
    padding: 10px 14px;
    overflow: visible;
}

/* “dentinhos” de ticket nas laterais */
.shipping-coupon-card::before,
.shipping-coupon-card::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 16px;
    background: #ffffff;
    border-radius: 0 999px 999px 0;
}

.shipping-coupon-card::before {
    left: 0;
}

.shipping-coupon-card::after {
    right: 0;
    border-radius: 999px 0 0 999px;
}

.shipping-coupon-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.shipping-coupon-main {
    flex: 1;
}

.shipping-coupon-title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin-bottom: 2px;
}

.shipping-coupon-text {
    font-size: 14px;
    line-height: 1.35;
    color: #666;
}

/* lado direito: x30 + botão */

.shipping-coupon-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    position: relative;
}

.shipping-coupon-count {
    position: absolute;
    top: -12px;
    right: 2px;
    background: #02c6c6;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

.shipping-coupon-btn {
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    background: #02c6c6;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* estado resgatado */
.shipping-coupon-btn.is-redeemed {
    background: #c4c4c4;
    cursor: default;
}

/* ================= VÍDEOS DE CRIADORES ================= */

.creators-section {
    padding: 12px;
    background: #fff;
    margin-top: 10px;
}

.creators-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}

.creators-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
}

.creators-carousel::-webkit-scrollbar {
    display: none;
}

.creator-card {
    min-width: 170px;
    height: 260px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
    background: #000;
    flex-shrink: 0;
    cursor: pointer;
}

.creator-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creator-play {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.55);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.creator-play i {
    font-size: 22px;
    color: #fff;
}

.creator-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    justify-content: space-around;
    gap: 6px;
}





.creator-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
    margin-left: 30px;
}

/* ================= FULLSCREEN VIDEO MODAL ================= */

.creator-video-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.creator-video-overlay.is-active {
    display: flex;
}

.creator-video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.creator-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: black;
}

.creator-video-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.creator-video-close i {
    font-size: 28px;
    color: white;
}

/* ======================= CRIADORES - LISTA ======================= */

.creator-section {
    margin-top: 24px;
}

.creator-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    padding: 0 16px;
}

.creator-list {
    display: flex;
    gap: 12px;
    padding-left: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.creator-list::-webkit-scrollbar {
    display: none;
}

.creator-card {
    min-width: 115px;
    /* 🔥 menor, igual TikTok */
    max-width: 115px;
    height: 180px;
    /* 🔥 altura menor */
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    background: #000;
    flex-shrink: 0;
}

.creator-card img,
.creator-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ícone de play */
.creator-play-icon {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.4);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.creator-play-icon i {
    color: #fff;
    font-size: 20px;
}

/* nome do criador */
.creator-name {
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    gap: 4px;
}

.creator-name img {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.creator-info img {
    width: 30px !important;
    height: 30px;
    border-radius: 50%;


}

/* ============ AVALIAÇÕES DOS CLIENTES ============ */

.reviews-section {
    padding: 16px 12px 8px;
    background: #ffffff;
}

.reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.reviews-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.reviews-see-more {
    border: none;
    background: transparent;
    color: #1677ff;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
}

.reviews-see-more>*+* {
    margin-left: 2px;
    /* substitui gap */
}

.reviews-rating-row {
    display: flex;
    align-items: center;
}

.reviews-rating-row>*+* {
    margin-left: 6px;
    /* substitui gap */
}

.reviews-rating-row {
    margin-bottom: 12px;
}

.reviews-rating-value {
    font-size: 18px;
    font-weight: 700;
}

.reviews-rating-out {
    font-size: 14px;
    color: #555;
}

.reviews-rating-stars i {
    color: #ffb400;
    font-size: 18px;
}

/* LISTA DE CARDS */

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

.reviews-list>*+* {
    margin-top: 2px;
    /* substitui gap */
}

.review-card {
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}

.review-text {
    font-size: 15px;
    margin: 8px 0 10px;
}

/* HEADER DO REVIEW */

.review-header {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.review-header>*+* {
    margin-left: 10px;
    /* substitui gap */
}

.review-user-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eee;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-user-info {
    flex: 1;
}

.review-user-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.review-stars-row i {
    color: #ffb400;
    font-size: 16px;
}

.review-item-label {
    font-size: 13px;
    color: #777;
    margin-top: 2px;
}

/* MEDIA GRID — AGORA FLEX */

.review-media-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.review-media-thumb {
    width: 20%;
    padding: 0;
    /* sem borda, sem padding */
    margin: 0;
    /* encostadas */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-right: 5px;
    border: none;
}


.review-media-thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;

}

.review-media-thumb.is-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
}

.review-media-play {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-media-play i {
    color: #fff;
    font-size: 14px;
}

/* MODAL DE MÍDIA */

.review-media-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.review-media-overlay.is-active {
    display: flex;
}

.review-media-inner {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 16px;
}

.review-media-close {
    position: absolute;
    right: 16px;
    top: 12px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 26px;
    z-index: 2;
}

.review-media-img,
.review-media-video {
    width: 100%;
    max-height: 70vh;
    border-radius: 14px;
    object-fit: contain;
    background: #000;
}

.review-media-video {
    display: none;
}

/* ============ MAIS DESTA LOJA ============ */

.shop-more-section {
    padding: 12px 12px 16px;
    background: #fff;
    margin-top: 8px;
}

.shop-more-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.shop-more-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.shop-more-arrow {
    border: none;
    background: transparent;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 20px;
}

/* carrossel horizontal */

.shop-more-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.shop-more-scroll::-webkit-scrollbar {
    display: none;
}

/* card destaque "Até 61% de desconto" */

.shop-more-highlight {
    min-width: 140px;
    max-width: 150px;
    background: #ffecea;
    border-radius: 16px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.shop-more-highlight-icon {
    font-size: 26px;
    color: #ff5b2e;
    margin-bottom: 8px;
}

.shop-more-highlight-title {
    font-size: 16px;
    font-weight: 700;
    color: #ff5b2e;
    line-height: 1.2;
    margin-bottom: 10px;
}

.shop-more-highlight-sub {
    font-size: 12px;
    color: #555;
}

/* cards de produto */

.shop-product-card {
    min-width: 140px;
    max-width: 150px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #eee;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
}

.shop-product-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.shop-product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shop-product-body {
    padding: 6px 8px 10px;
}

.shop-product-price-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.shop-product-price-currency {
    font-size: 12px;
    font-weight: 700;
}

.shop-product-price-value {
    font-size: 16px;
    font-weight: 700;
}

.shop-product-discount {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    color: #ff2758;
    background: #ffe8f0;
    border-radius: 999px;
}

/* ====== BLOCO DA LOJA ====== */

.shop-section {
    border-top: 1px solid #00000048;
    background: #ffffff;
    padding: 12px 12px 4px;
}

.shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* lado esquerdo (avatar + textos) */
.shop-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shop-avatar {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.shop-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-texts {
    display: flex;
    flex-direction: column;
}

.shop-name {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    max-width: 190px;
    /* controla o "..." */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-meta {
    font-size: 13px;
    color: #777;
    margin-top: 2px;
}

/* selo "Verificado" à direita */
.shop-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e7f5ff;
    color: #0086ff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.shop-verified-badge i {
    font-size: 16px;
}

/* ===== SOBRE ESTE PRODUTO (igual ao app) ===== */

.product-description-section {
    background: #ffffff;
    padding: 16px 0 80px;
}

/* título "Sobre este produto" */
.product-desc-main-title {
    font-size: 16px;
    font-weight: 600;
    color: #111111;
    margin: 0 16px 12px;
}

/* título "Detalhes" */
.product-details-title {
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    margin: 0 16px 4px;
}

/* caixa de detalhes (linhas) */
.product-details-box {
    padding: 4px 16px 0;
}

/* cada linha "Tipo de pele | Todos os tipos de pele" */
.desc-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 4px 0;
    font-size: 13px;
}

/* coluna esquerda (label cinza) */
.desc-detail-label {
    color: #999999;
    max-width: 45%;
}

/* coluna direita (valor mais escuro, alinhado à direita) */
.desc-detail-value {
    color: #111111;
    max-width: 55%;
    text-align: right;
}

/* botão "Ver mais" azul debaixo dos detalhes */
.product-details-more {
    border: none;
    background: transparent;
    color: #1677ff;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px 12px;
    text-align: left;
}

/* título "Descrição" */
.product-desc-title {
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    margin: 8px 16px 6px;
}

/* texto da descrição */
.product-desc-text {
    font-size: 13px;
    line-height: 1.5;
    color: #111111;
    margin: 0 16px 16px;
}

/* se não quiser aquele fade, pode deixar quase invisível */
.product-desc-gradient {
    display: none;
}

/* botão "Ver mais" da descrição (se quiser manter) */
.product-desc-more-btn {
    display: none;
    /* se quiser exatamente como o print, sem ver mais na descrição */
}

/* botão subir (seta redonda à direita) */
.product-desc-scroll-top {
    position: fixed;
    right: 16px;
    bottom: 88px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: #ffffff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-detail-image-wrap {
    width: 100%;
}

.product-detail-image-wrap img {
    width: 100%;
}

/* ===== SOBRE ESTE PRODUTO ===== */

.product-description-section {
    background: #ffffff;
    padding: 16px 0 16px;
}

/* título "Sobre este produto" */
.product-desc-main-title {
    font-size: 16px;
    font-weight: 600;
    color: #111111;
    margin: 0 16px 12px;
}

/* título "Detalhes" */
.product-details-title {
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    margin: 0 16px 4px;
}

/* caixa de detalhes */
.product-details-box {
    padding: 4px 16px 0;
}

/* cada linha de detalhe */
.desc-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 4px 0;
    font-size: 13px;
}

.desc-detail-label {
    color: #999999;
    max-width: 45%;
}

.desc-detail-value {
    color: #111111;
    max-width: 55%;
    text-align: right;
}

/* "Ver mais" dos detalhes (igual app) */
.product-details-more {
    border: none;
    background: transparent;
    color: #1677ff;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px 12px;
    text-align: left;
}

/* título "Descrição" */
.product-desc-title {
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    margin: 8px 16px 6px;
}

/* bloco da descrição com colapso */
.product-desc-block {
    position: relative;
    margin-bottom: 8px;
}

/* texto inicialmente cortado */
.product-desc-text {
    font-size: 13px;
    line-height: 1.5;
    color: #111111;
    margin: 0 16px;
    max-height: 180px;
    /* altura inicial */
    overflow: hidden;
}

/* gradiente no rodapé da descrição, igual app */
.product-desc-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 36px;
    height: 80px;
    pointer-events: none;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            #ffffff 60%,
            #ffffff 100%);
}

/* botão "Ver mais / Ver menos" centrado */
.product-desc-more-btn {
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 8px 0 12px;
}

/* estado expandido: mostra tudo, some gradiente */
.product-desc-block.is-expanded .product-desc-text {
    max-height: none;
}

.product-desc-block.is-expanded .product-desc-gradient {
    display: none;
}

/* botão subir (seta) */
.product-desc-scroll-top {
    position: fixed;
    right: 16px;
    bottom: 88px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: #ffffff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* imagens dentro da descrição (quando usar blocks/desc-image) */
.product-desc-image-wrap {
    margin: 12px 16px;
    border-radius: 8px;
    overflow: hidden;
}

.product-desc-image {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== VOCÊ TAMBÉM PODE GOSTAR ===== */

.also-like-section {
    background: #ffffff;
    padding: 12px 0 16px;
    border-top: 8px solid #f5f5f5;
}

.also-like-title {
    font-size: 16px;
    font-weight: 600;
    color: #111111;
    margin: 0 16px 12px;
}

.also-like-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 12px 4px;
}

.also-like-scroll::-webkit-scrollbar {
    display: none;
}

.also-like-card {
    flex: 0 0 160px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    border: 0.5px solid rgba(0, 0, 0, 0.04);
}

.also-like-card button {
    border: none;
    background: none;
    padding: 0;
    width: 100%;
    text-align: left;
}

.also-like-img-wrap {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.also-like-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.also-like-body {
    padding: 8px;
}

/* título do produto */
.also-like-title-text {
    font-size: 13px;
    font-weight: 500;
    color: #111111;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* preço */
.also-like-price-row {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-bottom: 2px;
}

.also-like-price {
    font-size: 15px;
    font-weight: 700;
    color: #ad031d;
}

.also-like-price-old {
    font-size: 11px;
    color: #999999;
    text-decoration: line-through;
}

/* badge frete grátis */
.also-like-badge {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 4px;
    background: #e6f4ff;
    color: #1677ff;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 4px;
}

/* rating + vendidos */
.also-like-meta {
    font-size: 11px;
    color: #666666;
}/* ===== FOOTER FIXO TIPO TIKTOK SHOP ===== */

body {
  /* garante espaço pro footer não cobrir o conteúdo */
  padding-bottom: 72px;
}

.app-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  z-index: 60;
}

.footer-icon-btn {
  border: none;
  background: transparent;
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #111111;
}

.footer-icon-btn i {
  font-size: 20px;
  margin-bottom: 2px;
}

.footer-cart-btn {
  border: none;
  background: #ffe6ee;
  color: #a0002a;
  width: 56px;
  height: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.footer-buy-btn {
  flex: 1;
  border: none;
  border-radius: 5px;
  background: #9c1337;
  color: #ffffff;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.bx-cart-plus{
  font-size: 30px !important; 
  
}
.footer-buy-price {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
}

.footer-buy-text {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}
.also-like-empty {
  width: 100%;
  padding: 20px 0 30px;
  display: flex;
  justify-content: center;
}

.also-like-empty img {
  width: 180px;
  opacity: 0.8;
}
.also-like-empty {
  width: 100%;
  padding: 20px 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.also-like-empty img {
  width: 160px;
  opacity: 0.9;
}

.also-like-empty-text {
  font-size: 13px;
  color: #666666;
  text-align: center;
}
/* Quando o modal de compartilhar estiver aberto, esconda o footer */
.app-footer.hide-footer {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: 0.25s ease;
}
.promo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: 15px;
    font-weight: bolder;
    border-radius: 999px;
    margin-right: 6px;      /* espaço entre o badge e o texto */
    margin-bottom: 0;
    background: linear-gradient(90deg, #e6a7b8 0%, #9cf7ec 100%);
    color: #000000;
    letter-spacing: 0.2px;
    white-space: nowrap;    /* não quebra em duas linhas */
}
.product-title-more {
  font-size: 18px;
  font-weight: 700;
  margin-left: 4px;
  line-height: 1;
}
/* ====== TÍTULO DO PRODUTO ====== */

.product-title-wrapper {
  position: relative;
  padding: 8px 12px 4px;
  background: #fff;
}

/* linha com título e ícone de salvar */
.product-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* texto do título: 2 linhas com "..." automático */
.product-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;          /* mostra 2 linhas */
  overflow: hidden;
}

/* botão de salvar (já existia, só garantindo que não quebre layout) */
.product-save-btn {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* botão dos "..." fica por cima, na borda direita do texto */
.product-title-toggle {
  position: absolute;
  /* deixa os "..." por cima do final do texto, antes do ícone de salvar */
  right: 40px;        /* se ficar muito perto/longe do ícone, ajusta esse valor */
  bottom: 4px;
  border: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    #ffffff 40%
  );
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

/* estilo dos três pontinhos */
.product-title-more {
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

/* quando expandido: tira o clamp e some o botão */
.product-title-wrapper.is-expanded .product-title {
  -webkit-line-clamp: unset;
  max-height: none;
}

.product-title-wrapper.is-expanded .product-title-toggle {
  display: none;
}
/* ===== CARROSSEL PRINCIPAL ===== */

.product-main {
  position: relative;
  overflow: hidden;        /* esconde o que passar da borda */
}

.product-main-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-out; /* animação do slide */
}

.product-main-img {
  flex: 0 0 100%;          /* cada imagem ocupa 100% da largura */
  width: 100%;
  height: auto;
  object-fit: cover;       /* ajusta bem a imagem */
}
.product-main {
  position: relative;
  overflow: hidden;
}

.product-main-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-out;
}

.product-main-img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
}