{"product_id":"hoe-hin-white-flower-embrocation-roll-on-4-5ml","title":"Hoe Hin White Flower Embrocation - Roll On (4.5ml)","description":"\u003c!-- =========================================================\n     HOE HIN WHITE FLOWER EMBROCATION \/ PAK FAH YEOW\n     PRODUCT INFORMATION ACCORDION\n\n     TYPOGRAPHY:\n     - Font family comes from Shopify theme\n     - Font size comes from Shopify theme\n     - Font weight comes from Shopify theme\n     - No custom typography is forced\n\n     FEATURES:\n     - 4 sections only\n     - First section open by default\n     - Only one section open at a time\n     - Responsive on desktop, tablet and mobile\n     - Uses #00A779 and different shades of green\n     - No external libraries required\n     ========================================================= --\u003e\n\u003cstyle\u003e\n\n\/* =========================================================\n   1. MAIN ACCORDION CONTAINER\n   ========================================================= *\/\n\n.lavender-accordion {\n    width: 100%;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 20px 0;\n    color: inherit;\n    box-sizing: border-box;\n\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n}\n\n\n\/* =========================================================\n   2. INDIVIDUAL ACCORDION ITEM\n   ========================================================= *\/\n\n.lavender-accordion-item {\n    margin-bottom: 14px;\n    border: 1px solid #dcefe9;\n    border-radius: 12px;\n    overflow: hidden;\n    background: #ffffff;\n    box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   3. ACCORDION HEADER \/ BUTTON\n   ========================================================= *\/\n\n.lavender-accordion-header {\n    width: 100%;\n    border: none;\n    outline: none;\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    padding: 20px 24px;\n\n    text-align: left;\n\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n\n    color: #006b50;\n    background: #f0faf7;\n\n    transition:\n        background-color 0.25s ease,\n        color 0.25s ease;\n\n    box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   4. ACCORDION HEADER HOVER\n   ========================================================= *\/\n\n.lavender-accordion-header:hover {\n    background: #e3f6f0;\n    color: #005d46;\n}\n\n\n\/* =========================================================\n   5. DIFFERENT GREEN SHADES FOR EACH SECTION\n   ========================================================= *\/\n\n.lavender-item-function .lavender-accordion-header {\n    background: #eaf8f4;\n}\n\n.lavender-item-directions .lavender-accordion-header {\n    background: #e2f5ef;\n}\n\n.lavender-item-ingredients .lavender-accordion-header {\n    background: #d0eee5;\n}\n\n.lavender-item-caution .lavender-accordion-header {\n    background: #d9f2eb;\n}\n\n\n\/* =========================================================\n   6. ACTIVE ACCORDION HEADER\n   ========================================================= *\/\n\n.lavender-accordion-header.active {\n    background: #00a779 !important;\n    color: #ffffff !important;\n}\n\n\n\/* =========================================================\n   7. ACCORDION TITLE\n   ========================================================= *\/\n\n.lavender-accordion-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n}\n\n\n\/* =========================================================\n   8. SMALL GREEN TITLE INDICATOR\n   ========================================================= *\/\n\n.lavender-title-indicator {\n    width: 8px;\n    height: 8px;\n    flex: 0 0 8px;\n\n    background: #00a779;\n    border-radius: 50%;\n}\n\n\n.lavender-accordion-header.active .lavender-title-indicator {\n    background: #ffffff;\n}\n\n\n\/* =========================================================\n   9. PLUS \/ MINUS ICON\n   ========================================================= *\/\n\n.lavender-accordion-icon {\n    position: relative;\n\n    width: 28px;\n    height: 28px;\n\n    flex: 0 0 28px;\n\n    border: 1px solid #00a779;\n    border-radius: 50%;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    color: #00a779;\n\n    transition:\n        background-color 0.3s ease,\n        border-color 0.3s ease,\n        color 0.3s ease;\n}\n\n\n\/* =========================================================\n   10. HORIZONTAL LINE\n   ========================================================= *\/\n\n.lavender-accordion-icon::before {\n    content: \"\";\n\n    position: absolute;\n\n    width: 10px;\n    height: 2px;\n\n    background: currentColor;\n\n    border-radius: 2px;\n}\n\n\n\/* =========================================================\n   11. VERTICAL LINE\n   ========================================================= *\/\n\n.lavender-accordion-icon::after {\n    content: \"\";\n\n    position: absolute;\n\n    width: 2px;\n    height: 10px;\n\n    background: currentColor;\n\n    border-radius: 2px;\n\n    transition: transform 0.25s ease;\n}\n\n\n\/* =========================================================\n   12. ACTIVE PLUS\/MINUS ICON\n   ========================================================= *\/\n\n.lavender-accordion-header.active .lavender-accordion-icon {\n    color: #ffffff;\n    border-color: #ffffff;\n}\n\n\n\/* Turn + into - *\/\n\n.lavender-accordion-header.active .lavender-accordion-icon::after {\n    transform: rotate(90deg);\n}\n\n\n\/* =========================================================\n   13. ACCORDION CONTENT\n   ========================================================= *\/\n\n.lavender-accordion-content {\n    max-height: 0;\n    overflow: hidden;\n\n    background: #ffffff;\n\n    transition:\n        max-height 0.35s ease;\n}\n\n\n\/* =========================================================\n   14. OPEN ACCORDION CONTENT\n   ========================================================= *\/\n\n.lavender-accordion-content.active {\n    max-height: 2000px;\n}\n\n\n\/* =========================================================\n   15. CONTENT INNER AREA\n   ========================================================= *\/\n\n.lavender-accordion-inner {\n    padding: 26px 28px 28px;\n    box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   16. INTRODUCTORY TEXT\n   ========================================================= *\/\n\n.lavender-info-text {\n    margin: 0 0 18px;\n\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n\n    color: inherit;\n}\n\n\n\/* =========================================================\n   17. STANDARD BULLET LIST\n   ========================================================= *\/\n\n.lavender-info-list {\n    list-style: none;\n\n    margin: 0;\n    padding: 0;\n}\n\n\n\/* =========================================================\n   18. BULLET LIST TEXT\n   ========================================================= *\/\n\n.lavender-info-list li {\n    position: relative;\n\n    padding: 8px 0 8px 30px;\n\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n\n    color: inherit;\n}\n\n\n\/* =========================================================\n   19. GREEN CHECK ICON\n   ========================================================= *\/\n\n.lavender-info-list li::before {\n    content: \"✓\";\n\n    position: absolute;\n\n    left: 0;\n    top: 9px;\n\n    width: 18px;\n    height: 18px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    background: #00a779;\n    color: #ffffff;\n\n    border-radius: 50%;\n\n    font-size: 11px;\n    font-weight: 700;\n}\n\n\n\/* =========================================================\n   20. DIRECTIONS — NUMBERED STEPS\n   ========================================================= *\/\n\n.lavender-directions-list {\n    list-style: none;\n\n    margin: 0;\n    padding: 0;\n\n    counter-reset: lavender-step;\n}\n\n\n\/* =========================================================\n   21. DIRECTIONS TEXT\n   ========================================================= *\/\n\n.lavender-directions-list li {\n    counter-increment: lavender-step;\n\n    position: relative;\n\n    padding: 10px 0 10px 50px;\n\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n\n    color: inherit;\n}\n\n\n\/* =========================================================\n   22. NUMBER CIRCLE\n   ========================================================= *\/\n\n.lavender-directions-list li::before {\n    content: counter(lavender-step);\n\n    position: absolute;\n\n    left: 0;\n    top: 10px;\n\n    width: 32px;\n    height: 32px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    background: #00a779;\n    color: #ffffff;\n\n    border-radius: 50%;\n\n    font-size: 14px;\n    font-weight: 700;\n}\n\n\n\/* =========================================================\n   23. CAUTION CONTENT BOX\n   ========================================================= *\/\n\n.lavender-caution-content {\n    background: #f3fbf8;\n\n    border-left: 4px solid #00a779;\n\n    padding: 18px 20px;\n\n    border-radius: 6px;\n\n    box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   24. ACTIVE INGREDIENTS TABLE\n   ========================================================= *\/\n\n.lavender-ingredients-table {\n    width: 100%;\n\n    border-collapse: collapse;\n\n    margin-top: 10px;\n\n    border: 1px solid #cce9df;\n\n    border-radius: 8px;\n\n    overflow: hidden;\n}\n\n\n\/* =========================================================\n   25. TABLE HEADER\n   ========================================================= *\/\n\n.lavender-ingredients-table th {\n    padding: 15px 18px;\n\n    text-align: left;\n\n    background: #e4f6f1;\n\n    color: #006b50;\n\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n\n    border-bottom: 1px solid #cce9df;\n}\n\n\n\/* =========================================================\n   26. TABLE CELLS\n   ========================================================= *\/\n\n.lavender-ingredients-table td {\n    padding: 15px 18px;\n\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n\n    color: inherit;\n\n    border-bottom: 1px solid #e5f1ed;\n}\n\n\n.lavender-ingredients-table tr:last-child td {\n    border-bottom: none;\n}\n\n\n\/* =========================================================\n   27. PERCENTAGE COLUMN\n   ========================================================= *\/\n\n.lavender-ingredients-table th:last-child,\n.lavender-ingredients-table td:last-child {\n    text-align: right;\n}\n\n\n\/* =========================================================\n   28. INGREDIENT HIGHLIGHT\n   ========================================================= *\/\n\n.lavender-highlight {\n    margin-top: 18px;\n\n    padding: 14px 18px;\n\n    background: #f0faf7;\n\n    border-left: 4px solid #00a779;\n\n    border-radius: 6px;\n\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n\n    color: inherit;\n\n    box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   29. TABLET RESPONSIVE\n   ========================================================= *\/\n\n@media (max-width: 1024px) {\n\n    .lavender-accordion {\n        padding: 15px 0;\n    }\n\n    .lavender-accordion-header {\n        padding: 18px 20px;\n    }\n\n    .lavender-accordion-inner {\n        padding: 24px 24px 26px;\n    }\n\n}\n\n\n\/* =========================================================\n   30. MOBILE RESPONSIVE\n   ========================================================= *\/\n\n@media (max-width: 767px) {\n\n    .lavender-accordion {\n        padding: 10px 0;\n    }\n\n    .lavender-accordion-item {\n        margin-bottom: 10px;\n        border-radius: 9px;\n    }\n\n\n    .lavender-accordion-header {\n        padding: 16px 17px;\n    }\n\n\n    .lavender-accordion-title {\n        gap: 9px;\n    }\n\n\n    .lavender-title-indicator {\n        width: 7px;\n        height: 7px;\n        flex-basis: 7px;\n    }\n\n\n    .lavender-accordion-icon {\n        width: 25px;\n        height: 25px;\n        flex-basis: 25px;\n    }\n\n\n    .lavender-accordion-icon::before {\n        width: 9px;\n    }\n\n\n    .lavender-accordion-icon::after {\n        height: 9px;\n    }\n\n\n    .lavender-accordion-inner {\n        padding: 20px 17px 22px;\n    }\n\n\n    .lavender-info-list li {\n        padding: 7px 0 7px 27px;\n    }\n\n\n    .lavender-info-list li::before {\n        top: 8px;\n\n        width: 17px;\n        height: 17px;\n    }\n\n\n    .lavender-directions-list li {\n        padding: 8px 0 8px 44px;\n    }\n\n\n    .lavender-directions-list li::before {\n        top: 9px;\n\n        width: 28px;\n        height: 28px;\n    }\n\n\n    .lavender-caution-content {\n        padding: 15px 16px;\n    }\n\n\n    .lavender-ingredients-table th,\n    .lavender-ingredients-table td {\n        padding: 12px 10px;\n    }\n\n\n    .lavender-highlight {\n        padding: 12px 14px;\n    }\n\n}\n\n\n\/* =========================================================\n   31. VERY SMALL MOBILE DEVICES\n   ========================================================= *\/\n\n@media (max-width: 480px) {\n\n    .lavender-accordion-header {\n        padding: 15px 14px;\n    }\n\n\n    .lavender-accordion-inner {\n        padding: 18px 14px 20px;\n    }\n\n\n    .lavender-ingredients-table th,\n    .lavender-ingredients-table td {\n        padding: 10px 8px;\n    }\n\n}\n\n\n\/* =========================================================\n   32. ACCESSIBILITY — REDUCE MOTION\n   ========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .lavender-accordion-content,\n    .lavender-accordion-icon,\n    .lavender-accordion-icon::after,\n    .lavender-accordion-header {\n        transition: none;\n    }\n\n}\n\n\u003c\/style\u003e\n\u003c!-- =========================================================\n     MAIN ACCORDION\n     ========================================================= --\u003e\n\u003cdiv class=\"lavender-accordion\"\u003e\n\u003c!-- =====================================================\n         1. FUNCTION \u0026 INDICATION\n         ===================================================== --\u003e\n\u003cdiv class=\"lavender-accordion-item lavender-item-function\"\u003e\n\u003cbutton type=\"button\" class=\"lavender-accordion-header active\"\u003e \u003cspan class=\"lavender-accordion-title\"\u003e \u003cspan class=\"lavender-title-indicator\"\u003e\u003c\/span\u003e \u003cspan\u003e Function \u0026amp; Indication \u003c\/span\u003e \u003c\/span\u003e \u003cspan class=\"lavender-accordion-icon\"\u003e\u003c\/span\u003e \u003c\/button\u003e\n\u003cdiv class=\"lavender-accordion-content active\"\u003e\n\u003cdiv class=\"lavender-accordion-inner\"\u003e\n\u003cp class=\"lavender-info-text\"\u003eDispel wind and heat, relieve pain, diffuse orifices and activate the mind.\u003c\/p\u003e\n\u003cul class=\"lavender-info-list\"\u003e\n\u003cli\u003eProvide relief from the stuffed-up feeling associated with cold.\u003c\/li\u003e\n\u003cli\u003eRelieve dizziness and headaches.\u003c\/li\u003e\n\u003cli\u003eRelieve muscular pain.\u003c\/li\u003e\n\u003cli\u003eDisperse swelling.\u003c\/li\u003e\n\u003cli\u003eRelieve travel and motion sickness.\u003c\/li\u003e\n\u003cli\u003eStop itching resulted from insect and mosquito bites.\u003c\/li\u003e\n\u003cli\u003eRefreshing.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- =====================================================\n         2. DIRECTIONS\n         ===================================================== --\u003e\n\u003cdiv class=\"lavender-accordion-item lavender-item-directions\"\u003e\n\u003cbutton type=\"button\" class=\"lavender-accordion-header\"\u003e \u003cspan class=\"lavender-accordion-title\"\u003e \u003cspan class=\"lavender-title-indicator\"\u003e\u003c\/span\u003e \u003cspan\u003e Directions \u003c\/span\u003e \u003c\/span\u003e \u003cspan class=\"lavender-accordion-icon\"\u003e\u003c\/span\u003e \u003c\/button\u003e\n\u003cdiv class=\"lavender-accordion-content\"\u003e\n\u003cdiv class=\"lavender-accordion-inner\"\u003e\n\u003col class=\"lavender-directions-list\"\u003e\n\u003cli\u003e\u003cstrong\u003eFor External Application Only\u003c\/strong\u003e\u003c\/li\u003e\n\u003cli\u003eApply on the affected area and massage gently. If necessary, repeat the process every two hours. Consult a Chinese medicine practitioner or seek advice from a doctor before the use of this product by children.\u003c\/li\u003e\n\u003cli\u003eAvoid contact with eyes and mucous membranes when in use.\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- =====================================================\n         3. ACTIVE INGREDIENTS\n         ===================================================== --\u003e\n\u003cdiv class=\"lavender-accordion-item lavender-item-ingredients\"\u003e\n\u003cbutton type=\"button\" class=\"lavender-accordion-header\"\u003e \u003cspan class=\"lavender-accordion-title\"\u003e \u003cspan class=\"lavender-title-indicator\"\u003e\u003c\/span\u003e \u003cspan\u003e Active Ingredients (% w\/w) \u003c\/span\u003e \u003c\/span\u003e \u003cspan class=\"lavender-accordion-icon\"\u003e\u003c\/span\u003e \u003c\/button\u003e\n\u003cdiv class=\"lavender-accordion-content\"\u003e\n\u003cdiv class=\"lavender-accordion-inner\"\u003e\n\u003cp class=\"lavender-info-text\"\u003eHoe Hin White Flower Embrocation, commonly known as Pak Fah Yeow, is a blend of several essential oils including eucalyptus oil and lavender oil, methyl salicylate and menthol. Most ingredients containing natural elements are imported from France, China and Australia, and purchased in compliance with the specifications set forth in British Pharmacopoeia or Chinese Pharmacopoeia.\u003c\/p\u003e\n\u003ctable class=\"lavender-ingredients-table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eActive Ingredient\u003c\/th\u003e\n\u003cth\u003eAmount (% w\/w)\u003c\/th\u003e\n\u003c\/tr\u003e\n\u003c\/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003eMethyl Salicylate\u003c\/td\u003e\n\u003ctd\u003e40%\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eMenthol\u003c\/td\u003e\n\u003ctd\u003e30%\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eEucalyptus Oil\u003c\/td\u003e\n\u003ctd\u003e18%\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eLavender Oil\u003c\/td\u003e\n\u003ctd\u003e6%\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eRacemic Camphor\u003c\/td\u003e\n\u003ctd\u003e6%\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003c\/tbody\u003e\n\u003c\/table\u003e\n\u003cdiv class=\"lavender-highlight\"\u003e\n\u003cstrong\u003eComposition:\u003c\/strong\u003e Methyl Salicylate 40% \/ Menthol 30% \/ Eucalyptus Oil 18% \/ Lavender Oil 6% \/ Racemic Camphor 6%\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- =====================================================\n         4. CAUTION\n         ===================================================== --\u003e\n\u003cdiv class=\"lavender-accordion-item lavender-item-caution\"\u003e\n\u003cbutton type=\"button\" class=\"lavender-accordion-header\"\u003e \u003cspan class=\"lavender-accordion-title\"\u003e \u003cspan class=\"lavender-title-indicator\"\u003e\u003c\/span\u003e \u003cspan\u003e Caution \u003c\/span\u003e \u003c\/span\u003e \u003cspan class=\"lavender-accordion-icon\"\u003e\u003c\/span\u003e \u003c\/button\u003e\n\u003cdiv class=\"lavender-accordion-content\"\u003e\n\u003cdiv class=\"lavender-accordion-inner\"\u003e\n\u003cdiv class=\"lavender-caution-content\"\u003e\n\u003cul class=\"lavender-info-list\"\u003e\n\u003cli\u003eFor external application only.\u003c\/li\u003e\n\u003cli\u003eIf redness, swelling, or pain develops, stop using immediately.\u003c\/li\u003e\n\u003cli\u003eIf symptoms or redness persists, consult a doctor immediately.\u003c\/li\u003e\n\u003cli\u003eNo contact with the eyes or mucous membranes.\u003c\/li\u003e\n\u003cli\u003eIf contact occurs, rinse with cold water.\u003c\/li\u003e\n\u003cli\u003eNot to be used on infants and pregnant women.\u003c\/li\u003e\n\u003cli\u003eAvoid using products containing methyl salicylate on children who have flu, chickenpox or fever.\u003c\/li\u003e\n\u003cli\u003ePeople who are allergic to salicylate acid should consult a Chinese medicine practitioner or a doctor before using this product.\u003c\/li\u003e\n\u003cli\u003eStore at 30 degrees Celsius or below.\u003c\/li\u003e\n\u003cli\u003eKeep out of reach of children.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- =========================================================\n     ACCORDION JAVASCRIPT\n\n     FEATURES:\n     - First accordion starts open\n     - Only one accordion can be open at a time\n     - Clicking another accordion closes the current one\n     - Clicking the open accordion closes it\n     - Updates aria-expanded\n     ========================================================= --\u003e\n\u003cp\u003e \u003c\/p\u003e","brand":"My Store","offers":[{"title":"Default Title","offer_id":48961494024267,"sku":"39656_39654_39656","price":7.0,"currency_code":"USD","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0684\/9010\/0811\/files\/Hoe-Hin-White-Flower-Embrocation---Roll-On-_4.5ml.jpg?v=1790667898","url":"https:\/\/shop.whiteflower.com\/products\/hoe-hin-white-flower-embrocation-roll-on-4-5ml","provider":"White Flower","version":"1.0","type":"link"}