/* ==========================================================================
   Dealded Components — ยกมาจากธีมเดิม (Rehub) ตัด junk เฉพาะธีมเก่าออกแล้ว
   ใช้ได้กับ HTML ที่ pipeline สร้าง (claude_agent/wp_agent builders)
   ส่วนต่างๆ: title bar · highlights · spec table · pros/cons · FAQ · price table
   ========================================================================== */

/* ---------- 1. แถบหัวข้อสีแดง (Title Bar) ---------- */
.dealded-title-bar-table{
    border:none !important; margin:24px 0 12px !important; padding:0 !important; width:auto !important;
}
.dealded-title-bar-line{
    border:none !important; padding:0 !important; width:4px; background:#EE4D2D; border-radius:2px;
}
.dealded-title-bar-text-cell{ border:none !important; padding:0 0 0 8px !important; }
.dealded-title-bar-text{ font-size:20px; font-weight:700; line-height:1.2; color:#222; }

/* ---------- ภาพรวมสินค้า (คำอธิบาย) ---------- */
.product-desc{ font-size:15px; line-height:1.8; color:#444; }
.product-desc p{ margin:0 0 12px; }

/* ---------- 2. การ์ดจุดเด่น (Highlights) ---------- */
.dealded-highlights-container{
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:20px 0 0;
    font-family:"Kanit",sans-serif;
}
.dealded-highlight-card{
    background:#fff; border:1px solid #EFEFEF; border-radius:16px; padding:18px 14px;
    text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.15); transition:transform .2s ease;
}
.dealded-highlight-card:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.06); }
.dealded-highlight-icon{ font-size:64px; margin:15px 0 30px; display:block; line-height:1; }
.dealded-highlight-title{ font-weight:700; font-size:16px; color:#222; margin-bottom:6px; line-height:1.3; }
.dealded-highlight-desc{ font-weight:400; font-size:13px; color:#666; line-height:1.4; }

/* ---------- 3. ตารางสเปก ---------- */
.dealded-spec-table{
    width:100% !important; border-collapse:collapse !important; margin:5px 0 25px;
    font-family:"Kanit",sans-serif;
}
.dealded-spec-table tr{ border-bottom:1px solid #EFEFEF !important; }
.dealded-spec-table tr:last-child{ border-bottom:none !important; }
.dealded-spec-table td.spec-label{ padding:10px 8px !important; color:#666 !important; width:35%; font-weight:500; font-size:14px; }
.dealded-spec-table td.spec-value{ padding:10px 8px !important; color:#222 !important; font-size:14px; }

/* ---------- 4. ข้อดี / ข้อเสีย (pcx) ---------- */
.pcx-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:20px; font-family:"Kanit",sans-serif; margin:20px 0; align-items:stretch; }
.pcx-card{ border-radius:20px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.10); display:flex; flex-direction:column; }
.pcx-pros{ border:1.5px solid #27AE60; }
.pcx-cons{ border:1.5px solid #EE4D2D; }
.pcx-head{ padding:18px 20px; display:flex; align-items:center; justify-content:center; gap:12px; flex-shrink:0; background:linear-gradient(135deg,#27AE60 0%,#1e8449 100%); }
.pcx-head-cons{ background:linear-gradient(135deg,#EE4D2D 0%,#c0392b 100%); }
.pcx-icon{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:#fff; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.pcx-title{ font-size:19px; font-weight:700; color:#fff; letter-spacing:.4px; text-shadow:0 1px 3px rgba(0,0,0,.2); }
.pcx-body{ padding:16px; background:linear-gradient(160deg,#fff 0%,#f9f9f9 100%); flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.pcx-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; margin-bottom:8px; box-shadow:0 2px 8px rgba(0,0,0,.06); border:1px solid #D5F0E0; background:#fff; flex:1; }
.pcx-item-cons{ border-color:#FAD4CC; }
.pcx-item:last-child{ margin-bottom:0; }
.pcx-emoji{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.pcx-emoji-pros{ background:#EAF7EF; }
.pcx-emoji-cons{ background:#FEF0EE; }
.pcx-text{ font-size:14px; line-height:1.5; color:#2d2d2d; font-weight:400; }

/* ---------- 5. FAQ ---------- */
.dealded-faq-container{ margin:20px 0; font-family:"Kanit",sans-serif; }
.dealded-faq-item{ background:#FAF9F6; border:1px solid #EAE5D9; border-radius:14px; padding:16px 20px; margin-bottom:12px; box-shadow:0 2px 6px rgba(184,169,143,.1); }
.dealded-faq-question{ font-size:16px !important; font-weight:600 !important; color:#2D271E !important; margin:0 0 6px !important; line-height:1.3 !important; display:flex; align-items:flex-start; gap:8px; }
.dealded-faq-answer{ font-size:14px !important; font-weight:400 !important; color:#615746 !important; margin:0 !important; line-height:1.4 !important; padding-left:24px; }

/* ==========================================================================
   6. ตารางเปรียบเทียบราคา (เก็บไว้ใช้ทำ blog เปรียบเทียบราคาทีหลัง)
   ยังไม่ได้ใช้ในหน้าสินค้า 1-ชิ้น-1-โพสต์
   ========================================================================== */
.dealded-price-wrapper{ margin:28px 0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
.premium-table-container{
    background-color:#F8F4EC;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M20,40 Q40,20 60,40 T100,40' fill='none' stroke='%23E1D4C0' stroke-width='0.5' opacity='0.4'/%3E%3C/svg%3E");
    border:1px solid #D9CEBA; border-radius:24px; overflow:hidden; box-shadow:0 8px 32px rgba(184,169,143,.25);
}
.premium-row{ padding:18px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.premium-row-border{ border-top:1px solid #E8E0D2; }
.premium-left-group{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.premium-left-group img{ height:48px; width:48px; object-fit:contain; border-radius:12px; border:1px solid #D9CEBA; box-shadow:0 3px 8px rgba(0,0,0,.06); flex-shrink:0; }
.premium-left-group .platform-inner-wrap{ display:flex; align-items:center; line-height:1.2; flex-wrap:wrap; gap:2px; }
.premium-platform-text,.platform-name-txt{ font-weight:500 !important; font-size:17px !important; color:#3A3225; }
.premium-left-group .mall-badge{ background:linear-gradient(180deg,#D9B46A 0%,#C3994D 100%); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:6px; margin-left:6px; display:inline-block; vertical-align:middle; box-shadow:0 1px 2px rgba(0,0,0,.1); letter-spacing:.2px; }
.premium-left-group .shop-meta-wrap{ font-size:11px; color:#7F7460; margin-top:4px; line-height:1.3; word-break:break-word; }
.premium-left-group .shop-name-txt{ color:#615746; }
.premium-left-group .rating-star-txt{ color:#D9A05B; font-size:12px; margin-left:6px; font-weight:500; }
.premium-right-group{ display:flex; align-items:center; gap:20px; flex-shrink:0; text-align:right; }
.premium-price-block{ line-height:1.1; white-space:nowrap; font-family:"Kanit",sans-serif !important; }
.premium-price-text{ font-family:"Kanit",sans-serif !important; font-size:20px !important; font-weight:500 !important; color:#D9381E !important; letter-spacing:-.5px; }
.premium-right-group .sold-block-wrap{ font-size:13px; color:#7F7460; margin-top:2px; font-weight:500 !important; }
.premium-right-group .sold-count-num{ font-weight:500 !important; font-size:13px; color:#4A4235; }
.premium-btn{ font-family:"Kanit",sans-serif; font-weight:700; font-size:13px; letter-spacing:.3px; padding:6px 14px; border-radius:16px; text-align:center; display:inline-block !important; text-decoration:none !important; transition:all .2s ease-in-out; white-space:nowrap; flex-shrink:0; }
.premium-btn:hover{ transform:translateY(-1px); filter:brightness(1.1); box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 4px 8px rgba(0,0,0,.25) !important; }
.premium-btn:active{ transform:translateY(0); filter:brightness(.9); }
.premium-btn.btn-shopee{ background:linear-gradient(180deg,#BA3B1D 0%,#912710 100%); border:1px solid #7D1D09; color:#fff; box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 2px 4px rgba(0,0,0,.15); text-shadow:0 -1px 0 rgba(0,0,0,.2); }
.premium-btn.btn-lazada{ background:linear-gradient(180deg,#5E26B5 0%,#44168C 100%); border:1px solid #350F70; color:#fff; box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 2px 4px rgba(0,0,0,.15); text-shadow:0 -1px 0 rgba(0,0,0,.2); }
.premium-btn.btn-tiktok{ background:linear-gradient(180deg,#333 0%,#151515 100%); border:1px solid #000; color:#fff; box-shadow:inset 0 1px 1px rgba(255,255,255,.2),0 2px 4px rgba(0,0,0,.2); text-shadow:0 -1px 0 rgba(0,0,0,.2); }
.premium-table-container + p{ font-size:12px; color:#9E9380; margin-top:10px; text-align:right; font-style:italic; letter-spacing:.2px; padding-right:4px; }

/* ==========================================================================
   7. Responsive
   ========================================================================== */
@media (max-width:640px){
    .dealded-highlights-container{ grid-template-columns:repeat(2,1fr); gap:12px; margin:15px 0 0; }
    .dealded-highlight-card{ padding:16px 10px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
    .dealded-highlight-icon{ font-size:38px; margin:5px 0 14px; }
    .dealded-highlight-title{ font-size:15px !important; line-height:1.1 !important; margin-bottom:4px !important; }
    .dealded-highlight-desc{ font-size:12px !important; line-height:1.2 !important; }
    .dealded-faq-item{ padding:12px 14px; margin-bottom:10px; }
    .dealded-faq-question{ font-size:14px !important; gap:6px; }
    .dealded-faq-answer{ font-size:13px !important; padding-left:20px; }
    .dealded-spec-table td.spec-label,.dealded-spec-table td.spec-value{ padding:8px 6px !important; font-size:13px; }
    .dealded-spec-table td.spec-label{ width:40%; }
    .pcx-wrap{ grid-template-columns:1fr; gap:12px; }
}
@media (max-width:480px){
    .premium-row{ padding:14px 12px; gap:4px; }
    .premium-left-group{ gap:6px; }
    .premium-right-group{ gap:8px; }
    .premium-price-block{ display:flex; flex-direction:column; align-items:flex-end; }
    .premium-btn{ padding:5px 12px; font-size:12px; border-radius:14px; }
}
@media (max-width:390px){
    .premium-row{ flex-direction:column; align-items:stretch; gap:12px; }
    .premium-right-group{ justify-content:space-between; align-items:center; border-top:1px dashed #E8E0D2; padding-top:10px; padding-left:54px; text-align:left; }
    .premium-price-block{ align-items:flex-start; }
}