/* ==========================================================================
   Estilos para descrições de produto no site PT
   Replica o visual do tema BR (shopee-importer.php CSS) mas funciona TANTO com:
   - HTML antigo: <div class="shopee-desc">...<h3 class="shopee-feature">...</h3>...</div>
   - HTML novo: <div class="product-description">...<h3>...</h3>...</div>
   ========================================================================== */

/* --------- Base: cores e tipografia da descrição ----------- */
.product-description,
.shopee-desc {
    font-size: 15px;
    line-height: 1.65;
    color: #2a2a2a;
}

/* --------- Cabeçalhos h2/h3 em laranja ----------- */
.product-description h2,
.product-description h3,
.shopee-desc .shopee-feature,
.shopee-desc .shopee-subgroup {
    color: #ee4d2d !important;
    font-weight: 700 !important;
}

.product-description h2 {
    font-size: 1.7rem !important;
    margin: 28px 0 14px !important;
    border-bottom: 2px solid #ee4d2d;
    padding-bottom: 6px;
}

.product-description h3 {
    font-size: 1.25rem !important;
    margin: 22px 0 10px !important;
}

/* --------- Box de intro (primeiro parágrafo destacado) -----------
   Aplica ao primeiro <p> NÃO VAZIO depois de qualquer <h1>.
   Como CSS não tem :not(:empty) confiável para detectar "só espaços",
   o filtro PHP renassenza_pt_clean_description() abaixo remove os <p> vazios
   ANTES de o conteúdo chegar aqui — então o :first-of-type já cai no <p> certo.
*/
.shopee-desc .shopee-intro,
.product-description > p:first-of-type {
    font-size: 16px;
    background: #fff8f3;
    border-left: 4px solid #ee4d2d;
    padding: 14px 18px;
    border-radius: 6px;
    margin: 0 0 22px;
}

/* Evita box vazio: <p> totalmente vazio não recebe o background */
.product-description > p:first-of-type:empty {
    display: none !important;
}

.shopee-desc .shopee-intro p { margin: 0 0 8px; }
.shopee-desc .shopee-intro p:last-child { margin-bottom: 0; }

/* --------- Bullets com ✓ verde ----------- */
.product-description ul,
.shopee-desc .shopee-bullets {
    list-style: none !important;
    padding: 0 !important;
    margin: 10px 0 22px !important;
}

.product-description ul li,
.shopee-desc .shopee-bullets li {
    padding: 9px 0 9px 30px !important;
    position: relative;
    line-height: 1.55;
    border-bottom: 1px dashed #f0f0f0;
}

.product-description ul li:last-child,
.shopee-desc .shopee-bullets li:last-child {
    border-bottom: none;
}

.product-description ul li::before,
.shopee-desc .shopee-bullets li::before {
    content: "✓";
    position: absolute;
    left: 4px;
    top: 9px;
    color: #10b981;
    font-weight: 700;
    font-size: 16px;
}

.product-description ul li strong,
.product-description ul li b,
.shopee-desc .shopee-bullets li strong {
    color: #1f1f1f;
}

/* Sub-listas com indicador diferente (›) e sem border */
.product-description ul ul {
    margin: 4px 0 0 0 !important;
    border-left: 2px solid #fef3ee;
    padding-left: 12px !important;
}
.product-description ul ul li {
    padding: 4px 0 4px 22px !important;
    border-bottom: none;
}
.product-description ul ul li::before {
    content: "›";
    color: #ee4d2d;
    font-size: 18px;
    top: 2px;
}

/* --------- Tabela Ficha Técnica (2 colunas formatadas) -----------
   CRÍTICO: forçar display:table mesmo em mobile / temas que aplicam
   display:block para tornar a tabela "responsive". Aqui queremos
   manter as 2 colunas SEMPRE — o visual é mais importante do que
   responsividade da tabela (ela tem só 2 colunas, cabe em mobile).
*/
.product-description table,
.shopee-desc .shopee-specs {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 12px 0 24px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    overflow: hidden;
    display: table !important;
    table-layout: fixed !important;
}

.product-description table thead,
.product-description table tbody {
    display: table-row-group !important;
}

.product-description table tr,
.shopee-desc .shopee-specs tr {
    display: table-row !important;
}

.product-description table th,
.product-description table td,
.shopee-desc .shopee-specs th,
.shopee-desc .shopee-specs td {
    display: table-cell !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-align: left !important;
    vertical-align: middle !important;
    width: 50% !important;
}

.product-description table thead td,
.product-description table thead th,
.product-description table th,
.shopee-desc .shopee-specs th {
    background: #f6f6f6 !important;
    font-weight: 600 !important;
    color: #333 !important;
    width: 40% !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

/* Garante que a 1ª coluna do tbody (sem <th>) também fique destacada */
.product-description table tbody tr td:first-child,
.shopee-desc .shopee-specs tbody tr td:first-child {
    background: #fafafa !important;
    font-weight: 600 !important;
    color: #333 !important;
    width: 40% !important;
}

.product-description table tbody tr td:last-child,
.shopee-desc .shopee-specs tbody tr td:last-child {
    color: #444 !important;
    width: 60% !important;
}

.product-description table tr:last-child td,
.product-description table tr:last-child th,
.shopee-desc .shopee-specs tr:last-child th,
.shopee-desc .shopee-specs tr:last-child td {
    border-bottom: none !important;
}

/* Em mobile (≤600px) reduz padding mas mantém 2 colunas */
@media (max-width: 600px) {
    .product-description table th,
    .product-description table td {
        padding: 8px 10px !important;
        font-size: 14px !important;
    }
}

/* --------- FAQ collapse (<details><summary>) ----------- */
.shopee-desc .shopee-faq {
    margin: 8px 0;
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 0;
    background: #fafafa;
}

.shopee-desc .shopee-faq[open] {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.shopee-desc .shopee-faq summary {
    cursor: pointer;
    padding: 12px 16px;
    font-weight: 600;
    color: #222;
    list-style: none;
}

.shopee-desc .shopee-faq summary::-webkit-details-marker { display: none; }

.shopee-desc .shopee-faq summary::before {
    content: "›";
    display: inline-block;
    margin-right: 10px;
    color: #ee4d2d;
    transition: transform .2s;
    font-size: 18px;
}

.shopee-desc .shopee-faq[open] summary::before { transform: rotate(90deg); }
.shopee-desc .shopee-faq-answer { padding: 0 16px 14px 30px; color: #555; }
.shopee-desc .shopee-faq-answer p { margin: 0 0 8px; }

/* --------- Callout (destaque) ----------- */
.shopee-desc .shopee-callout {
    background: linear-gradient(135deg, #fff8f3, #ffece2);
    border: 1px solid #ffd0b8;
    padding: 12px 18px;
    border-radius: 8px;
    margin: 14px 0;
    font-weight: 700;
    color: #b8350a;
    text-align: center;
    font-size: 15px;
}

/* --------- Strong em geral ----------- */
.product-description strong,
.product-description b,
.shopee-desc strong {
    color: #1f1f1f;
    font-weight: 700;
}

/* --------- HR separadora ----------- */
.product-description hr,
.shopee-desc hr {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 20px 0;
}