/*! PlantShop.hk - Product Page Styles (loaded only on is_product()) */ /*! ─── FAQ Accordion ─── */ .ps-product-content-wrapper{width:100%;max-width:100%;box-sizing:border-box}.ps-faq-wrap{font-size:14px;line-height:1.6;color:#333;margin-top:24px;width:100%;max-width:100%;box-sizing:border-box} /*! Remove white background from FAQ area */ .ps-faq-wrap,.ps-faq-list,.ps-faq-item,.ps-faq-content{background:transparent!important}.ps-section-title{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin:32px 0 16px 0;color:#000;line-height:1.5}.ps-faq-list{border-top:1px solid #eee;width:100%;max-width:100%;box-sizing:border-box}.ps-faq-item{border-bottom:1px solid #eee;position:relative;width:100%;max-width:100%}.ps-faq-input{position:absolute;opacity:0;width:100%;height:40px;cursor:pointer;z-index:1;margin:0}.ps-faq-label{display:flex;justify-content:flex-start;align-items:center;padding:10px 0;font-size:15px;font-weight:700;color:#333;cursor:pointer;user-select:none;gap:10px;line-height:1.4;width:100%;box-sizing:border-box}.ps-faq-label::before{content:'−';font-size:16px;font-weight:300;color:#999;transition:transform .3s ease;order:0;flex-shrink:0;width:16px;text-align:center}.ps-faq-item:has(.ps-faq-input:checked) .ps-faq-label::before{content:'+';transform:rotate(180deg);color:#000}.ps-faq-item:has(.ps-faq-input:checked) .ps-faq-content{max-height:0;padding:0 0 0 24px}.ps-faq-content{max-height:500px;overflow:hidden;transition:max-height .35s ease,padding .35s ease;padding:0 0 12px 24px;width:100%;box-sizing:border-box;background:transparent!important}.ps-faq-content p{margin:0 0 6px 0;font-size:13px;color:#666;line-height:1.5}.ps-faq-content p:last-child{margin-bottom:0}.ps-faq-content table{font-size:13px;color:#666;line-height:1.5;width:100%}.ps-faq-content ul,.ps-faq-content ol{margin:0 0 6px 0;padding-left:20px;font-size:13px;color:#666;line-height:1.5}.ps-faq-content li{margin-bottom:3px} /*! JS fallback classes */ .ps-faq-item.is-collapsed .ps-faq-content{max-height:0;padding:0 0 0 24px}.ps-faq-item.is-collapsed .ps-faq-label::before{content:'+';transform:rotate(180deg);color:#000} /*! ─── Short Description (unified line-height) ─── */ .woocommerce-product-details__short-description,.woocommerce-product-details__short-description>div{font-size:15px!important;line-height:1.6!important;color:#333!important}.woocommerce-product-details__short-description p{line-height:1.6!important;margin:0 0 10px 0!important}.woocommerce-product-details__short-description a{color:#2c7a4e!important;text-decoration:underline!important}.woocommerce-product-details__short-description a:hover{color:#1f5c39!important} /*! ─── English: Futura-pt font ─── */ html[lang^="en"] .ps-faq-wrap,html[lang^="en"] .ps-faq-content,html[lang^="en"] .ps-faq-content p,html[lang^="en"] .ps-faq-content ul,html[lang^="en"] .ps-faq-content li{font-family:"Outfit",Arial,Helvetica,sans-serif}html[lang^="en"] .woocommerce-product-details__short-description,html[lang^="en"] .woocommerce-product-details__short-description>div,html[lang^="en"] .woocommerce-product-details__short-description p{font-family:"Futura-pt",Arial,Helvetica,sans-serif!important}html[lang^="en"] .ps-faq-label{text-transform:uppercase} /*! ─── Chinese: system font stack ─── */ html[lang="zh"] .ps-faq-wrap,html[lang="zh-HK"] .ps-faq-wrap,html:not([lang^="en"]) .ps-faq-wrap{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans TC",sans-serif} /*! ============================================================ * === LUXURY PRODUCT PAGE === (added 2026-05-25) * Reference: Lane Crawford / Joyce / Shanghai Tang product * page typography & layout language. * ============================================================ */ /*! [P1] PRODUCT TITLE — display serif, charcoal, generous leading */ .product_title.entry-title,.summary .product_title,h1.product_title{font-family:"Playfair Display","Noto Serif TC","Noto Sans TC",serif!important;font-size:clamp(28px, 3.4vw, 40px)!important;font-weight:400!important;color:#2d2926!important;letter-spacing:-0.005em!important;line-height:1.2!important;margin:0 0 14px!important;text-transform:none!important} /*! [P2] PRICE — quiet, tracked, smaller than title */ .summary .price,.summary .woocommerce-Price-amount,.wrapp-product-price .price,.product-rating-price .price{font-family:"Outfit","Futura-pt",Arial,sans-serif!important;font-size:20px!important;font-weight:400!important;color:#2d2926!important;letter-spacing:0.03em!important;line-height:1.3!important}.summary del .woocommerce-Price-amount{color:#aaa6a0!important;font-size:16px!important}.summary ins{background:transparent!important;text-decoration:none!important}.summary ins .woocommerce-Price-amount{color:#2d2926!important;font-weight:500!important} /*! [P3] ADD TO CART — rectangle, hairline, uppercase, tracked. * This is the single most important "luxury" signal on the * product page. */ .woocommerce .single_add_to_cart_button,.single_add_to_cart_button.button.alt,button.single_add_to_cart_button{background:#2d2926!important;color:#fff!important;border:1px solid #2d2926!important;border-radius:2px!important;padding:16px 40px!important;font-size:13px!important;font-weight:500!important;letter-spacing:0.18em!important;text-transform:uppercase!important;box-shadow:none!important;transition:background-color .25s ease,color .25s ease!important}.woocommerce .single_add_to_cart_button:hover,.single_add_to_cart_button.button.alt:hover{background:transparent!important;color:#2d2926!important} /*! [P4] QUANTITY SELECTOR — square, hairline */ .quantity .qty,.quantity input[type="number"]{border:1px solid #d8d4cd!important;border-radius:0!important;background:transparent!important;font-family:"Outfit","Futura-pt",sans-serif!important;letter-spacing:0.02em!important}.quantity .plus,.quantity .minus,.wd-buttons.wd-pos-r-t .wd-action-btn{border-radius:0!important} /*! [P5] PRODUCT GALLERY — sharp corners, hairline border */ .woocommerce-product-gallery,.woocommerce-product-gallery__image,.woocommerce-product-gallery__image img,.wd-carousel .wd-slide-img img{border-radius:0!important;box-shadow:none!important}.woocommerce-product-gallery{border:none!important}.flex-control-thumbs li img,.wd-thumbs img{border-radius:0!important;transition:opacity .25s ease!important} /*! [P6] BREADCRUMB — micro, tracked, muted */ .woocommerce-breadcrumb,.wd-breadcrumbs{font-size:11px!important;text-transform:uppercase!important;letter-spacing:0.2em!important;color:#8a857c!important;font-weight:500!important}.woocommerce-breadcrumb a,.wd-breadcrumbs a{color:#6b665f!important;text-decoration:none!important}.woocommerce-breadcrumb a:hover,.wd-breadcrumbs a:hover{color:#2d2926!important} /*! [P7] PRODUCT META (SKU, category, tag) — micro caps */ .product_meta,.product_meta>span{font-size:11px!important;text-transform:uppercase!important;letter-spacing:0.18em!important;color:#6b665f!important;line-height:1.8!important}.product_meta a{color:#2d2926!important;text-decoration:none!important;border-bottom:1px solid transparent!important;transition:border-color .25s ease!important}.product_meta a:hover{border-bottom-color:#c9a96e!important} /*! [P8] TABS — flat underline tab bar, uppercase tracked */ .woocommerce-tabs ul.tabs,.wd-nav-product-tabs{border-bottom:1px solid #e8e4dd!important;padding:0!important}.woocommerce-tabs ul.tabs li,.wd-nav-product-tabs>li{background:transparent!important;border:none!important;border-radius:0!important;margin:0!important}.woocommerce-tabs ul.tabs li a,.wd-nav-product-tabs>li>a{background:transparent!important;color:#6b665f!important;font-size:12px!important;font-weight:500!important;text-transform:uppercase!important;letter-spacing:0.18em!important;padding:18px 0!important;margin-right:36px!important;border:none!important;border-bottom:1px solid transparent!important;transition:color .25s ease,border-color .25s ease!important}.woocommerce-tabs ul.tabs li.active a,.woocommerce-tabs ul.tabs li.wd-active a,.wd-nav-product-tabs>li.wd-active>a{color:#2d2926!important;border-bottom-color:#2d2926!important} /*! [P9] STOCK STATUS — quiet pill */ .stock.in-stock,.stock.out-of-stock{font-size:11px!important;text-transform:uppercase!important;letter-spacing:0.16em!important;font-weight:500!important;background:transparent!important;padding:0!important}.stock.in-stock{color:#4a6b5c!important}.stock.out-of-stock{color:#a0413e!important} /*! [P10] RELATED / UPSELL section header — display serif */ .related.products>h2,.upsells.products>h2,.cross-sells>h2{font-family:"Playfair Display","Noto Serif TC",serif!important;font-size:26px!important;font-weight:400!important;color:#2d2926!important;letter-spacing:0.01em!important;text-align:center!important;margin:80px 0 36px!important} /*! [P11] PRODUCT CARDS (grid) — sharp, no shadow, hover opacity */ .products .product .product-wrapper,.wd-product .product-wrapper,.products .product .product-image-link img{border-radius:0!important;box-shadow:none!important}.products .product .wd-entities-title a,.wd-product .wd-entities-title a{font-family:"Playfair Display","Noto Serif TC",serif!important;font-weight:400!important;font-size:16px!important;color:#2d2926!important;letter-spacing:0.01em!important}.products .product .price,.wd-product .price{font-family:"Outfit","Futura-pt",sans-serif!important;font-size:14px!important;color:#2d2926!important;letter-spacing:0.03em!important} /*! [P12] SHORT DESCRIPTION — italic serif lead (Lane Crawford pattern) */ .woocommerce-product-details__short-description,.woocommerce-product-details__short-description p{font-family:"Cormorant Garamond","Playfair Display","Noto Serif TC",Georgia,serif!important;font-style:italic!important;font-size:17px!important;line-height:1.7!important;color:#4a423a!important;font-weight:400!important} /*! [P13] Mobile recalibration */ @media (max-width:768px){.product_title.entry-title,h1.product_title{font-size:26px!important}.single_add_to_cart_button{padding:14px 28px!important;font-size:12px!important}.related.products>h2,.upsells.products>h2{font-size:22px!important;margin:56px 0 28px!important}} /*! ============================================================ * === LUXURY PRODUCT — PASS 2 === (added 2026-05-25) * Targets remaining green bleed inside the product short * description (links + emphasized lines). * ============================================================ */ /*! [P14] Short-description links — kill #2c7a4e green, use * charcoal + gold hairline underline (matches blog [B7]) */ .woocommerce-product-details__short-description a,.woocommerce-product-details__short-description a:visited,.summary .woocommerce-product-details__short-description a{color:#2d2926!important;text-decoration:none!important;border-bottom:1px solid #c9a96e!important;padding-bottom:1px!important;font-style:normal!important;transition:border-color .25s ease,color .25s ease!important}.woocommerce-product-details__short-description a:hover{color:#2d2926!important;border-bottom-color:#2d2926!important} /*! [P15] Inline emphasized lines inside short description * (ASPCA Certified Pet-Friendly etc.) — strip any green * inline color, keep italic serif, gold accent on strong */ .woocommerce-product-details__short-description strong,.woocommerce-product-details__short-description b,.woocommerce-product-details__short-description em,.woocommerce-product-details__short-description p[style*="color"],.woocommerce-product-details__short-description span[style*="color"],.woocommerce-product-details__short-description *[style*="2c7a4e"],.woocommerce-product-details__short-description *[style*="2d5016"],.woocommerce-product-details__short-description *[style*="1f5c39"],.woocommerce-product-details__short-description *[style*="green"]{color:#2d2926!important;font-style:italic!important}.woocommerce-product-details__short-description strong{font-weight:500!important;color:#2d2926!important} /*! [P16] Bullet rows (✅ Filters... / ✅ Bright indirect...) — * tighten vertical rhythm so they read as a tidy feature list */ .woocommerce-product-details__short-description p{margin:0 0 12px!important;color:#2d2926!important} /*! [P17] "IN STOCK" stays quiet — already set in [P9] but * re-assert specifically inside .summary so theme CSS can't * re-skin it */ .summary .stock.in-stock,.summary p.stock.in-stock{font-family:"Outfit","Futura-pt",Arial,sans-serif!important;color:#4a6b5c!important;background:transparent!important} /*! ============================================================ * === LUXURY PRODUCT — PASS 3 === (added 2026-05-25) * Refinements: * - Tone down the bright teal WhatsApp button next to add-to-cart * - Mute / contain 3rd-party payment buttons (GPay, Link) * - More refined product description rhythm: alternating * italic lead → upright bullet list → italic close, with * gold em-dash accents * ============================================================ */ /*! [P18] WhatsApp inquiry button — kill the teal, use hairline charcoal */ .single-product .wd-buy-now-btn,.single-product .ps-whatsapp-btn,.single-product a[href*="wa.me"],.single-product a[href*="whatsapp"],.single-product .button.whatsapp,.single-product button.whatsapp,.summary a.button[class*="whatsapp" i],.summary .button.alt[class*="wa" i]{background:transparent!important;color:#2d2926!important;border:1px solid #2d2926!important;border-radius:2px!important;padding:16px 30px!important;font-size:13px!important;font-weight:500!important;letter-spacing:0.18em!important;text-transform:uppercase!important;box-shadow:none!important;transition:background-color .25s ease,color .25s ease!important}.single-product .wd-buy-now-btn:hover,.single-product a[href*="wa.me"]:hover,.single-product a[href*="whatsapp"]:hover{background:#2d2926!important;color:#fff!important}.single-product .wd-buy-now-btn svg,.single-product a[href*="wa.me"] svg,.single-product a[href*="whatsapp"] svg,.single-product .wd-buy-now-btn i,.single-product a[href*="whatsapp"] i{width:14px!important;height:14px!important;margin-right:8px!important;color:currentColor!important;fill:currentColor!important} /*! [P19] Wishlist heart — minimal outline circle */ .single-product .wd-wishlist-btn-icon,.single-product .wd-action-btn.wd-wishlist-btn>a{width:50px!important;height:50px!important;border:1px solid #2d2926!important;border-radius:0!important;color:#2d2926!important;background:transparent!important;transition:background-color .25s ease,color .25s ease!important}.single-product .wd-wishlist-btn-icon:hover,.single-product .wd-action-btn.wd-wishlist-btn>a:hover{background:#2d2926!important;color:#fff!important} /*! [P20] Payment-method group (GPay / Link / Stripe Express) — * contain them in a muted band so they don't shout */ .wc-stripe-payment-request-button,.wc-stripe-payment-request-button-separator,.stripe-payment-request-wrapper,.wcpay-payment-request-button-wrapper,#wc-stripe-payment-request-button,.wc-block-components-express-payment{margin-top:16px!important;padding-top:16px!important;border-top:1px solid #e8e4dd!important;opacity:0.85!important;transition:opacity .25s ease!important}.wc-stripe-payment-request-button:hover,.stripe-payment-request-wrapper:hover{opacity:1!important}.wc-stripe-payment-request-button button,.wc-stripe-payment-request-button>div,.wcpay-payment-request-button-wrapper>div{border-radius:2px!important} /*! [P21] Product description bullets — refined typography * When the short description uses