/*! PlantShop.hk - Blog Post Styles (loaded only on is_singular('post')) */
/*! ============================================================
   PlantShop.hk Blog Styles — blog- prefix namespace
   ============================================================ */
/*! ─── Base: Futura PT for English body only ─── */
html[lang^="en"] .blog-content,html[lang^="en"] .blog-content p,html[lang^="en"] .blog-content ul,html[lang^="en"] .blog-content ol,html[lang^="en"] .blog-content li,html[lang^="en"] .blog-lead,html[lang^="en"] .blog-blockquote,html[lang^="en"] .blog-tip-box,html[lang^="en"] .blog-tip-box p,html[lang^="en"] .blog-accordion-body,html[lang^="en"] .blog-accordion-body p,html[lang^="en"] .blog-small-note,html[lang^="en"] .blog-luxury-table,html[lang^="en"] .blog-luxury-table td,html[lang^="en"] .blog-luxury-table th{font-family:"Futura-pt",Arial,Helvetica,sans-serif}
/*! ─── Headings: system bold ─── */
.blog-content h1,.blog-content h2,.blog-content h3,.blog-content h4,.blog-content h5,.blog-content h6{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:700}
/*! ─── Blog Container ─── */
.blog-content{font-size:17px;line-height:1.85;color:#2c2c2c}
/*! ─── Lead Paragraph — left border + light bg (matches Chinese) ─── */
.blog-lead{font-size:18px;line-height:1.9;color:#3a3a3a;margin-bottom:1.8em;padding:1.2em 1.5em;border-left:4px solid #7ab893;background:#f5faf7;border-radius:0 8px 8px 0}
/*! ─── Section Divider ─── */
.blog-divider{border:0;border-top:1px solid #e0dcd5;margin:2.5em 0;position:relative}.blog-divider::after{content:"❧";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;padding:0 12px;color:#b8b0a3;font-size:14px}
/*! ─── Headings Hierarchy ─── */
.blog-content h1{font-size:32px;font-weight:700;line-height:1.3;color:#1a1a1a;margin:0 0 .6em;letter-spacing:-.01em}.blog-content h2{font-size:26px;font-weight:700;line-height:1.35;color:#2d4a3e;margin:2em 0 .7em;padding-bottom:.3em;border-bottom:2px solid #c8ddd0}.blog-content h3{font-size:20px;font-weight:700;line-height:1.4;color:#3d5c4e;margin:1.6em 0 .5em}.blog-content h4{font-size:18px;font-weight:600;line-height:1.4;color:#4a6b5c;margin:1.4em 0 .5em}
/*! ─── Sub-heading labels ─── */
.blog-content p strong:first-child,.blog-content p>strong:first-child{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-weight:700;color:#2d4a3e}
/*! ─── Paragraphs & Links ─── */
.blog-content p{margin-bottom:1.2em}.blog-content a{color:#2d7a5f;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#a8d5c1;transition:all .2s ease}.blog-content a:hover{color:#1e5c43;text-decoration-color:#2d7a5f}
/*! ─── Lists ─── */
.blog-content ul,.blog-content ol{margin:1em 0 1.2em;padding-left:1.8em}.blog-content ul li,.blog-content ol li{margin-bottom:.6em;line-height:1.75}.blog-content ul li strong,.blog-content ol li strong{color:#2d4a3e;font-weight:600}.blog-content ul ul,.blog-content ol ol,.blog-content ul ol,.blog-content ol ul{margin:.5em 0}
/*! ─── Blockquote & Tip Box ─── */
.blog-blockquote{background:#f8f9f5;border-left:4px solid #c4b896;margin:1.8em 0;padding:1.2em 1.5em;border-radius:0 6px 6px 0;font-style:italic;color:#555}.blog-blockquote p:last-child{margin-bottom:0}.blog-tip-box{background:#fdfcf8;border:1px solid #e8e2d4;border-radius:8px;padding:1em 1.2em;margin:.5em 0}.blog-tip-box.gold{border-color:#d4c9a0;background:#fdfbf3}.blog-tip-box.green{border-color:#b8d4c0;background:#f4faf5}.blog-tip-box p{margin-bottom:.6em}.blog-tip-box p:last-child{margin-bottom:0}
/*! ─── Luxury Table ─── */
.blog-luxury-table-wrap{overflow-x:auto;margin:1.5em 0;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.06)}.blog-luxury-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.6}.blog-luxury-table thead th{background:#2d4a3e;color:#fff;font-weight:700;text-align:left;padding:14px 18px;font-size:14px;letter-spacing:.03em;text-transform:uppercase;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}.blog-luxury-table thead th:first-child{border-radius:10px 0 0 0}.blog-luxury-table thead th:last-child{border-radius:0 10px 0 0}.blog-luxury-table tbody td{padding:12px 18px;border-bottom:1px solid #eee;vertical-align:top}.blog-luxury-table tbody tr:nth-child(even){background:#fafbf9}.blog-luxury-table tbody tr:last-child td:first-child{border-radius:0 0 0 10px}.blog-luxury-table tbody tr:last-child td:last-child{border-radius:0 0 10px 0}.blog-luxury-table tbody tr:last-child td{border-bottom:0}.blog-luxury-table a{color:#2d7a5f;text-decoration:none;border-bottom:1px dashed #a8d5c1}.blog-luxury-table a:hover{border-bottom-style:solid}
/*! ─── Accordion ─── */
.blog-accordion{margin:1.5em 0;border:1px solid #e0dcd5;border-radius:10px;overflow:hidden}.blog-accordion-item{border-bottom:1px solid #e0dcd5}.blog-accordion-item:last-child{border-bottom:0}.blog-accordion-header{background:#f5f5f0;padding:14px 20px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .2s ease;color:#2d4a3e;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}.blog-accordion-header:hover{background:#eeece5}.blog-accordion-header::after{content:"+";font-size:20px;color:#999;transition:transform .3s ease}.blog-accordion-header.active::after{content:"−";color:#333}.blog-accordion-body{padding:16px 20px;display:none;background:#fff;border-top:1px solid #e8e8e0}.blog-accordion-body.open{display:block}
/*! ─── Small Note ─── */
.blog-small-note{font-size:13px;color:#888;font-style:italic;margin-top:1em;line-height:1.6}
/*! ─── Products Section ─── */
.blog-products-section{margin:2em 0;padding:1.5em 0;border-top:1px solid #e0dcd5}.blog-products-section h3{margin-top:0}
/*! ─── Emphasis ─── */
.blog-content em{font-style:italic;color:#555}.blog-content strong{font-weight:600;color:#2d4a3e}.blog-content code{background:#f5f5f0;padding:2px 6px;border-radius:4px;font-size:90%;color:#666}
/*! ─── JSON-LD hidden ─── */
.blog-content script[type="application/ld+json"]{display:none}
/*! ─── Responsive ─── */
@media(max-width:768px){.blog-content{font-size:16px}.blog-content h1{font-size:26px}.blog-content h2{font-size:22px}.blog-content h3{font-size:18px}.blog-lead{font-size:16px;padding:1em}.blog-luxury-table-wrap{border-radius:8px}.blog-luxury-table{font-size:14px}.blog-luxury-table thead th,.blog-luxury-table tbody td{padding:10px 12px}.blog-blockquote{padding:1em;margin:1.4em 0}}
/*! ============================================================
 *  === AESOP-INSPIRED BLOG REFINEMENTS === (added 2026-05-24)
 *  Reference: aesop.com — generous tracking, hairline rules,
 *  italic serif accents, warm off-whites, lighter weights.
 *  Delete this whole block to revert. Each [n] is independent.
 * ============================================================ */

/*! [B1] Body tracking + warm color shift */
.blog-content {
    color: #2d2926 !important;            /* warm charcoal vs pure black */
    letter-spacing: -0.003em;             /* subtle tighten — Aesop body */
}

/*! [B2] Lead paragraph — italic serif, magazine-grade */
.blog-lead {
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
    font-style: italic !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: #3a3530 !important;
    background: #faf7f2 !important;        /* warm cream replacing pale green */
    border-left: 1px solid #c9a96e !important;
    border-radius: 0 !important;
    padding: 1.2em 1.5em !important;
    letter-spacing: 0.005em !important;
}

/*! [B3] Headings — lighter weights, wider tracking on H2 */
.blog-content h1 { font-weight: 500 !important; letter-spacing: -0.015em !important; }
.blog-content h2 {
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    border-bottom: 1px solid rgba(45,41,38,0.10) !important;  /* hairline replaces 2px green */
    padding-bottom: 0.5em !important;
    color: #2d2926 !important;
}
.blog-content h3 { font-weight: 500 !important; color: #3a3530 !important; }
.blog-content h4 { font-weight: 500 !important; color: #4a423a !important; }

/*! [B4] Subdued links — Aesop-style minimal underline */
.blog-content a {
    color: #2d4a3e !important;
    text-decoration-color: rgba(45,74,62,0.30) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 4px !important;
}
.blog-content a:hover {
    color: #1e5c43 !important;
    text-decoration-color: #c9a96e !important;
    text-decoration-thickness: 2px !important;
}

/*! [B5] Hairline section divider — minimal Aesop-style */
.blog-divider {
    border-top-color: rgba(45,41,38,0.10) !important;
}
.blog-divider::after {
    background: var(--ps-bg-warm, #fdfcf8) !important;
    color: #c9a96e !important;
}

/*! [B6] Luxury table — warmer header, no harsh edges */
.blog-luxury-table thead th {
    background: #2d4a3e !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    font-size: 13px !important;
    padding: 16px 20px !important;
}
.blog-luxury-table tbody tr:nth-child(even) { background: #faf9f5 !important; }
.blog-luxury-table-wrap {
    box-shadow: 0 6px 20px rgba(45,41,38,0.04) !important;
}

/*! [B7] Accordion — Aesop-style minimal, no boxed background */
.blog-accordion {
    border: none !important;
    border-top: 1px solid rgba(45,41,38,0.10) !important;
    border-radius: 0 !important;
}
.blog-accordion-item {
    border-bottom: 1px solid rgba(45,41,38,0.08) !important;
}
.blog-accordion-header {
    background: transparent !important;
    padding: 18px 0 !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
}
.blog-accordion-header:hover { background: transparent !important; color: #c9a96e !important; }
.blog-accordion-body { background: transparent !important; padding: 4px 0 20px 0 !important; }

/*! [B8] Tip box — softer, more refined */
.blog-tip-box {
    border-radius: 4px !important;
    padding: 1.2em 1.5em !important;
}



/*! ============================================================
 *  === BLOG PRODUCT CARDS — LUXURY FIX & REFINEMENT ===
 *  Added: 2026-05-24
 *
 *  ROOT CAUSE FIX:
 *    The [products] shortcode renders inside .blog-content, so the
 *    earlier rule `.blog-content a { color:#2d7a5f; text-decoration:underline }`
 *    was bleeding into product titles, categories AND the add_to_cart
 *    button — painting everything gold/green with underlines.
 *
 *  Strategy:
 *    1. Neutralise editorial link styles inside product cards
 *    2. Restyle the add-to-cart button as a proper luxury CTA
 *    3. Aesop / Lane Crawford polish: hairlines, wide tracking,
 *       lighter weights, generous breathing room.
 *
 *  Delete this whole block to revert. Each [P#] is independent.
 * ============================================================ */

/*! [P1] CRITICAL — strip editorial link styles inside product grid */
.blog-content .wd-products-element a,
.blog-content .wd-products a,
.blog-content .wd-product a,
.blog-content .wd-add-btn a,
.blog-content .add_to_cart_button,
.blog-content .product-image-link,
.blog-content .wd-entities-title a,
.blog-content .wd-product-cats a,
.blog-content .quick-view-button,
.blog-content .wd-wishlist-btn a {
    text-decoration: none !important;
    text-underline-offset: 0 !important;
    text-decoration-color: transparent !important;
    border-bottom: 0 !important;
}
.blog-content .wd-products-element a:hover,
.blog-content .wd-products a:hover,
.blog-content .wd-product a:hover,
.blog-content .wd-add-btn a:hover,
.blog-content .add_to_cart_button:hover {
    text-decoration: none !important;
}

/*! [P2] Product grid — generous breathing room (Aesop spacing) */
.blog-content .wd-products-element {
    margin: 2em 0 2.4em !important;
}
.blog-content .wd-products {
    --wd-gap-lg: 40px !important;
    --wd-gap-md: 32px !important;
}
.blog-content .wd-product {
    text-align: left !important;
}
.blog-content .wd-product .product-wrapper {
    padding-bottom: 4px !important;
}

/*! [P3] Product title — light weight, warm charcoal, refined tracking */
.blog-content .wd-product .wd-entities-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Noto Sans TC", "PingFang TC", sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
    margin: 18px 0 4px !important;
    color: #2d2926 !important;
    border: 0 !important;
    padding: 0 !important;
}
.blog-content .wd-product .wd-entities-title a {
    color: #2d2926 !important;
    font-weight: 500 !important;
    transition: color .25s ease !important;
}
.blog-content .wd-product .wd-entities-title a:hover {
    color: #c9a96e !important;
}

/*! [P4] Product category — small caps, muted, wide tracking */
.blog-content .wd-product .wd-product-cats {
    margin: 0 0 6px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #8a7f72 !important;
    font-weight: 500 !important;
}
.blog-content .wd-product .wd-product-cats a {
    color: #8a7f72 !important;
    font-weight: 500 !important;
}
.blog-content .wd-product .wd-product-cats a:hover {
    color: #c9a96e !important;
}

/*! [P5] Product price — clean, harmonious with title */
.blog-content .wd-product .price,
.blog-content .wd-product .price .amount,
.blog-content .wd-product .price bdi,
.blog-content .wd-product .price .woocommerce-Price-amount {
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    color: #2d2926 !important;
    letter-spacing: 0.01em !important;
}
.blog-content .wd-product .price {
    display: block !important;
    margin: 2px 0 14px !important;
    line-height: 1.3 !important;
}
.blog-content .wd-product .price del { opacity: .5 !important; margin-right: 6px !important; }
.blog-content .wd-product .price ins { text-decoration: none !important; }

/*! [P6] ADD-TO-CART BUTTON — luxury CTA (the main fix) */
.blog-content .wd-add-btn,
.blog-content .wd-add-btn.wd-add-btn-replace {
    display: block !important;
    margin-top: 6px !important;
}
.blog-content .wd-add-btn .button,
.blog-content .wd-add-btn a.button,
.blog-content .add_to_cart_button,
.blog-content a.add_to_cart_button.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px 22px !important;
    background: #2d2926 !important;       /* warm charcoal */
    color: #ffffff !important;
    border: 1px solid #2d2926 !important;
    border-radius: 0 !important;          /* sharp luxury corners */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Noto Sans TC", "PingFang TC", sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.16em !important;    /* Aesop-style wide tracking */
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background .3s ease, color .3s ease, border-color .3s ease !important;
}
.blog-content .wd-add-btn .button:hover,
.blog-content .wd-add-btn a.button:hover,
.blog-content .add_to_cart_button:hover,
.blog-content a.add_to_cart_button.button:hover {
    background: #c9a96e !important;       /* warm gold */
    border-color: #c9a96e !important;
    color: #ffffff !important;
}
.blog-content .wd-add-btn .button > span,
.blog-content .add_to_cart_button > span {
    color: inherit !important;
    background: transparent !important;
    font: inherit !important;
    letter-spacing: inherit !important;
}
/* loading + added states */
.blog-content .add_to_cart_button.loading { opacity: .7 !important; }
.blog-content .add_to_cart_button.added::after {
    margin-left: 8px !important;
    color: inherit !important;
}

/*! [P7] Quick-view / wishlist overlay buttons — neutralise editorial links */
.blog-content .wd-buttons a,
.blog-content .quick-view-button,
.blog-content .wd-wishlist-btn a {
    color: #2d2926 !important;
}
.blog-content .wd-buttons a:hover,
.blog-content .quick-view-button:hover,
.blog-content .wd-wishlist-btn a:hover {
    color: #c9a96e !important;
}

/*! [P8] Product labels (熱賣 etc.) — refined off-charcoal pill */
.blog-content .wd-product .product-label.featured,
.blog-content .wd-product .product-label.onsale {
    background: rgba(45, 41, 38, 0.85) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 6px 10px !important;
    border-radius: 0 !important;
}

/*! [P9] "相關產品" heading — elegant centred section divider */
.blog-content h3 + p + .wd-products-element,
.blog-content h3 + .wd-products-element {
    /* hook used to identify a related-products section */
}
.blog-content .blog-products-section,
.blog-content h3:has(+ p + .wd-products-element),
.blog-content h3:has(+ .wd-products-element) {
    margin-top: 3em !important;
}
.blog-content h3:has(+ p + .wd-products-element),
.blog-content h3:has(+ .wd-products-element) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Noto Sans TC", "PingFang TC", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: #2d2926 !important;
    text-align: center !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 3em 0 0.4em !important;
}
.blog-content h3:has(+ p + .wd-products-element)::after,
.blog-content h3:has(+ .wd-products-element)::after {
    content: "" !important;
    display: block !important;
    width: 32px !important;
    height: 1px !important;
    background: #c9a96e !important;
    margin: 14px auto 0 !important;
}
.blog-content h3:has(+ p + .wd-products-element) + p {
    text-align: center !important;
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
    font-style: italic !important;
    font-size: 17px !important;
    color: #6b665f !important;
    margin: 0.4em auto 1.8em !important;
    max-width: 560px !important;
    line-height: 1.6 !important;
}

/*! [P10] Responsive */
@media (max-width: 768px) {
    .blog-content .wd-products {
        --wd-gap-sm: 16px !important;
    }
    .blog-content .wd-product .wd-entities-title { font-size: 15px !important; }
    .blog-content .wd-product .price,
    .blog-content .wd-product .price .amount { font-size: 17px !important; }
    .blog-content .wd-add-btn .button,
    .blog-content .add_to_cart_button {
        padding: 11px 14px !important;
        font-size: 11px !important;
        letter-spacing: 0.12em !important;
        width: 100% !important;
    }
    .blog-content h3:has(+ p + .wd-products-element),
    .blog-content h3:has(+ .wd-products-element) {
        font-size: 12px !important;
        letter-spacing: 0.22em !important;
    }
    .blog-content h3:has(+ p + .wd-products-element) + p {
        font-size: 16px !important;
    }
}

/*! ============================================================
 *  === GLOBAL BLOG BREATHING SPACE === (added 2026-05-24)
 *  More generous typography rhythm — Lane Crawford / Aesop feel.
 * ============================================================ */

/*! [B9] Breathing space — calibrated (revised 2026-05-24, was too open) */
.blog-content { line-height: 1.78 !important; }
.blog-content p { margin-bottom: 1.05em !important; }
.blog-content ul, .blog-content ol { margin: 0.9em 0 1.1em !important; }
.blog-content ul li, .blog-content ol li { margin-bottom: 0.45em !important; line-height: 1.7 !important; }

/*! [B10] Heading rhythm — tighter than before, still airy */
.blog-content h2 {
    margin: 1.9em 0 0.65em !important;
    padding-bottom: 0.4em !important;
    line-height: 1.32 !important;
}
.blog-content h3 {
    margin: 1.5em 0 0.45em !important;
    line-height: 1.4 !important;
}
.blog-content h4 {
    margin: 1.25em 0 0.4em !important;
    line-height: 1.45 !important;
}

/*! [B11] Lead paragraph — calmer spacing */
.blog-lead {
    margin: 1.3em 0 1.9em !important;
}


/*! ============================================================
 *  === LUXURY BLOG / SINGLE POST === (added 2026-05-25)
 *  Editorial typography reference: Lane Crawford journal, Joyce
 *  feature stories. Goals: long-form reading rhythm, generous
 *  measure, italic serif leads, micro-caps meta.
 * ============================================================ */

/*! [B1] POST H1 — display, charcoal (was green #1a1a1a is OK but
 *  blog-content h2 was #2d4a3e forest green — unify here) */
.blog-content h1 {
    font-family: "Playfair Display","Noto Serif TC","Noto Sans TC",serif !important;
    font-size: clamp(30px, 3.6vw, 44px) !important;
    font-weight: 400 !important;
    color: #2d2926 !important;
    letter-spacing: -0.005em !important;
    line-height: 1.2 !important;
    margin: 0 0 0.6em !important;
}

/*! [B1b] POST HERO TITLE — WHITE over the dark image hero.
 *  The blog post page-title bar sits on a featured image with a dark
 *  gradient overlay, so the H1 must be light to stay readable.
 *  This lives in plantshop-blog.css on purpose: FlyingPress "Used CSS"
 *  keeps these post-title selectors, whereas the equivalent white rule
 *  in plantshop-global.css [U54] gets purged from the per-page used-CSS
 *  and therefore never wins against the (kept) charcoal [B1] rule. */
article.post h1.entry-title,
.single-post h1.entry-title,
html body.single-post .wd-page-title h1.entry-title,
html body.single .wd-page-title.color-scheme-light h1.entry-title {
    font-family: "Playfair Display","Noto Serif TC","Noto Sans TC",serif !important;
    font-size: clamp(30px, 3.6vw, 44px) !important;
    font-weight: 400 !important;
    color: #fafaf7 !important;
    text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45) !important;
    letter-spacing: -0.005em !important;
    line-height: 1.2 !important;
    margin: 0 0 0.6em !important;
}

/*! [B2] POST H2 — kill the forest green #2d4a3e, drop the
 *  decorative green underline, use hairline rule instead */
.blog-content h2,
article.post .entry-content h2,
.single-post .entry-content h2 {
    font-family: "Playfair Display","Noto Serif TC",serif !important;
    color: #2d2926 !important;
    font-weight: 500 !important;
    font-size: 26px !important;
    letter-spacing: 0.005em !important;
    line-height: 1.3 !important;
    margin: 2.2em 0 0.7em !important;
    padding-bottom: 0.4em !important;
    border-bottom: 1px solid #e8e4dd !important;
}

/*! [B3] POST H3 / H4 — drop the green chain */
.blog-content h3,
article.post .entry-content h3,
.single-post .entry-content h3 {
    color: #2d2926 !important;
    font-family: "Playfair Display","Noto Serif TC",serif !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    letter-spacing: 0.005em !important;
    margin: 1.8em 0 0.5em !important;
}
.blog-content h4,
article.post .entry-content h4,
.single-post .entry-content h4 {
    color: #3a3530 !important;
    font-family: "Playfair Display","Noto Serif TC",serif !important;
    font-weight: 500 !important;
    font-size: 17px !important;
    letter-spacing: 0.01em !important;
}

/*! [B4] BODY COPY — long-form measure & rhythm */
.blog-content,
article.post .entry-content,
.single-post .entry-content {
    font-size: 17px !important;
    line-height: 1.85 !important;
    color: #3a3530 !important;
    letter-spacing: 0.005em !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.blog-content p,
article.post .entry-content p {
    margin: 0 0 1.4em !important;
}

/*! [B5] LEAD PARAGRAPH — italic serif drop-in */
article.post .entry-content > p:first-of-type,
.blog-content > p:first-of-type {
    font-family: "Cormorant Garamond","Playfair Display","Noto Serif TC",Georgia,serif !important;
    font-style: italic !important;
    font-size: 21px !important;
    line-height: 1.7 !important;
    color: #4a423a !important;
    margin-bottom: 1.8em !important;
}

/*! [B6] BLOCKQUOTE — editorial pull-quote */
.blog-content blockquote,
article.post .entry-content blockquote,
.single-post .entry-content blockquote {
    font-family: "Cormorant Garamond","Playfair Display",serif !important;
    font-style: italic !important;
    font-size: 24px !important;
    line-height: 1.5 !important;
    color: #2d2926 !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    padding: 2em 1em !important;
    margin: 2.4em 0 !important;
    position: relative !important;
}
.blog-content blockquote::before,
article.post .entry-content blockquote::before {
    content: "\201C" !important;
    display: block !important;
    font-size: 60px !important;
    line-height: 0.5 !important;
    color: #c9a96e !important;
    margin-bottom: 0.3em !important;
    font-family: "Playfair Display",serif !important;
}

/*! [B7] LINKS — hairline underline animation */
.blog-content a:not(.wp-block-button__link),
article.post .entry-content a:not(.wp-block-button__link) {
    color: #2d2926 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #c9a96e !important;
    padding-bottom: 1px !important;
    transition: border-color .25s ease, color .25s ease !important;
}
.blog-content a:hover,
article.post .entry-content a:hover {
    border-bottom-color: #2d2926 !important;
}

/*! [B8] POST META (date, author, category) — micro caps */
.post-meta,
.entry-meta,
.wd-post-meta,
.wd-entry-meta {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    font-weight: 500 !important;
    color: #8a857c !important;
}
.post-meta a,
.entry-meta a,
.wd-post-meta a {
    color: #6b665f !important;
    text-decoration: none !important;
}

/*! [B9] FEATURED IMAGE — sharp, full width inside measure */
article.post .post-thumbnail img,
.single-post .post-thumbnail img,
.wp-block-image img {
    border-radius: 0 !important;
    box-shadow: none !important;
}
article.post .post-thumbnail,
.single-post .post-thumbnail {
    margin: 0 0 2.4em !important;
}

/*! [B10] BLOG INDEX CARD — minimal, hover opacity only */
.blog-design-default article,
.wd-post,
.blog-post-loop .post {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
}
.wd-post .post-thumbnail img,
.blog-design-default article img {
    border-radius: 0 !important;
    transition: opacity .35s ease !important;
}
.wd-post:hover .post-thumbnail img {
    opacity: 0.92 !important;
}
.wd-post .entry-title,
.blog-design-default article .entry-title {
    font-family: "Playfair Display","Noto Serif TC",serif !important;
    font-weight: 400 !important;
    font-size: 22px !important;
    color: #2d2926 !important;
    letter-spacing: 0.005em !important;
    line-height: 1.35 !important;
}
.wd-post .entry-title a {
    color: inherit !important;
    text-decoration: none !important;
    border: none !important;
}

/*! [B11] "READ MORE" — gold hairline tag, NOT a button */
.read-more-button,
.wd-readmore-wrap a,
a.more-link {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #c9a96e !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
    color: #2d2926 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: border-color .25s ease, letter-spacing .25s ease !important;
}
.read-more-button:hover,
a.more-link:hover {
    background: transparent !important;
    border-bottom-color: #2d2926 !important;
    letter-spacing: 0.24em !important;
}

/*! [B12] Mobile recalibration */
@media (max-width: 768px) {
    .blog-content,
    article.post .entry-content { font-size: 16px !important; line-height: 1.75 !important; }
    .blog-content h2,
    article.post .entry-content h2 { font-size: 22px !important; }
    article.post .entry-content > p:first-of-type { font-size: 18px !important; }
    .blog-content blockquote { font-size: 20px !important; padding: 1.4em 0.6em !important; }
}


/*! ============================================================
 *  === LUXURY BLOG — PASS 2 === 2026-05-25
 *  User feedback: blog single page reading measure too narrow.
 *  Bump from 680px → 780px so long-form articles breathe.
 * ============================================================ */

/*! [B4-revised] Blog single body measure — wider */
html body .blog-content,
html body article.post .entry-content,
html body .single-post .entry-content {
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 17px !important;
    line-height: 1.85 !important;
}

/*! [B5-revised] Lead paragraph measure aligned */
html body article.post .entry-content > p:first-of-type,
html body .blog-content > p:first-of-type {
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*! [B9-revised] Featured image — same column width */
html body article.post .post-thumbnail,
html body .single-post .post-thumbnail {
    max-width: 780px !important;
    margin: 0 auto 2.4em !important;
}
html body article.post .post-thumbnail img,
html body .single-post .post-thumbnail img {
    width: 100% !important;
    height: auto !important;
}

/*! [B13] Blockquote / pull-quote — also align to new measure */
html body article.post .entry-content blockquote,
html body .blog-content blockquote {
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 820px) {
    html body .blog-content,
    html body article.post .entry-content,
    html body article.post .post-thumbnail {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/*! ============================================================
 * [B-EN] ENGLISH POST PARITY — match the Chinese editorial style
 *   The Chinese posts author the intro as <p class="ps-lead"> and
 *   tables as <div class="ps-luxury-table-wrap"><table class="ps-luxury-table">.
 *   The English posts were written with bare <p>/<table>, so they
 *   looked plainer. These rules auto-apply the SAME look to English
 *   posts. Scoped to .is-english-page so Chinese posts are untouched.
 * ============================================================ */

/* Intro lead box = first paragraph of the article body */
body.is-english-page .blog-content > p:first-of-type,
body.is-english-page article.post .entry-content > p:first-of-type,
body.is-english-page .wd-entry-content > p:first-of-type {
    font-size: 18px !important;
    line-height: 1.9 !important;
    color: #4a423a !important;
    font-weight: 300 !important;
    font-style: italic !important;
    background: #faf7f2 !important;
    padding: 18px 22px !important;
    border-left: 3px solid #c9a96e !important;
    border-radius: 0 4px 4px 0 !important;
    margin-bottom: 1.8em !important;
}

/* Bare tables -> luxury table (dark header, padded cells, zebra, hover) */
body.is-english-page .blog-content table:not(.ps-luxury-table),
body.is-english-page article.post .entry-content table:not(.ps-luxury-table),
body.is-english-page .wd-entry-content table:not(.ps-luxury-table) {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 2em 0 !important;
    font-size: 15px !important;
    display: table !important;
    border: 0 !important;
    overflow: hidden !important;
}
body.is-english-page .blog-content table:not(.ps-luxury-table) th,
body.is-english-page article.post .entry-content table:not(.ps-luxury-table) th,
body.is-english-page .wd-entry-content table:not(.ps-luxury-table) th {
    background: #2d2926 !important;
    color: #ffffff !important;
    padding: 14px 18px !important;
    text-align: left !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
    border: 0 !important;
}
body.is-english-page .blog-content table:not(.ps-luxury-table) tbody td,
body.is-english-page article.post .entry-content table:not(.ps-luxury-table) tbody td,
body.is-english-page .wd-entry-content table:not(.ps-luxury-table) tbody td {
    padding: 14px 18px !important;
    border-bottom: 1px solid #ece8e1 !important;
    color: #4a423a !important;
}
body.is-english-page .blog-content table:not(.ps-luxury-table) tbody tr:nth-child(even) td,
body.is-english-page article.post .entry-content table:not(.ps-luxury-table) tbody tr:nth-child(even) td,
body.is-english-page .wd-entry-content table:not(.ps-luxury-table) tbody tr:nth-child(even) td {
    background: #f7f5ef !important;
}
body.is-english-page .blog-content table:not(.ps-luxury-table) tbody tr:nth-child(odd) td,
body.is-english-page article.post .entry-content table:not(.ps-luxury-table) tbody tr:nth-child(odd) td,
body.is-english-page .wd-entry-content table:not(.ps-luxury-table) tbody tr:nth-child(odd) td {
    background: #ffffff !important;
}
body.is-english-page .blog-content table:not(.ps-luxury-table) tbody tr:hover td,
body.is-english-page article.post .entry-content table:not(.ps-luxury-table) tbody tr:hover td,
body.is-english-page .wd-entry-content table:not(.ps-luxury-table) tbody tr:hover td {
    background: rgba(201, 169, 110, 0.06) !important;
    transition: background .2s ease !important;
}


/*! ============================================================
 * [B-ZH] BLOG TITLE (Chinese) = BOLD, + mobile typography tuning
 * ============================================================ */

/* Chinese blog post hero title -> bold */
body.is-chinese-page article.post h1.entry-title,
body.is-chinese-page .single-post h1.entry-title,
html body.is-chinese-page.single-post .wd-page-title h1.entry-title,
html body.is-chinese-page.single .wd-page-title.color-scheme-light h1.entry-title,
body.is-chinese-page.blog .wd-page-title .entry-title,
body.is-chinese-page.woodmart-archive-blog .wd-page-title .entry-title {
    font-weight: 700 !important;
}

/* ---- Mobile (<=768px): blog reading rhythm for Chinese ---- */
@media (max-width: 768px) {
    body.is-chinese-page .blog-content,
    body.is-chinese-page article.post .entry-content,
    body.is-chinese-page .wd-entry-content {
        font-size: 15.5px !important;
        line-height: 1.85 !important;
        letter-spacing: 0.02em !important;
    }
    body.is-chinese-page .blog-content p,
    body.is-chinese-page article.post .entry-content p { margin-bottom: 1.15em !important; }

    /* Hero title on phones: bold, readable, calmer leading */
    body.is-chinese-page article.post h1.entry-title,
    body.is-chinese-page .single-post h1.entry-title,
    html body.is-chinese-page.single-post .wd-page-title h1.entry-title {
        font-size: 27px !important;
        line-height: 1.42 !important;
        font-weight: 700 !important;
        letter-spacing: 0.015em !important;
    }
    /* In-content headings */
    body.is-chinese-page .blog-content h2,
    body.is-chinese-page article.post .entry-content h2 {
        font-size: 21px !important; line-height: 1.45 !important; letter-spacing: 0.02em !important;
    }
    body.is-chinese-page .blog-content h3,
    body.is-chinese-page article.post .entry-content h3 {
        font-size: 17.5px !important; line-height: 1.5 !important; letter-spacing: 0.02em !important;
    }
    /* Lead box + first-paragraph lead */
    body.is-chinese-page .blog-content .ps-lead,
    body.is-chinese-page article.post .entry-content .ps-lead,
    body.is-english-page .blog-content > p:first-of-type {
        font-size: 16px !important; line-height: 1.85 !important; letter-spacing: 0.015em !important;
    }
}


/*! ============================================================
 * [B-REL] BLOG 「相關產品」 intro line → small print
 *   The intro paragraph that sits right before the products grid
 *   (「以下係文章中提及嘅植物…」) was full body size. Make it a
 *   refined small caption. Targeted via :has(+ .wd-products-element).
 * ============================================================ */
html body .blog-content p:has(+ .wd-products-element),
html body article.post .entry-content p:has(+ .wd-products-element) {
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: #8a847c !important;
    letter-spacing: 0.03em !important;
    max-width: 560px !important;
    margin: 6px auto 26px !important;
}
/* the 「相關產品」 heading just above it — quieter, tracked caps feel */
html body .blog-content h3:has(+ p + .wd-products-element),
html body article.post .entry-content h3:has(+ p + .wd-products-element) {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;
    color: #2d2926 !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}