<div data-react-class="Root" data-react-props="{&quot;locale&quot;:null,&quot;states&quot;:[{&quot;id&quot;:1,&quot;name&quot;:&quot;北海道&quot;},{&quot;id&quot;:2,&quot;name&quot;:&quot;青森県&quot;},{&quot;id&quot;:3,&quot;name&quot;:&quot;岩手県&quot;},{&quot;id&quot;:4,&quot;name&quot;:&quot;宮城県&quot;},{&quot;id&quot;:5,&quot;name&quot;:&quot;秋田県&quot;},{&quot;id&quot;:6,&quot;name&quot;:&quot;山形県&quot;},{&quot;id&quot;:7,&quot;name&quot;:&quot;福島県&quot;},{&quot;id&quot;:8,&quot;name&quot;:&quot;茨城県&quot;},{&quot;id&quot;:9,&quot;name&quot;:&quot;栃木県&quot;},{&quot;id&quot;:10,&quot;name&quot;:&quot;群馬県&quot;},{&quot;id&quot;:11,&quot;name&quot;:&quot;埼玉県&quot;},{&quot;id&quot;:12,&quot;name&quot;:&quot;千葉県&quot;},{&quot;id&quot;:13,&quot;name&quot;:&quot;東京都&quot;},{&quot;id&quot;:14,&quot;name&quot;:&quot;神奈川県&quot;},{&quot;id&quot;:15,&quot;name&quot;:&quot;新潟県&quot;},{&quot;id&quot;:16,&quot;name&quot;:&quot;富山県&quot;},{&quot;id&quot;:17,&quot;name&quot;:&quot;石川県&quot;},{&quot;id&quot;:18,&quot;name&quot;:&quot;福井県&quot;},{&quot;id&quot;:19,&quot;name&quot;:&quot;山梨県&quot;},{&quot;id&quot;:20,&quot;name&quot;:&quot;長野県&quot;},{&quot;id&quot;:21,&quot;name&quot;:&quot;岐阜県&quot;},{&quot;id&quot;:22,&quot;name&quot;:&quot;静岡県&quot;},{&quot;id&quot;:23,&quot;name&quot;:&quot;愛知県&quot;},{&quot;id&quot;:24,&quot;name&quot;:&quot;三重県&quot;},{&quot;id&quot;:25,&quot;name&quot;:&quot;滋賀県&quot;},{&quot;id&quot;:26,&quot;name&quot;:&quot;京都府&quot;},{&quot;id&quot;:27,&quot;name&quot;:&quot;大阪府&quot;},{&quot;id&quot;:28,&quot;name&quot;:&quot;兵庫県&quot;},{&quot;id&quot;:29,&quot;name&quot;:&quot;奈良県&quot;},{&quot;id&quot;:30,&quot;name&quot;:&quot;和歌山県&quot;},{&quot;id&quot;:31,&quot;name&quot;:&quot;鳥取県&quot;},{&quot;id&quot;:32,&quot;name&quot;:&quot;島根県&quot;},{&quot;id&quot;:33,&quot;name&quot;:&quot;岡山県&quot;},{&quot;id&quot;:34,&quot;name&quot;:&quot;広島県&quot;},{&quot;id&quot;:35,&quot;name&quot;:&quot;山口県&quot;},{&quot;id&quot;:36,&quot;name&quot;:&quot;徳島県&quot;},{&quot;id&quot;:37,&quot;name&quot;:&quot;香川県&quot;},{&quot;id&quot;:38,&quot;name&quot;:&quot;愛媛県&quot;},{&quot;id&quot;:39,&quot;name&quot;:&quot;高知県&quot;},{&quot;id&quot;:40,&quot;name&quot;:&quot;福岡県&quot;},{&quot;id&quot;:41,&quot;name&quot;:&quot;佐賀県&quot;},{&quot;id&quot;:42,&quot;name&quot;:&quot;長崎県&quot;},{&quot;id&quot;:43,&quot;name&quot;:&quot;熊本県&quot;},{&quot;id&quot;:44,&quot;name&quot;:&quot;大分県&quot;},{&quot;id&quot;:45,&quot;name&quot;:&quot;宮崎県&quot;},{&quot;id&quot;:46,&quot;name&quot;:&quot;鹿児島県&quot;},{&quot;id&quot;:47,&quot;name&quot;:&quot;沖縄県&quot;}],&quot;job_shops&quot;:[{&quot;id&quot;:1,&quot;name&quot;:&quot;会社員/役員&quot;},{&quot;id&quot;:2,&quot;name&quot;:&quot;自営業&quot;},{&quot;id&quot;:3,&quot;name&quot;:&quot;専門職&quot;},{&quot;id&quot;:4,&quot;name&quot;:&quot;公務員&quot;},{&quot;id&quot;:5,&quot;name&quot;:&quot;学生&quot;},{&quot;id&quot;:6,&quot;name&quot;:&quot;専業主婦/専業主夫&quot;},{&quot;id&quot;:7,&quot;name&quot;:&quot;パート/アルバイト/フリーター&quot;},{&quot;id&quot;:8,&quot;name&quot;:&quot;無職/定年退職&quot;},{&quot;id&quot;:9,&quot;name&quot;:&quot;その他&quot;}],&quot;current_user&quot;:null,&quot;gender_shops&quot;:[{&quot;id&quot;:1,&quot;name&quot;:&quot;男性&quot;},{&quot;id&quot;:2,&quot;name&quot;:&quot;女性&quot;}],&quot;cart_items&quot;:{},&quot;merchandise_categories&quot;:[{&quot;id&quot;:1,&quot;name&quot;:&quot;BASE CARE&quot;},{&quot;id&quot;:2,&quot;name&quot;:&quot;DAILY CARE&quot;},{&quot;id&quot;:3,&quot;name&quot;:&quot;SPECIAL CARE&quot;},{&quot;id&quot;:4,&quot;name&quot;:&quot;MAKE UP CARE&quot;}],&quot;contact_categories&quot;:[{&quot;id&quot;:5,&quot;name&quot;:&quot;商品について&quot;},{&quot;id&quot;:6,&quot;name&quot;:&quot;ご購入について&quot;},{&quot;id&quot;:7,&quot;name&quot;:&quot;ALICE BELLについて&quot;},{&quot;id&quot;:8,&quot;name&quot;:&quot;その他&quot;}],&quot;input_field_config&quot;:{&quot;id&quot;:1,&quot;shop_id&quot;:1,&quot;user_kana&quot;:3,&quot;user_corporate_name&quot;:5,&quot;user_department&quot;:5,&quot;user_sub_tel&quot;:5,&quot;user_gender&quot;:5,&quot;user_birthday&quot;:3,&quot;user_job&quot;:5,&quot;created_at&quot;:&quot;2024-05-01T21:38:44.785+09:00&quot;,&quot;updated_at&quot;:&quot;2024-07-08T11:33:23.891+09:00&quot;,&quot;subscribe_mailmagazine&quot;:3,&quot;user_sub_email&quot;:5,&quot;subscribe_dm&quot;:5,&quot;default_user_birthday&quot;:null},&quot;current_shop&quot;:{&quot;copyright&quot;:&quot;&quot;,&quot;is_using_credit_card_payment&quot;:true,&quot;logo_url&quot;:&quot;/832f17ba-0bf3-40aa-b739-fa0f4c0740ad/uploads/images/design_config_image/file/3/site-logo.png&quot;,&quot;credit_card_image_url&quot;:&quot;&quot;,&quot;title&quot;:&quot;ALLICE BELLE公式オンラインストア&quot;,&quot;continue_shopping_url&quot;:&quot;&quot;,&quot;terms&quot;:&quot;1．個人情報の利用目的について\r\n当社は、ご登録いただいた個人情報を、以下の目的に限り利用いたします。\r\n  1．商品の発送、商品代金の決済、カタログやDMの送付、関連するアフターサービス、及びこれらの遂行に必要なご連絡のため\r\n  2．新商品・サービスに関する情報のお知らせのため\r\n  3．マーケティングおよび販売促進、商品企画のための統計データ作成のため\r\n  4．ご登録内容の開示、変更、追加、削除の際の本人確認のため\r\n\r\n2．個人情報の提供について\r\nご登録いただいた個人情報は、ご本人の承諾なく第三者に提供することはございません。ただし、次の場合に限り、個人情報を提供することがあります。\r\n  1．裁判所や警察等の公的機関から、法律に基づく正式な照会を受けた場合\r\n  2．人の生命、身体および財産等に対する差し迫った危険があり、緊急の必要性がある場合\r\n\r\n3．個人情報の委託について\r\n当社は、商品の発送、及びカタログやDMの送付など、通信販売事業を運営する上で必要となる個人情報を委託先などへ委託・提供する場合がございます。\r\nただし、目的の範囲を超え、個人情報を使用させることはありません。\r\n\r\n4．個人情報の収集について\r\n当社への情報のご提供はすべて任意となっております。ただし、依頼する情報をご提供いただけない場合は、正常なサービスをご提供できない場合があります。\r\n\r\n5．個人情報に関するお問い合わせについて\r\n個人情報の開示、変更、追加、削除、利用および提供の拒否については、以下問い合わせ先までご一報ください。 その際、ご登録いただいた情報をもとに、本人確認をさせていただきます。\r\n\r\n6．クッキーの使用について\r\n当社のサイト上では、WEBブラウザを通じて、お客様のコンピュータにクッキー（Cookie）という情報を送り通信を管理することが有ります。 お客様ごとに画面の遷移を維持したり、当サイトでお買い物などの操作をして頂く為に必要なものです。なお、Cookieを無効に設定されますと、当サイトのサービスを正常にご利用いただくことができませんので、予めご了承ください。\r\n\r\n7．ログについて\r\nお客様が当社ウェブサイトをアクセスされたことについて、その操作の情報をアクセスログという形で記録しています。このログは個人を特定できる情報を含むものではありませんが、今後のサイトの利便性向上のためや、万一問題が発生した際の原因追及、利用状況に関する統計・分析処理などに使用するために採取をしており、それ以外の目的には使用いたしません。\r\n\r\n8．リンク先に関する免責について\r\n当サイトでは、ユーザーのプライバシーを保護するための最大限の努力をすることを約束いたします。\r\nただし、当社のサイト上にあるリンク先の、第三者企業においては、当サイトの責任範囲外となり、その第三者企業が設定するプライバシーポリシーに準じることとなります。\r\n\r\n9．SSLの使用について\r\n当社サイトでは、会員登録および、資料請求情報の入力、アンケート回答の際など、個人情報が送受信されるページにおいて、 SSL（Secure Socket Layer）による暗号化通信を使用し、お客様の個人情報を外部の第三者が通信傍受できないよう対策を行っています。\r\n&quot;,&quot;term_label&quot;:&quot;&quot;,&quot;is_using_gmo&quot;:false,&quot;is_using_zeus&quot;:true,&quot;is_using_yamato&quot;:false,&quot;is_using_gmo_ep&quot;:false,&quot;is_using_smbc_gmo&quot;:false,&quot;is_using_sb_payment&quot;:false,&quot;is_show_security_code&quot;:true,&quot;site_domain&quot;:&quot;alice-belle.com&quot;,&quot;standarized_cart_domain&quot;:&quot;https://alice-belle.com&quot;,&quot;is_close&quot;:false,&quot;is_required_member_registration&quot;:true,&quot;name&quot;:&quot;ALICE BELLE&quot;,&quot;amazon_client_id&quot;:&quot;0000&quot;,&quot;amazon_merchant_id&quot;:&quot;0000&quot;,&quot;amazon_sandbox&quot;:false,&quot;is_used_pay_pay_sandbox&quot;:false,&quot;is_cookie_overwrite&quot;:true,&quot;cookie_keeping_days&quot;:14,&quot;is_used_merchandise_position&quot;:false,&quot;is_use_mail_registration&quot;:false,&quot;gmo_shop_id&quot;:null,&quot;gmo_ep_credit_contract_code&quot;:null,&quot;smbc_gmo_shop_id&quot;:null,&quot;sb_payment_merchant_id&quot;:null,&quot;sb_payment_service_id&quot;:null,&quot;zeus_ip_code&quot;:&quot;2012016449&quot;,&quot;yamato_financial_shop_id&quot;:null,&quot;yamato_financial_auth_method_code&quot;:null,&quot;yamato_financial_option_service_code&quot;:null,&quot;yamato_financial_default_checksum&quot;:null,&quot;can_installment_payment&quot;:false,&quot;use_point&quot;:false,&quot;continuously_point&quot;:&quot;display_off&quot;,&quot;default_continuously_point&quot;:&quot;point_off&quot;,&quot;is_used_multi_languages&quot;:false,&quot;is_use_amazon&quot;:false,&quot;social_config&quot;:{&quot;is_use_amazon&quot;:false,&quot;amazon_button_color_kind&quot;:&quot;gold&quot;,&quot;is_use_facebook&quot;:false,&quot;facebook_app_id&quot;:null,&quot;is_used_rakuten&quot;:false,&quot;rakuten_app_id&quot;:null,&quot;rakuten_button_color_kind&quot;:&quot;red&quot;,&quot;is_use_line&quot;:false,&quot;line_channel_id&quot;:null,&quot;line_login_callback_uri&quot;:&quot;https://alice-belle.com/callback/line_apis/authorize&quot;,&quot;line_save_info_callback_uri&quot;:&quot;https://alice-belle.com/callback/line_apis/generate&quot;,&quot;is_use_line_login_friend&quot;:false,&quot;amazon_login_api_vertion&quot;:&quot;version_2&quot;},&quot;is_used_rank&quot;:false,&quot;rank_up_period&quot;:{&quot;id&quot;:1,&quot;rank_config_id&quot;:1,&quot;calculation_timing_kind&quot;:&quot;monthly&quot;,&quot;aggregate_timing_kind&quot;:&quot;absolute_month&quot;,&quot;calculation_timing_value&quot;:[],&quot;aggregate_timing_value&quot;:3,&quot;latest_calculated_date&quot;:null,&quot;created_at&quot;:&quot;2024-05-01T21:38:45.926+09:00&quot;,&quot;updated_at&quot;:&quot;2025-06-06T15:59:47.346+09:00&quot;},&quot;is_use_social_login&quot;:false,&quot;is_used_create_order_mail&quot;:true,&quot;additional_customer_forms&quot;:[],&quot;is_course_order_pausable&quot;:true,&quot;alt_text_for_course_order_pause_button&quot;:&quot;&quot;,&quot;days_for_changeable_order_in_my_account&quot;:1,&quot;is_display_pause_course_order_desc&quot;:false,&quot;pause_course_order_desc&quot;:&quot;&quot;,&quot;is_course_order_resumable&quot;:true,&quot;alt_text_for_course_order_resume_button&quot;:&quot;&quot;,&quot;line_qr_code_image_url&quot;:null,&quot;is_order_cancelable&quot;:true,&quot;alt_text_for_order_cancel_button&quot;:&quot;&quot;,&quot;is_user_deletable_from_frontend&quot;:true,&quot;is_used_first_time_frequency_for_numeration_distribution_course&quot;:true,&quot;is_displayed_shipping_address&quot;:true,&quot;is_displayed_billing_address&quot;:true,&quot;is_displayed_sender_address&quot;:true,&quot;is_use_review&quot;:true,&quot;review_postable_purchaser_kind&quot;:&quot;online_purchase_user&quot;,&quot;is_use_normal_login_form&quot;:true,&quot;is_use_export_frontend_bill&quot;:true,&quot;money_calculator_config&quot;:{&quot;displayed_price_kind&quot;:&quot;suffix_is_label&quot;},&quot;is_use_red_shield&quot;:false,&quot;is_use_check_agree_privacy_policy&quot;:true,&quot;red_shield_js_src&quot;:&quot;https://ci-mpsnare.iovation.com/snare.js&quot;,&quot;paidy_public_key&quot;:&quot;0000&quot;,&quot;confirm_page_free_text&quot;:&quot;&quot;,&quot;confirm_page_free_text_for_product&quot;:&quot;&quot;,&quot;is_show_yakkan&quot;:false,&quot;is_change_settlement_in_my_account&quot;:true,&quot;is_removeable_course_order_items_in_my_account&quot;:false,&quot;yakkan&quot;:&quot;&quot;,&quot;is_displayed_course_order_plan&quot;:true,&quot;course_order_plan_add_new_item_image&quot;:null,&quot;course_order_plan_order_item_render_kind&quot;:&quot;detail_by_quantity_and_variant&quot;,&quot;auto_switch_course_order_credit_card_message&quot;:&quot;&quot;,&quot;is_auto_switch_course_order_credit_card&quot;:false,&quot;is_yamato_financial_deferred_using_other_company&quot;:true,&quot;is_display_requestmemo&quot;:true,&quot;shop_set_name_requestmemo&quot;:&quot;備考　【ご紹介用コードをお持ちの方はこちらに記載ください。】&quot;,&quot;text_can_not_accessible&quot;:&quot;現在取り扱われておりません&quot;,&quot;custom_button_images&quot;:{&quot;add_to_cart&quot;:null,&quot;go_to_checkout&quot;:null,&quot;go_to_confirm&quot;:null,&quot;decide_order&quot;:null},&quot;explain_next_scheduled_shipped_on&quot;:&quot;２回目のお届け日は初回お届け日より＠First frequency＠になります。\r\n※お届け日が指定できない配送方法の場合、お届け日は前後する可能性がございます。\r\n以降の頻度は下記よりご選択ください。\r\n&quot;,&quot;discount_amount_calculation_kind&quot;:&quot;exclude_discount_amount&quot;,&quot;is_change_item_quantity_on_confirm&quot;:true,&quot;is_vefiry_recaptcha_screens&quot;:{&quot;is_use_register_user&quot;:true,&quot;is_use_credit&quot;:true,&quot;is_use_contact&quot;:true,&quot;query_string&quot;:&quot;qualva&quot;},&quot;google_recaptcha_sitekey&quot;:&quot;6Le3nxIqAAAAALlFm3kDsokvFhFtfZiWjvr6WPCN&quot;,&quot;is_use_order_complete_cross_sell&quot;:true,&quot;is_use_order_complete_up_sell&quot;:true,&quot;is_displayed_leave_modals&quot;:false,&quot;leave_modal_cart&quot;:null,&quot;leave_modal_cart_image_url&quot;:null,&quot;leave_modal_register&quot;:null,&quot;leave_modal_register_image_url&quot;:null,&quot;leave_modal_confirm&quot;:null,&quot;leave_modal_confirm_image_url&quot;:null,&quot;active_web_sockets&quot;:[],&quot;is_allow_bundle&quot;:true,&quot;is_allow_auto_bundle&quot;:false,&quot;comparison_with_reference_price_kind&quot;:&quot;after_discount_price&quot;,&quot;is_user_sms_availability_decision&quot;:false,&quot;is_use_sms_send_mail&quot;:false,&quot;is_use_abandoned_cart_mail&quot;:false,&quot;is_use_payment_system&quot;:false,&quot;payment_system_api_key&quot;:&quot;454807fd-3b81-4497-ae4f-6e4225038801&quot;,&quot;payment_system_api_secret&quot;:&quot;7033a402-68dc-4b49-9a0c-82e2cdd05810&quot;,&quot;is_confirm_page_free_text_displayed_in_full&quot;:false,&quot;is_yakkan_displayed_in_full&quot;:false,&quot;payment_system_environment&quot;:&quot;production&quot;,&quot;is_use_rakuten_v2&quot;:true,&quot;amazon_v2_shipment_address_update_note&quot;:&quot;※AmazonPayでお支払いただいている注文のお届け先は変更されないため、個別にご変更ください。&quot;,&quot;user_update_caution&quot;:&quot;※上記チェックを入れた場合、変更前と完全一致する住所のみが変更されます。更新後、定期注文の住所をご確認ください。&quot;},&quot;design_config&quot;:{&quot;link_after_login&quot;:&quot;https://alice-belle.com/user&quot;,&quot;is_have_link_not_found&quot;:false,&quot;link_not_found&quot;:&quot;&quot;,&quot;is_displayed_remain_amount_for_free_shipping&quot;:true},&quot;payment_config&quot;:{&quot;is_gmo_credit_card_auto_update&quot;:false,&quot;amazon_button_color_kind&quot;:null,&quot;rakuten_button_color_kind&quot;:null,&quot;paidy_public_key&quot;:&quot;0000&quot;,&quot;paidy_logo&quot;:null,&quot;amazon_v2_merchant_id&quot;:&quot;A2NE8A932U7LNH&quot;,&quot;amazon_v2_sp_public_key_id&quot;:&quot;AFKEXCR4ADHTVNHYSPXZT2EM&quot;,&quot;amazon_v2_client_id&quot;:&quot;amzn1.application-oa2-client.09d7c34358dd485f8b38c0c6d431549f&quot;,&quot;is_use_amazon_v2_sandbox&quot;:false,&quot;amazon_v2_auth_token&quot;:&quot;eyJhbGciOiJIbWFjU0hBMjU2IiwidHlwIjoiSldUIn0=.eyJhdWQiOlsiQW1hem9uUGF5Il0sImV4cCI6MTc2OTc2MDI5ODA0OCwiaWF0IjoxNzM4NjU2Mjk4MDQ4LCJpc3MiOiJBbWF6b25QYXkiLCJqdGkiOiJhbXpuLjEuMGM5MzUyMDUtMWM2NS00MDk2LTljMDgtNjI2YTBiOTk2NTFjIiwicGlkIjoiQUdPUEdTWEJQSlZTNFdZVTYzNlJaSTY0SEoyUSIsInNjb3BlcyI6WyIqIl0sInN1YiI6WyJBRlUzNFo1RUNUWVpETkQzS0NTSVZJREVXT0hRIl19.j0UvVw2RTykvpMDLUj8Io2dvLa0-f8RrlF9BmKNdDr0=&quot;,&quot;amazon_v2_product_signature&quot;:&quot;Ak6GxjBlosfXdHyCYzHBIsB5OIQZi7EO/1LVLFR0Cx1qe71FkZfgm5lD+xTzq8ReFlIeTBI3Jtx1X8mbc4cU9oQzhCGGU7EzWNR6RAOB4zV3MyelowtYnHOH4/rzZYI4GHZaZUSr/RrkIX0ezcGk4YlHWCOTPZ21q8bG7WRXyBD15Y54NqU2S8Cxyn/2cq57DxphCrYBfnUHHULis0udpzZuSsmBHs2SC9PMLz2K5i3k96Pdw5gZWiUayywZKg4/fsgkyXkUBpEnSOaScVaVBK7v6hd9opk+/cX2+QH6eWmrpY9O1dwCm8VW7k5A7Mfn0FQKjmwazfa+k/Hkz7dQTw==&quot;,&quot;amazon_v2_course_signature&quot;:&quot;QthGUmwOU9ZzC9HsiV8MVj4Gz4+TRIVlhWSIrIPMiRuAI4kmQQZBTsi4xPRox5MCbaEUFRxME+WUs3FGIPNBPfmaqMvwHhgIrKh7KleBwteDP//EnkyE265QJg2C7WYj+2SEe5BC3IIvI8p5idYelNEl/UgMTD9OeJLTUOzKvovbPDc8dh4BPwHbPVDOj6TZiNgksNCBQfzI61sWWVdvb4+H2Ta77vsPiNbOMqIbmEDZiDHMvsFd+m/vRgF194JTy5MYzSUyVbbvG9zgoLMFnJSYFZqZWP7Dr6FwtvXJ5QTjQzCM1NcWNceyShYA8LwcG+tzJKipurUvshL1Sd/I2g==&quot;,&quot;amazon_v2_login_signature&quot;:&quot;dL7Czn9YN8gzRck9WvB+gltYtJlHy05JItK/sDNDOdKgDtlzU2c1earaOckJEPRDFiYbfvtm/PeLSU871Rlk0wgS9UF2PIIr9VrCvIVmZUuGwMYVNAWHFl+zxpOIo5fAwbjuEmP+cw5TyZNZeaFito4byuJfK2bX8FCk5bIQ8wTQMwhZYfeNMsRLS1FK+3L4I5rMgzFNKiKcthd5+/5uoJk6stGQxPtDPGjBEZZZobtucaoQRIl6ZY+y8yRLN2vhnZqVeJvBSDQvxoYFH86FEXV3mso0g9DsXigWofLnoTSwt5jJiNeYSL2+Lo3GJ1ANCotnHfTh57dceHOJ03dZBA==&quot;,&quot;amazon_v2_register_login_signature&quot;:&quot;lUHo0v6U8ka2rMRDBtulMqz5PPsuEDH0VjPDbXPwE5wH9tjzjwNCM1GwW35xxyi6l1KWNuQ0IusMk1oXq4vSXpVyE8B2/tH9IwPdDTgJqDSgGlmjMZIjqu/zzf9C9x1pdUQuDAfbTfubzG5v8HfGO1KSqhTQ1HJ8RZb/aa5ovQUOQkrVQWVAsJacXPDmKMeT2+ykpZD0usUMDFuauVVVDiWYs5SskF9LXFbbOEVG3tZ2G+gzPb5CnWyFwdj32oN4WRfB6AUvVfpPg8dRa9K1d+OPqjXAHfoSe/HN5SPTo+Vrot5kPcvD9ioQNVl+dI760hKzcMufUrGLmihOJbU9Aw==&quot;,&quot;amazon_v2_edit_signature&quot;:&quot;tntBAS2X6hC+OgI66REx7iMq6L8NnPY0Hvqi6U5cV8pGDARMo1Ng2aRrjIk81D5i6HpiH+zMV+f3CbZ+TdbFx96p+F7NptWGZ9h6au0DDlTm6YEgbuE4R52ZL5VxS5zT5DUpPsovP4oLIflJsg7RRcIKhe1kz9uYNWeP/aomNI6guVqrJ6so4JBP63o27LmJPPOxLxV715G99QzjfVbSyq6+ysfHEZlWTHCzL0+9rInTPKIMKEb3qbksH/hcWdvJphTNXoGGTLP2X9TfCo6aEzTxe6AtMEnQIAq0tIKhzGKjiRSiykYQz5kT7QOOz9FLTLdv0F+I9nO+R6jyeDHTXw==&quot;,&quot;gmo_using3_d_secure&quot;:false,&quot;zeus_using3_d_secure&quot;:true,&quot;is_use_payment_system&quot;:false,&quot;skip_tds_accept_user_agent&quot;:&quot;&quot;},&quot;layout_components&quot;:[{&quot;slug&quot;:&quot;cart&quot;,&quot;title&quot;:&quot;カート画面&quot;,&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;user&quot;,&quot;title&quot;:&quot;マイアカウントトップ&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;checkout/complete&quot;,&quot;title&quot;:&quot;購入完了画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;checkout/confirm&quot;,&quot;title&quot;:&quot;購入確認画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;checkout/register&quot;,&quot;title&quot;:&quot;注文情報入力画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;merchandises&quot;,&quot;title&quot;:&quot;すべての商品&quot;,&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;addHeader&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  .section-title-block{\r\n    height:86px;\r\n    width:100%;\r\n    background-color:#E3DAD2;\r\n    line-height:84px;\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n    font-size:20px;\r\n    font-weight:500;\r\n    text-align:center;\r\n  }\r\n\u003c/style\u003e\r\n\r\n  \r\n\u003cdiv class=\&quot;section-title-block\&quot;\u003e\r\n    \u003cp\u003eLINE UP\u003c/p\u003e\r\n\u003c/div\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;section-title-block&quot;},&quot;content&quot;:&quot;\r\n    &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  .section-title-block{\r\n    height:86px;\r\n    width:100%;\r\n    background-color:#E3DAD2;\r\n    line-height:84px;\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n    font-size:20px;\r\n    font-weight:500;\r\n    text-align:center;\r\n  }\r\n\u003c/style\u003e\r\n\r\n  \r\n\u003cdiv class=\&quot;section-title-block\&quot;\u003e\r\n    \u003cp\u003eLINE UP\u003c/p\u003e\r\n\u003c/div\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;section-title-block&quot;},&quot;content&quot;:&quot;\r\n    &quot;}]}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}},&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}}},{&quot;slug&quot;:&quot;contacts/new&quot;,&quot;title&quot;:&quot;お問い合わせ入力画面&quot;,&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}},&quot;addHeader&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  .section-title-block{\r\n    height:86px;\r\n    width:100%;\r\n    background-color:#E3DAD2;\r\n    line-height:84px;\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n    font-size:20px;\r\n    font-weight:500;\r\n    text-align:center;\r\n  }\r\n\u003c/style\u003e\r\n\r\n  \r\n\u003cdiv class=\&quot;section-title-block\&quot;\u003e\r\n    \u003cp\u003eお問い合わせ\u003c/p\u003e\r\n\u003c/div\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;section-title-block&quot;},&quot;content&quot;:&quot;\r\n    &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  .section-title-block{\r\n    height:86px;\r\n    width:100%;\r\n    background-color:#E3DAD2;\r\n    line-height:84px;\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n    font-size:20px;\r\n    font-weight:500;\r\n    text-align:center;\r\n  }\r\n\u003c/style\u003e\r\n\r\n  \r\n\u003cdiv class=\&quot;section-title-block\&quot;\u003e\r\n    \u003cp\u003eお問い合わせ\u003c/p\u003e\r\n\u003c/div\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;section-title-block&quot;},&quot;content&quot;:&quot;\r\n    &quot;}]}},&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}}},{&quot;slug&quot;:&quot;contacts/confirm&quot;,&quot;title&quot;:&quot;お問い合わせ確認画面&quot;,&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}},&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  .section-title-block{\r\n    height:86px;\r\n    width:100%;\r\n    background-color:#E3DAD2;\r\n    line-height:84px;\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n    font-size:20px;\r\n    font-weight:500;\r\n    text-align:center;\r\n  }\r\n\u003c/style\u003e\r\n\r\n  \r\n\u003cdiv class=\&quot;section-title-block\&quot;\u003e\r\n    \u003cp\u003eお問い合わせ\u003c/p\u003e\r\n\u003c/div\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;section-title-block&quot;},&quot;content&quot;:&quot;\r\n    &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  .section-title-block{\r\n    height:86px;\r\n    width:100%;\r\n    background-color:#E3DAD2;\r\n    line-height:84px;\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n    font-size:20px;\r\n    font-weight:500;\r\n    text-align:center;\r\n  }\r\n\u003c/style\u003e\r\n\r\n  \r\n\u003cdiv class=\&quot;section-title-block\&quot;\u003e\r\n    \u003cp\u003eお問い合わせ\u003c/p\u003e\r\n\u003c/div\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;section-title-block&quot;},&quot;content&quot;:&quot;\r\n    &quot;}]}}},{&quot;slug&quot;:&quot;contacts/complete&quot;,&quot;title&quot;:&quot;お問い合わせ完了画面&quot;,&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}},&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  .section-title-block{\r\n    height:86px;\r\n    width:100%;\r\n    background-color:#E3DAD2;\r\n    line-height:84px;\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n    font-size:20px;\r\n    font-weight:500;\r\n    text-align:center;\r\n  }\r\n\u003c/style\u003e\r\n\r\n  \r\n\u003cdiv class=\&quot;section-title-block\&quot;\u003e\r\n    \u003cp\u003eお問い合わせ\u003c/p\u003e\r\n\u003c/div\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;section-title-block&quot;},&quot;content&quot;:&quot;\r\n    &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  .section-title-block{\r\n    height:86px;\r\n    width:100%;\r\n    background-color:#E3DAD2;\r\n    line-height:84px;\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n    font-size:20px;\r\n    font-weight:500;\r\n    text-align:center;\r\n  }\r\n\u003c/style\u003e\r\n\r\n  \r\n\u003cdiv class=\&quot;section-title-block\&quot;\u003e\r\n    \u003cp\u003eお問い合わせ\u003c/p\u003e\r\n\u003c/div\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;section-title-block&quot;},&quot;content&quot;:&quot;\r\n    &quot;}]}}},{&quot;slug&quot;:&quot;user/orders&quot;,&quot;title&quot;:&quot;マイアカウント注文履歴画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;user/course_orders&quot;,&quot;title&quot;:&quot;マイアカウント定期注文履歴画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;user/edit&quot;,&quot;title&quot;:&quot;登録情報編集画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;user/password&quot;,&quot;title&quot;:&quot;パスワード変更画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;user/user_addresses&quot;,&quot;title&quot;:&quot;アドレス帳画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;favorites&quot;,&quot;title&quot;:&quot;お気に入り画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;products&quot;,&quot;title&quot;:&quot;通常商品詳細画面&quot;,&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}},&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}}},{&quot;slug&quot;:&quot;regular_courses&quot;,&quot;title&quot;:&quot;コース商品詳細画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;distribution_courses&quot;,&quot;title&quot;:&quot;頒布会商品詳細画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;sign_in&quot;,&quot;title&quot;:&quot;マイアカウントログイン画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;reviews/new&quot;,&quot;title&quot;:&quot;レビュー投稿入力画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;reviews/confirm&quot;,&quot;title&quot;:&quot;レビュー投稿確認画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;reviews/complete&quot;,&quot;title&quot;:&quot;レビュー投稿完了画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;secret_merchandises&quot;,&quot;title&quot;:&quot;シークレット商品一覧&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;user/opt_out&quot;,&quot;title&quot;:&quot;オプトアウト画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;checkout/landing_page_confirm&quot;,&quot;title&quot;:&quot;LP購入確認画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;user/coupons&quot;,&quot;title&quot;:&quot;マイアカウントクーポン画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;password/new&quot;,&quot;title&quot;:&quot;パスワード再発行画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}}},{&quot;slug&quot;:&quot;checkout/complete/upsell&quot;,&quot;title&quot;:&quot;購入完了アップセル成功画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;checkout/complete/crosssell&quot;,&quot;title&quot;:&quot;購入完了クロスセル成功画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;user_register_mail_address&quot;,&quot;title&quot;:&quot;メールアドレス登録&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;defaultFooter&quot;:{&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:450px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:450px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]},&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;\u003cstyle\u003e\r\n  \r\n  body{\r\n    font-family: &#39;游明朝&#39;,&#39;Yu Mincho&#39;,YuMincho,&#39;Hiragino Mincho Pro&#39;,serif;\r\n   }\r\n  \r\n    .wrapper-content{\r\n      background-color:#fff;\r\n    }\r\n  \r\n\r\n  \r\n    /***** PRODUCT DITAIL *****/\r\n  \r\n  .product {\r\n  max-width: 1140px;\r\n  margin: 0 auto!important;\r\n}\r\n\r\n.product .product__title {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product__title h1 {\r\n  font-size: 2.5rem;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.product .product-name-eng {\r\n  position: relative;\r\n  margin: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product .product-name-eng span {\r\n  padding-bottom: 2px;\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.product .product-name-eng span:after {\r\n  content: \&quot;\&quot;;\r\n  display: inline-block;\r\n  margin-left: 10px;\r\n  border-top: 1px solid rgba(114, 113, 113, .25);\r\n  border-bottom: 1px solid rgba(114, 113, 113, .25);\r\n  width: 100%;\r\n  vertical-align: middle;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.product .desc {\r\n  font-size: 1.5rem;\r\n  line-height: 1.8rem;\r\n}\r\n\r\n.another_product_information {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n  font-size: 1.4rem;\r\n  line-height: 2rem;\r\n}\r\n\r\n.product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n  padding: 0 0 0 3rem;\r\n}\r\n\r\n.product .price__container span.tax_text {\r\n  font-size: 1rem;\r\n}\r\n\r\n.product .price-wrapper {\r\n  margin: 1rem 0 1rem;\r\n}\r\n\r\n.product .product-form__quantity .form__label,\r\n.product .product-form__quantity .price-per-item__container {\r\n  display: inline-block;\r\n}\r\n\r\n.product .product-form__quantity .form__label {\r\n  margin: 0 0.6rem 0 0;\r\n}\r\n\r\n.product .product-form__quantity .price-per-item__container input {\r\n  padding: 1rem;\r\n  min-height: auto;\r\n}\r\n\r\n\r\n.product .caution {\r\n  background-color: #e9e1db;\r\n  padding: 1rem 2rem 1rem 3.4rem;\r\n  line-height: 2rem;\r\n  border-radius: 3px;\r\n  text-indent: -1.7rem;\r\n  word-break: break-all;\r\n}\r\n\r\n\r\n.shopify-payment-button__more-options {\r\n  color: #FFF;\r\n  background: #fff1f1;\r\n  padding: 1rem 0;\r\n  margin: 0!important;\r\n  text-decoration: none;\r\n  font-size: unset;\r\n}\r\n\r\n\r\n\r\n/* detail page */\r\n.product__description .desc .main-ingredients-title {\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  background-color: #DDD;\r\n  margin: 1em 0;\r\n}\r\n\r\n.product__description .desc .main-ingredients-wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .justify-content-evenly {\r\n  justify-content: space-evenly !important;\r\n}\r\n\r\n.product__description .desc .main-ingredients {\r\n  display: inline-block;\r\n  font-size: .75em;\r\n  width: 110px;\r\n  text-align: center;\r\n}\r\n\r\n.product__description .desc .text-right {\r\n  padding: 0;\r\n  text-align: right !important;\r\n}\r\n.product__description .desc small {\r\n  font-size: 0.75em;\r\n}\r\n\r\n\r\n.product__description .desc .main-ingredients\u003ediv {\r\n  display: block;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  width: 75px;\r\n  height: 75px;\r\n  margin: 0 auto;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.product__description .desc .main-ingredients div.arnica {\r\n  background-image: url(/cdn/img/arnica.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ayurveda {\r\n  background-image: url(/cdn/img/ayurveda.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.bentonite {\r\n  background-image: url(/cdn/img/bentonite.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.ceramide {\r\n  background-image: url(/cdn/img/ceramide.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.cray {\r\n  background-image: url(/cdn/img/cray.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.kumanogiku {\r\n  background-image: url(/cdn/img/kumanogiku.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.olive {\r\n  background-image: url(/cdn/img/olive.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.platinum {\r\n  background-image: url(/cdn/img/platinum.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.rice {\r\n  background-image: url(/cdn/img/rice.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.seiyo-otogi {\r\n  background-image: url(/cdn/img/seiyo-otogi.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.stem-cell {\r\n  background-image: url(/cdn/img/stem-cell.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.tsubokusa {\r\n  background-image: url(/cdn/img/tsubokusa.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.vitamin {\r\n  background-image: url(/cdn/img/vitamin.png);\r\n}\r\n\r\n.product__description .desc .main-ingredients div.yugao {\r\n  background-image: url(/cdn/img/yugao.png);\r\n}\r\n\r\n.another_product_information {\r\n  padding: 40px 20px;\r\n  padding-bottom: 20px;\r\n  /*background: rgba(0, 0, 0, .5);*/\r\nbackground:#fee9e7;\r\n}\r\n\r\n.another_product_information table.table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  margin-bottom: 20px;\r\n  border-top: none;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr:first-child {\r\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.another_product_information .table\u003etbody\u003etr {\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.15);\r\n}\r\n.another_product_information table th {\r\n  width: 20%;\r\n  vertical-align: top;\r\n}\r\n\r\n.another_product_information table th, .another_product_information table td {\r\npadding: 1rem 0;\r\n}\r\n.another_product_information table td\u003eul {\r\n  margin-top: 0;\r\n  padding: 0 0 0 1.5rem;\r\n}\r\n\r\n.another_product_information table td\u003eul li:nth-of-type(1) {\r\n  margin-top: 0;\r\n}\r\n\r\n.another_product_information ul ul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.another_product_information table td\u003eul\u003eli\u003eul\u003eli{\r\nlist-style:none;\r\n}\r\n\r\n.another_product_information-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n\r\n\r\n\r\n  \r\n.accordion-button, .close-button {\r\n    background-color: #feede8;\r\n    color: #444;\r\n    cursor: pointer;\r\n    width: auto;\r\n    font-size: 15px;\r\n    transition: 0.4s;\r\n    font-family: unset;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: #a5a5a5;\r\n    padding: 3px 20px;\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  /* アコーディオンコンテンツのスタイル */\r\n  .accordion-content {\r\n    display: none; /* 初期状態では非表示 */\r\n    overflow: hidden;\r\n    transition: max-height 0.2s ease-out;\r\n    margin-top: -12px;\r\n  }\r\n\r\n\r\n\r\n\r\n\r\n.product__description .desc .desc .other-info-image,\r\n.another_product_information .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n\r\n.quantity__rules-cart .quantity_already{\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.product__description .desc .well {\r\n  min-height: 20px;\r\n  padding: 19px;\r\n  margin-bottom: 20px;\r\n  background-color: #f5f5f5;\r\n  border: 1px solid #e3e3e3;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\r\n  border-radius: 0px;\r\n}\r\n.product__description .desc .well img{\r\n  margin-bottom: auto!important;\r\n}\r\n.product__description .desc .badge {\r\n  display: inline-block;\r\n  padding: 0.5em 2em;\r\n  border-radius: 1em;\r\n  margin-bottom: 1em;\r\n  font-size: .75em;\r\n  font-weight: normal;\r\n  line-height: 1;\r\n  color: #fff;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  vertical-align: baseline;\r\n}\r\n.product__description .desc .badge{\r\n  background-color: #eeaa90!important;\r\n}\r\n.product__description .desc .bg-purple {\r\n  background-color: #a683a1!important;\r\n}\r\n\r\n.product__description .desc .other-info-subtitle {\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n\r\n.product__description .desc .row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n.product__description .desc .row .col-12 {\r\n  flex: 0 0 100%;\r\n  max-width: 100%;\r\n}\r\n.product__description .desc .row .col-12 .other-info-image {\r\n  height: 100px;\r\n  width: auto;\r\n}\r\n.rte img{\r\n  margin-bottom: auto;\r\n}\r\n\r\n/**** bottom related collection ****/\r\n.related_collection {\r\n  max-width: 1140px;\r\n  margin: 0 auto;\r\n}\r\n.entry-meta-data-list dt, .entry-meta-data-list dd{\r\ndisplay: inline-block;\r\n}\r\n.entry-meta-data-list dt{\r\npadding: 4px 8px;\r\nmin-width: 10em;\r\nbackground-color: #666;\r\nborder: none;\r\nborder-radius: 3px;\r\ntext-align: center;\r\ncolor: #fff;\r\nfont-size: 10px;\r\nfont-weight: lighter;\r\nline-height: 1.1em;\r\n}\r\n.entry-meta-data-list dd{\r\nposition: relative;\r\nmargin-left: 0.5rem;\r\npadding-left: 0;\r\nfont-size: 12px;\r\nborder: none;\r\n}\r\n.entry-meta-data-list dd:after{\r\ncontent: &#39;,&#39;;\r\ndisplay: inline-block;\r\nfont-size: 1.5rem;\r\nmargin-left: 5px;\r\n}\r\n.entry-meta-data-list dd:last-child:after{\r\ncontent: &#39;&#39;;\r\nmargin-left: 0;\r\n}\r\n\r\n/**** related products ****/\r\n.related-product-wrapper{\r\nmax-width: 1140px;\r\nmargin: 0 auto 5rem;\r\n}\r\n\r\n.related-product-wrapper h2{\r\nmargin: 0;\r\npadding: 0.5em 0;\r\nborder-top: 2px solid #e9e1db;\r\nborder-bottom: 1px solid rgba(0,0,0,0.06);\r\nfont-size: 2rem;\r\n}\r\n\r\n.related-product-wrapper .related-products{\r\nmargin-bottom: 2rem;\r\npadding: 0;\r\n}\r\n.related-product-wrapper .page-width{\r\npadding: 0;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid li{\r\nborder: 1px solid #DDD;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .related-product-image-wrapper{\r\nborder-bottom: 1px solid #DDD;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid .card__information{\r\npadding: 0.5rem 1rem 1rem;\r\n}\r\n\r\n.related-product-wrapper .related-products .related-product-grid h3 {\r\n  height: 2rem;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid h3 a:hover{\r\ntext-decoration: none;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .price{\r\nmargin: 0;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button {\r\nwidth: 100%;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a{\r\ndisplay: block;\r\nwidth: 50%;\r\nfont-size: 12px;\r\ntext-decoration: none;\r\npadding: 0.2rem 1rem;\r\nmargin: 0 0 0 auto;\r\nwhite-space: nowrap;\r\nbackground-color:rgba(166, 131, 161, .75);\r\nborder: 1px solid #a683a1;\r\ncolor: #FFF;\r\ntext-align: center;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:after{\r\ncontent: &#39;&#39;;\r\nbackground: url(/cdn/img/product-list-arrow.png);\r\ndisplay: inline-block;\r\nwidth: 12px;\r\nheight: 12px;\r\nbackground-size: contain;\r\nvertical-align: middle;\r\n}\r\n.related-product-wrapper .related-products .related-product-grid .product-list-button a:hover{\r\ncolor: #727171;\r\nbackground: #fff7f0;\r\n}\r\n\r\n@media (max-width: 1140px) {\r\n.another_product_information, .related_collection, .related-product-wrapper{\r\n  margin: 0 2rem;\r\n}\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .product__info-wrapper.grid__item.product__info-wrapper--extra-padding.scroll-trigger.animate--slide-in {\r\n      padding: 0;\r\n  }\r\n  .another_product_information, .related_collection, .related-product-wrapper{\r\n    margin: 0;\r\n  }\r\n  .related_collection{\r\n    padding: 0 1rem;\r\n  }\r\n  .another_product_information{\r\n    margin: 0 1rem;\r\n  }\r\n  .another_product_information table th, .another_product_information table td {\r\n      display: block;\r\n  }\r\n  .another_product_information table th {\r\n      padding: 1rem 0;\r\n      text-align: left;\r\n  }\r\n  .related-product-wrapper{\r\n    padding: 0 1rem;\r\n  }\r\n}\r\n  \r\n    /***** FOOTER CONTENT *****/\r\n    .shopify-section-group-footer-group *,\r\n    .shopify-section-group-footer-group *::before,\r\n    .shopify-section-group-footer-group *::after {\r\n      box-sizing: initial;\r\n    }\r\n\r\n\r\n    /* upper footer */\r\n    .site-body-bottom {\r\n      background-color: rgba(233, 225, 219, .75);\r\n      border-top: 1px solid #e9e1db;\r\n      font-size: 12px;\r\n      display: block;\r\n      overflow: hidden;\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: 370px;\r\n    }\r\n\r\n    .site-body-bottom ul {\r\n      position: relative;\r\n    }\r\n\r\n    .site-body-bottom ul.menu {\r\n      text-align: center;\r\n      padding: 0;\r\n      margin: 0.5em 0;\r\n    }\r\n\r\n    .footer-nav ul.menu_upper:after {\r\n      content: &#39;&#39;;\r\n      display: block;\r\n      padding: 5px;\r\n      border-bottom: 1px solid #e9e1db;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li {\r\n      display: inline-block;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.2);\r\n      padding: 0 1.5em;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li:first-child {\r\n      border-left: 1px solid rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .site-body-bottom ul.menu li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n      color: #727171;\r\n      padding: 0;\r\n    }\r\n\r\n    .site-body-bottom ul.menu li.current_page_item\u003ea {\r\n      background-color: transparent;\r\n    }\r\n\r\n    /* footer */\r\n\r\n    footer {\r\n      border-top-width: 0;\r\n      font-size: 0;\r\n    }\r\n\r\n    footer .nav li a,\r\n    footer nav li a {\r\n      text-decoration: underline;\r\n      text-decoration-style: dotted;\r\n      text-underline-offset: 2px;\r\n      text-decoration-color: rgba(0, 0, 0, .3);\r\n      text-decoration-thickness: 1px;\r\n    }\r\n\r\n    footer .site-footer-copyright {\r\n      margin: 0 auto;\r\n      padding: 1rem 0;\r\n      width: 100%;\r\n      text-align: center;\r\n      background-color: #e9e1db;\r\n      color: #727171;\r\n      font-size: 0.75rem;\r\n      line-height: 1.2rem;\r\n    }\r\n\r\n    footer .site-footer-copyright img {\r\n      height: 30px;\r\n      width: auto;\r\n    }\r\n\r\n    footer .footer-nav {\r\n      border-top-width: 0;\r\n      border-bottom-width: 0;\r\n      background-color: rgba(233, 225, 219, .75);\r\n    }\r\n\r\n    footer .footer-nav ul.menu {\r\n      text-align: center;\r\n    }\r\n\r\n    footer .footer-nav ul.menu li.first-row {}\r\n\r\n    footer .footer-nav ul.menu li.second-row {}\r\n\r\n    @media (max-width: 767px) {\r\n      .site-body-bottom ul.menu {\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n\r\n      .footer-nav ul.menu_upper:after {\r\n        border: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li {\r\n        display: block;\r\n        border-width: 0;\r\n        padding: 0;\r\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\r\n        border-left: none;\r\n        border-right: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li:first-child {\r\n        border-left: none;\r\n      }\r\n\r\n      .site-body-bottom ul.menu li a {\r\n        display: block;\r\n        padding-top: 1em;\r\n        padding-bottom: 1em;\r\n      }\r\n\r\n      .site-footer {\r\n        border-top-width: 0;\r\n      }\r\n    }\r\n\r\n\u003c/style\u003e\r\n\r\n  \u003c!-- BEGIN sections: footer-group --\u003e\r\n  \u003cdiv id=\&quot;shopify-section-sections--22383672754474__footer\&quot; class=\&quot;shopify-section shopify-section-group-footer-group\&quot; style=\&quot;position:relative;margin-top:180px;\&quot;\u003e\r\n\r\n\r\n    \r\n    \u003cfooter class=\&quot;site-footer footer color-background-1 gradient section-sections--22383672754474__footer-padding\&quot;\r\n      style=\&quot;margin:0;padding:0;background-color:#eee7ec;\&quot;\u003e\r\n\r\n      \u003cnav class=\&quot; footer-nav site-body-bottom\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003cdiv class=\&quot;container\&quot; style=\&quot;text-align:center;\&quot;\u003e\r\n          \u003cul id=\&quot;menu-upper-footer-navi-menu\&quot; class=\&quot;menu menu_upper\&quot;\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;https://www.kuniyoshikaneko.com/\&quot; class=\&quot;text-white\&quot;\u003e金子國義ウェブサイト\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/human-stem-cell.html\&quot; class=\&quot;text-white\&quot;\u003e『ヒト幹細胞順化培養液(保湿成分)』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/pages/ayurveda.html\&quot; class=\&quot;text-white\&quot;\u003e『アーユルヴェーダハーブ』って何？\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n          \u003c!--\u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower footer-nav-list nav nav--line\&quot;\u003e--\u003e\r\n          \u003cul id=\&quot;menu-footer-navi-menu\&quot; class=\&quot;menu menu_lower\&quot;\u003e\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/contact-information.html\&quot; class=\&quot;text-white\&quot;\u003e会社概要\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/contacts/new\&quot; class=\&quot;text-white\&quot;\u003eお問い合わせ\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/legal-notice.html\&quot; class=\&quot;text-white\&quot;\u003e特定商取引法に基づく表記\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/terms-of-service.html\&quot; class=\&quot;text-white\&quot;\u003e利用規約\u003c/a\u003e\u003c/li\u003e\r\n\r\n            \u003cli\u003e\u003ca href=\&quot;/policies/privacy-policy.html\&quot; class=\&quot;text-white\&quot;\u003eプライバシーポリシー\u003c/a\u003e\u003c/li\u003e\r\n\r\n          \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n      \u003c/nav\u003e\r\n\r\n      \u003cdiv class=\&quot;container site-footer-copyright\&quot; style=\&quot;background-color:#eee7ec;\&quot;\u003e\r\n        \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\r\n          \u003cimg src=\&quot;/cdn/img/footer-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\u003cbr\u003e\r\n          \u003cimg src=\&quot;/cdn/img/site-logo.png\&quot; alt=\&quot;Alice Belle Logo\&quot; class=\&quot;no-border\&quot;\u003e\r\n        \u003c/a\u003e\r\n        \u003cp class=\&quot;copyright_text\&quot;\u003e\r\n          当ページの内容を無断で使用することを禁止します。\u003cbr\u003e\r\n          Copyright © \u003ca href=\&quot;/index.html\&quot; data-wpel-link=\&quot;internal\&quot;\u003e\u003cspan class=\&quot;logo\&quot;\u003eAlice\r\n              Belle\u003c/span\u003e\u003c/a\u003e All Rights Reserved.\r\n        \u003c/p\u003e\r\n      \u003c/div\u003e\r\n    \u003c/footer\u003e\r\n\r\n  \u003c/div\u003e\r\n  \u003c!-- END sections: footer-group --\u003e\r\n\r\n  \u003c!--\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/constants.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/pubsub.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  \u003cscript src=\&quot;/cdn/shop/t/7/assets/animations.js\&quot; defer=\&quot;defer\&quot;\u003e\u003c/script\u003e\r\n  --\u003e\r\n\r\n  \u003cscript defer=\&quot;defer\&quot;\u003e\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  \u003c/script\u003e\r\n\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e&quot;,&quot;tags&quot;:[{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;id&quot;:&quot;shopify-section-sections--22383672754474__footer&quot;,&quot;class&quot;:&quot;shopify-section shopify-section-group-footer-group&quot;,&quot;style&quot;:&quot;position:relative;margin-top:180px;&quot;},&quot;content&quot;:&quot;\r\n\r\n\r\n    \r\n    &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container&quot;,&quot;style&quot;:&quot;text-align:center;&quot;},&quot;content&quot;:&quot;\r\n          &quot;},{&quot;tag_name&quot;:&quot;div&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;container site-footer-copyright&quot;,&quot;style&quot;:&quot;background-color:#eee7ec;&quot;},&quot;content&quot;:&quot;\r\n        &quot;},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/footer-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;img&quot;,&quot;attributes&quot;:{&quot;src&quot;:&quot;/cdn/img/site-logo.png&quot;,&quot;alt&quot;:&quot;Alice Belle Logo&quot;,&quot;class&quot;:&quot;no-border&quot;}},{&quot;tag_name&quot;:&quot;span&quot;,&quot;attributes&quot;:{&quot;class&quot;:&quot;logo&quot;},&quot;content&quot;:&quot;Alice\r\n              Belle&quot;},{&quot;tag_name&quot;:&quot;script&quot;,&quot;attributes&quot;:{&quot;defer&quot;:&quot;defer&quot;},&quot;content&quot;:&quot;\r\n    function getFocusableElements(container) { return Array.from(container.querySelectorAll(\&quot;summary, a[href], button:enabled, [tabindex]:not([tabindex^=&#39;-&#39;]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe\&quot;)) } document.querySelectorAll(&#39;[id^=\&quot;Details-\&quot;] summary&#39;).forEach(summary =\u003e { summary.setAttribute(\&quot;role\&quot;, \&quot;button\&quot;), summary.setAttribute(\&quot;aria-expanded\&quot;, summary.parentNode.hasAttribute(\&quot;open\&quot;)), summary.nextElementSibling.getAttribute(\&quot;id\&quot;) \u0026\u0026 summary.setAttribute(\&quot;aria-controls\&quot;, summary.nextElementSibling.id), summary.addEventListener(\&quot;click\&quot;, event =\u003e { event.currentTarget.setAttribute(\&quot;aria-expanded\&quot;, !event.currentTarget.closest(\&quot;details\&quot;).hasAttribute(\&quot;open\&quot;)) }), !summary.closest(\&quot;header-drawer, menu-drawer\&quot;) \u0026\u0026 summary.parentElement.addEventListener(\&quot;keyup\&quot;, onKeyUpEscape) }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container), first = elements[0], last = elements[elements.length - 1]; removeTrapFocus(), trapFocusHandlers.focusin = event =\u003e { event.target !== container \u0026\u0026 event.target !== last \u0026\u0026 event.target !== first || document.addEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.focusout = function () { document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown) }, trapFocusHandlers.keydown = function (event) { event.code.toUpperCase() === \&quot;TAB\&quot; \u0026\u0026 (event.target === last \u0026\u0026 !event.shiftKey \u0026\u0026 (event.preventDefault(), first.focus()), (event.target === container || event.target === first) \u0026\u0026 event.shiftKey \u0026\u0026 (event.preventDefault(), last.focus())) }, document.addEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.addEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), elementToFocus.focus(), elementToFocus.tagName === \&quot;INPUT\&quot; \u0026\u0026 [\&quot;search\&quot;, \&quot;text\&quot;, \&quot;email\&quot;, \&quot;url\&quot;].includes(elementToFocus.type) \u0026\u0026 elementToFocus.value \u0026\u0026 elementToFocus.setSelectionRange(0, elementToFocus.value.length) } try { document.querySelector(\&quot;:focus-visible\&quot;) } catch { focusVisiblePolyfill() } function focusVisiblePolyfill() { const navKeys = [\&quot;ARROWUP\&quot;, \&quot;ARROWDOWN\&quot;, \&quot;ARROWLEFT\&quot;, \&quot;ARROWRIGHT\&quot;, \&quot;TAB\&quot;, \&quot;ENTER\&quot;, \&quot;SPACE\&quot;, \&quot;ESCAPE\&quot;, \&quot;HOME\&quot;, \&quot;END\&quot;, \&quot;PAGEUP\&quot;, \&quot;PAGEDOWN\&quot;]; let currentFocusedElement = null, mouseClick = null; window.addEventListener(\&quot;keydown\&quot;, event =\u003e { navKeys.includes(event.code.toUpperCase()) \u0026\u0026 (mouseClick = !1) }), window.addEventListener(\&quot;mousedown\&quot;, event =\u003e { mouseClick = !0 }), window.addEventListener(\&quot;focus\&quot;, () =\u003e { currentFocusedElement \u0026\u0026 currentFocusedElement.classList.remove(\&quot;focused\&quot;), !mouseClick \u0026\u0026 (currentFocusedElement = document.activeElement, currentFocusedElement.classList.add(\&quot;focused\&quot;)) }, !0) } function pauseAllMedia() { document.querySelectorAll(\&quot;.js-youtube\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;event\&quot;:\&quot;command\&quot;,\&quot;func\&quot;:\&quot;pauseVideo\&quot;,\&quot;args\&quot;:\&quot;\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;.js-vimeo\&quot;).forEach(video =\u003e { video.contentWindow.postMessage(&#39;{\&quot;method\&quot;:\&quot;pause\&quot;}&#39;, \&quot;*\&quot;) }), document.querySelectorAll(\&quot;video\&quot;).forEach(video =\u003e video.pause()), document.querySelectorAll(\&quot;product-model\&quot;).forEach(model =\u003e { model.modelViewerUI \u0026\u0026 model.modelViewerUI.pause() }) } function removeTrapFocus(elementToFocus = null) { document.removeEventListener(\&quot;focusin\&quot;, trapFocusHandlers.focusin), document.removeEventListener(\&quot;focusout\&quot;, trapFocusHandlers.focusout), document.removeEventListener(\&quot;keydown\&quot;, trapFocusHandlers.keydown), elementToFocus \u0026\u0026 elementToFocus.focus() } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector(\&quot;summary\&quot;); openDetailsElement.removeAttribute(\&quot;open\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !1), summaryElement.focus() } class QuantityInput extends HTMLElement { constructor() { super(), this.input = this.querySelector(\&quot;input\&quot;), this.changeEvent = new Event(\&quot;change\&quot;, { bubbles: !0 }), this.input.addEventListener(\&quot;change\&quot;, this.onInputChange.bind(this)), this.querySelectorAll(\&quot;button\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this))) } quantityUpdateUnsubscriber = void 0; connectedCallback() { this.validateQtyRules(), this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this)) } disconnectedCallback() { this.quantityUpdateUnsubscriber \u0026\u0026 this.quantityUpdateUnsubscriber() } onInputChange(event) { this.validateQtyRules() } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === \&quot;plus\&quot; ? this.input.stepUp() : this.input.stepDown(), previousValue !== this.input.value \u0026\u0026 this.input.dispatchEvent(this.changeEvent) } validateQtyRules() { const value = parseInt(this.input.value); if (this.input.min) { const min = parseInt(this.input.min); this.querySelector(\&quot;.quantity__button[name=&#39;minus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003c= min) } if (this.input.max) { const max = parseInt(this.input.max); this.querySelector(\&quot;.quantity__button[name=&#39;plus&#39;]\&quot;).classList.toggle(\&quot;disabled\&quot;, value \u003e= max) } } } customElements.define(\&quot;quantity-input\&quot;, QuantityInput); function debounce(fn, wait) { let t; return (...args) =\u003e { clearTimeout(t), t = setTimeout(() =\u003e fn.apply(this, args), wait) } } function throttle(fn, delay) { let lastCall = 0; return function (...args) { const now = new Date().getTime(); if (!(now - lastCall \u003c delay)) return lastCall = now, fn(...args) } } function fetchConfig(type = \&quot;json\&quot;) { return { method: \&quot;POST\&quot;, headers: { \&quot;Content-Type\&quot;: \&quot;application/json\&quot;, Accept: `application/${type}` } } } typeof window.Shopify \u003e \&quot;u\&quot; \u0026\u0026 (window.Shopify = {}), Shopify.bind = function (fn, scope) { return function () { return fn.apply(scope, arguments) } }, Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i \u003c count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) return selector.selectedIndex = i, i } }, Shopify.addListener = function (target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, !1) : target.attachEvent(\&quot;on\&quot; + eventName, callback) }, Shopify.postLink = function (path, options) { options = options || {}; var method = options.method || \&quot;post\&quot;, params = options.parameters || {}, form = document.createElement(\&quot;form\&quot;); form.setAttribute(\&quot;method\&quot;, method), form.setAttribute(\&quot;action\&quot;, path); for (var key in params) { var hiddenField = document.createElement(\&quot;input\&quot;); hiddenField.setAttribute(\&quot;type\&quot;, \&quot;hidden\&quot;), hiddenField.setAttribute(\&quot;name\&quot;, key), hiddenField.setAttribute(\&quot;value\&quot;, params[key]), form.appendChild(hiddenField) } document.body.appendChild(form), form.submit(), document.body.removeChild(form) }, Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid), this.provinceEl = document.getElementById(province_domid), this.provinceContainer = document.getElementById(options.hideElement || province_domid), Shopify.addListener(this.countryEl, \&quot;change\&quot;, Shopify.bind(this.countryHandler, this)), this.initCountry(), this.initProvince() }, Shopify.CountryProvinceSelector.prototype = { initCountry: function () { var value = this.countryEl.getAttribute(\&quot;data-default\&quot;); Shopify.setSelectorByValue(this.countryEl, value), this.countryHandler() }, initProvince: function () { var value = this.provinceEl.getAttribute(\&quot;data-default\&quot;); value \u0026\u0026 this.provinceEl.options.length \u003e 0 \u0026\u0026 Shopify.setSelectorByValue(this.provinceEl, value) }, countryHandler: function (e) { var opt = this.countryEl.options[this.countryEl.selectedIndex], raw = opt.getAttribute(\&quot;data-provinces\&quot;), provinces = JSON.parse(raw); if (this.clearOptions(this.provinceEl), provinces \u0026\u0026 provinces.length == 0) this.provinceContainer.style.display = \&quot;none\&quot;; else { for (var i = 0; i \u003c provinces.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = provinces[i][0], opt.innerHTML = provinces[i][1], this.provinceEl.appendChild(opt) } this.provinceContainer.style.display = \&quot;\&quot; } }, clearOptions: function (selector) { for (; selector.firstChild;)selector.removeChild(selector.firstChild) }, setOptions: function (selector, values) { for (var i = 0, count = values.length; i \u003c values.length; i++) { var opt = document.createElement(\&quot;option\&quot;); opt.value = values[i], opt.innerHTML = values[i], selector.appendChild(opt) } } }; class MenuDrawer extends HTMLElement { constructor() { super(), this.mainDetailsToggle = this.querySelector(\&quot;details\&quot;), this.addEventListener(\&quot;keyup\&quot;, this.onKeyUp.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.onFocusOut.bind(this)), this.bindEvents() } bindEvents() { this.querySelectorAll(\&quot;summary\&quot;).forEach(summary =\u003e summary.addEventListener(\&quot;click\&quot;, this.onSummaryClick.bind(this))), this.querySelectorAll(\&quot;button:not(.localization-selector)\&quot;).forEach(button =\u003e button.addEventListener(\&quot;click\&quot;, this.onCloseButtonClick.bind(this))) } onKeyUp(event) { if (event.code.toUpperCase() !== \&quot;ESCAPE\&quot;) return; const openDetailsElement = event.target.closest(\&quot;details[open]\&quot;); openDetailsElement \u0026\u0026 (openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector(\&quot;summary\&quot;)) : this.closeSubmenu(openDetailsElement)) } onSummaryClick(event) { const summaryElement = event.currentTarget, detailsElement = summaryElement.parentNode, parentMenuElement = detailsElement.closest(\&quot;.has-submenu\&quot;), isOpen = detailsElement.hasAttribute(\&quot;open\&quot;), reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(\&quot;button\&quot;)), summaryElement.nextElementSibling.removeEventListener(\&quot;transitionend\&quot;, addTrapFocus) } detailsElement === this.mainDetailsToggle ? (isOpen \u0026\u0026 event.preventDefault(), isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement), window.matchMedia(\&quot;(max-width: 990px)\&quot;) \u0026\u0026 document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`)) : setTimeout(() =\u003e { detailsElement.classList.add(\&quot;menu-opening\&quot;), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), parentMenuElement \u0026\u0026 parentMenuElement.classList.add(\&quot;submenu-open\&quot;), !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener(\&quot;transitionend\&quot;, addTrapFocus) }, 100) } openMenuDrawer(summaryElement) { setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus = !1) { event !== void 0 \u0026\u0026 (this.mainDetailsToggle.classList.remove(\&quot;menu-opening\&quot;), this.mainDetailsToggle.querySelectorAll(\&quot;details\&quot;).forEach(details =\u003e { details.removeAttribute(\&quot;open\&quot;), details.classList.remove(\&quot;menu-opening\&quot;) }), this.mainDetailsToggle.querySelectorAll(\&quot;.submenu-open\&quot;).forEach(submenu =\u003e { submenu.classList.remove(\&quot;submenu-open\&quot;) }), document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`), removeTrapFocus(elementToFocus), this.closeAnimation(this.mainDetailsToggle), event instanceof KeyboardEvent \u0026\u0026 elementToFocus?.setAttribute(\&quot;aria-expanded\&quot;, !1)) } onFocusOut() { setTimeout(() =\u003e { this.mainDetailsToggle.hasAttribute(\&quot;open\&quot;) \u0026\u0026 !this.mainDetailsToggle.contains(document.activeElement) \u0026\u0026 this.closeMenuDrawer() }) } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest(\&quot;details\&quot;); this.closeSubmenu(detailsElement) } closeSubmenu(detailsElement) { const parentMenuElement = detailsElement.closest(\&quot;.submenu-open\&quot;); parentMenuElement \u0026\u0026 parentMenuElement.classList.remove(\&quot;submenu-open\&quot;), detailsElement.classList.remove(\&quot;menu-opening\&quot;), detailsElement.querySelector(\&quot;summary\&quot;).setAttribute(\&quot;aria-expanded\&quot;, !1), removeTrapFocus(detailsElement.querySelector(\&quot;summary\&quot;)), this.closeAnimation(detailsElement) } closeAnimation(detailsElement) { let animationStart; const handleAnimation = time =\u003e { animationStart === void 0 \u0026\u0026 (animationStart = time), time - animationStart \u003c 400 ? window.requestAnimationFrame(handleAnimation) : (detailsElement.removeAttribute(\&quot;open\&quot;), detailsElement.closest(\&quot;details[open]\&quot;) \u0026\u0026 trapFocus(detailsElement.closest(\&quot;details[open]\&quot;), detailsElement.querySelector(\&quot;summary\&quot;))) }; window.requestAnimationFrame(handleAnimation) } } customElements.define(\&quot;menu-drawer\&quot;, MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super() } openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector(\&quot;.section-header\&quot;), this.borderOffset = this.borderOffset || this.closest(\&quot;.header-wrapper\&quot;).classList.contains(\&quot;header-wrapper--border-bottom\&quot;) ? 1 : 0, document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), this.header.classList.add(\&quot;menu-open\&quot;), setTimeout(() =\u003e { this.mainDetailsToggle.classList.add(\&quot;menu-opening\&quot;) }), summaryElement.setAttribute(\&quot;aria-expanded\&quot;, !0), window.addEventListener(\&quot;resize\&quot;, this.onResize), trapFocus(this.mainDetailsToggle, summaryElement), document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`) } closeMenuDrawer(event, elementToFocus) { elementToFocus \u0026\u0026 (super.closeMenuDrawer(event, elementToFocus), this.header.classList.remove(\&quot;menu-open\&quot;), window.removeEventListener(\&quot;resize\&quot;, this.onResize)) } onResize = () =\u003e { this.header \u0026\u0026 document.documentElement.style.setProperty(\&quot;--header-bottom-position\&quot;, `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`), document.documentElement.style.setProperty(\&quot;--viewport-height\&quot;, `${window.innerHeight}px`) } } customElements.define(\&quot;header-drawer\&quot;, HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(), this.querySelector(&#39;[id^=\&quot;ModalClose-\&quot;]&#39;).addEventListener(\&quot;click\&quot;, this.hide.bind(this, !1)), this.addEventListener(\&quot;keyup\&quot;, event =\u003e { event.code.toUpperCase() === \&quot;ESCAPE\&quot; \u0026\u0026 this.hide() }), this.classList.contains(\&quot;media-modal\&quot;) ? this.addEventListener(\&quot;pointerup\&quot;, event =\u003e { event.pointerType === \&quot;mouse\&quot; \u0026\u0026 !event.target.closest(\&quot;deferred-media, product-model\&quot;) \u0026\u0026 this.hide() }) : this.addEventListener(\&quot;click\&quot;, event =\u003e { event.target === this \u0026\u0026 this.hide() }) } connectedCallback() { this.moved || (this.moved = !0, document.body.appendChild(this)) } show(opener) { this.openedBy = opener; const popup = this.querySelector(\&quot;.template-popup\&quot;); document.body.classList.add(\&quot;overflow-hidden\&quot;), this.setAttribute(\&quot;open\&quot;, \&quot;\&quot;), popup \u0026\u0026 popup.loadContent(), trapFocus(this, this.querySelector(&#39;[role=\&quot;dialog\&quot;]&#39;)), window.pauseAllMedia() } hide() { document.body.classList.remove(\&quot;overflow-hidden\&quot;), document.body.dispatchEvent(new CustomEvent(\&quot;modalClosed\&quot;)), this.removeAttribute(\&quot;open\&quot;), removeTrapFocus(this.openedBy), window.pauseAllMedia() } } customElements.define(\&quot;modal-dialog\&quot;, ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector(\&quot;button\&quot;); button \u0026\u0026 button.addEventListener(\&quot;click\&quot;, () =\u003e { const modal = document.querySelector(this.getAttribute(\&quot;data-modal\&quot;)); modal \u0026\u0026 modal.show(button) }) } } customElements.define(\&quot;modal-opener\&quot;, ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector(&#39;[id^=\&quot;Deferred-Poster-\&quot;]&#39;); poster \u0026\u0026 poster.addEventListener(\&quot;click\&quot;, this.loadContent.bind(this)) } loadContent(focus = !0) { if (window.pauseAllMedia(), !this.getAttribute(\&quot;loaded\&quot;)) { const content = document.createElement(\&quot;div\&quot;); content.appendChild(this.querySelector(\&quot;template\&quot;).content.firstElementChild.cloneNode(!0)), this.setAttribute(\&quot;loaded\&quot;, !0); const deferredElement = this.appendChild(content.querySelector(\&quot;video, model-viewer, iframe\&quot;)); focus \u0026\u0026 deferredElement.focus(), deferredElement.nodeName == \&quot;VIDEO\&quot; \u0026\u0026 deferredElement.getAttribute(\&quot;autoplay\&quot;) \u0026\u0026 deferredElement.play() } } } customElements.define(\&quot;deferred-media\&quot;, DeferredMedia); class SliderComponent extends HTMLElement { constructor() { if (super(), this.slider = this.querySelector(&#39;[id^=\&quot;Slider-\&quot;]&#39;), this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.enableSliderLooping = !1, this.currentPageElement = this.querySelector(\&quot;.slider-counter--current\&quot;), this.pageTotalElement = this.querySelector(\&quot;.slider-counter--total\&quot;), this.prevButton = this.querySelector(&#39;button[name=\&quot;previous\&quot;]&#39;), this.nextButton = this.querySelector(&#39;button[name=\&quot;next\&quot;]&#39;), !this.slider || !this.nextButton) return; this.initPages(), new ResizeObserver(entries =\u003e this.initPages()).observe(this.slider), this.slider.addEventListener(\&quot;scroll\&quot;, this.update.bind(this)), this.prevButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)), this.nextButton.addEventListener(\&quot;click\&quot;, this.onButtonClick.bind(this)) } initPages() { this.sliderItemsToShow = Array.from(this.sliderItems).filter(element =\u003e element.clientWidth \u003e 0), !(this.sliderItemsToShow.length \u003c 2) \u0026\u0026 (this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft, this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset), this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1, this.update()) } resetPages() { this.sliderItems = this.querySelectorAll(&#39;[id^=\&quot;Slide-\&quot;]&#39;), this.initPages() } update() { if (!this.slider || !this.nextButton) return; const previousPage = this.currentPage; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1, this.currentPageElement \u0026\u0026 this.pageTotalElement \u0026\u0026 (this.currentPageElement.textContent = this.currentPage, this.pageTotalElement.textContent = this.totalPages), this.currentPage != previousPage \u0026\u0026 this.dispatchEvent(new CustomEvent(\&quot;slideChanged\&quot;, { detail: { currentPage: this.currentPage, currentElement: this.sliderItemsToShow[this.currentPage - 1] } })), !this.enableSliderLooping \u0026\u0026 (this.isSlideVisible(this.sliderItemsToShow[0]) \u0026\u0026 this.slider.scrollLeft === 0 ? this.prevButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1]) ? this.nextButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;) : this.nextButton.removeAttribute(\&quot;disabled\&quot;)) } isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; return element.offsetLeft + element.clientWidth \u003c= lastVisibleSlide \u0026\u0026 element.offsetLeft \u003e= this.slider.scrollLeft } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; this.slideScrollPosition = event.currentTarget.name === \&quot;next\&quot; ? this.slider.scrollLeft + step * this.sliderItemOffset : this.slider.scrollLeft - step * this.sliderItemOffset, this.setSlidePosition(this.slideScrollPosition) } setSlidePosition(position) { this.slider.scrollTo({ left: position }) } } customElements.define(\&quot;slider-component\&quot;, SliderComponent); class SlideshowComponent extends SliderComponent { constructor() { super(), this.sliderControlWrapper = this.querySelector(\&quot;.slider-buttons\&quot;), this.enableSliderLooping = !0, this.sliderControlWrapper \u0026\u0026 (this.sliderFirstItemNode = this.slider.querySelector(\&quot;.slideshow__slide\&quot;), this.sliderItemsToShow.length \u003e 0 \u0026\u0026 (this.currentPage = 1), this.announcementBarSlider = this.querySelector(\&quot;.announcement-bar-slider\&quot;), this.announcerBarAnimationDelay = this.announcementBarSlider ? 250 : 0, this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll(\&quot;.slider-counter__link\&quot;)), this.sliderControlLinksArray.forEach(link =\u003e link.addEventListener(\&quot;click\&quot;, this.linkToSlide.bind(this))), this.slider.addEventListener(\&quot;scroll\&quot;, this.setSlideVisibility.bind(this)), this.setSlideVisibility(), this.announcementBarSlider \u0026\u0026 (this.announcementBarArrowButtonWasClicked = !1, this.reducedMotion = window.matchMedia(\&quot;(prefers-reduced-motion: reduce)\&quot;), this.reducedMotion.addEventListener(\&quot;change\&quot;, () =\u003e { this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay() }), [this.prevButton, this.nextButton].forEach(button =\u003e { button.addEventListener(\&quot;click\&quot;, () =\u003e { this.announcementBarArrowButtonWasClicked = !0 }, { once: !0 }) })), this.slider.getAttribute(\&quot;data-autoplay\&quot;) === \&quot;true\&quot; \u0026\u0026 this.setAutoPlay()) } setAutoPlay() { this.autoplaySpeed = this.slider.dataset.speed * 1e3, this.addEventListener(\&quot;mouseover\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;mouseleave\&quot;, this.focusOutHandling.bind(this)), this.addEventListener(\&quot;focusin\&quot;, this.focusInHandling.bind(this)), this.addEventListener(\&quot;focusout\&quot;, this.focusOutHandling.bind(this)), this.querySelector(\&quot;.slideshow__autoplay\&quot;) ? (this.sliderAutoplayButton = this.querySelector(\&quot;.slideshow__autoplay\&quot;), this.sliderAutoplayButton.addEventListener(\&quot;click\&quot;, this.autoPlayToggle.bind(this)), this.autoplayButtonIsSetToPlay = !0, this.play()) : this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked ? this.pause() : this.play() } onButtonClick(event) { super.onButtonClick(event), this.wasClicked = !0; const isFirstSlide = this.currentPage === 1, isLastSlide = this.currentPage === this.sliderItemsToShow.length; if (!isFirstSlide \u0026\u0026 !isLastSlide) { this.applyAnimationToAnnouncementBar(event.currentTarget.name); return } isFirstSlide \u0026\u0026 event.currentTarget.name === \&quot;previous\&quot; ? this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length : isLastSlide \u0026\u0026 event.currentTarget.name === \&quot;next\&quot; \u0026\u0026 (this.slideScrollPosition = 0), this.setSlidePosition(this.slideScrollPosition), this.applyAnimationToAnnouncementBar(event.currentTarget.name) } setSlidePosition(position) { this.setPositionTimeout \u0026\u0026 clearTimeout(this.setPositionTimeout), this.setPositionTimeout = setTimeout(() =\u003e { this.slider.scrollTo({ left: position }) }, this.announcerBarAnimationDelay) } update() { super.update(), this.sliderControlButtons = this.querySelectorAll(\&quot;.slider-counter__link\&quot;), this.prevButton.removeAttribute(\&quot;disabled\&quot;), this.sliderControlButtons.length \u0026\u0026 (this.sliderControlButtons.forEach(link =\u003e { link.classList.remove(\&quot;slider-counter__link--active\&quot;), link.removeAttribute(\&quot;aria-current\&quot;) }), this.sliderControlButtons[this.currentPage - 1].classList.add(\&quot;slider-counter__link--active\&quot;), this.sliderControlButtons[this.currentPage - 1].setAttribute(\&quot;aria-current\&quot;, !0)) } autoPlayToggle() { this.togglePlayButtonState(this.autoplayButtonIsSetToPlay), this.autoplayButtonIsSetToPlay ? this.pause() : this.play(), this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay } focusOutHandling(event) { if (this.sliderAutoplayButton) { const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; this.play() } else !this.reducedMotion.matches \u0026\u0026 !this.announcementBarArrowButtonWasClicked \u0026\u0026 this.play() } focusInHandling(event) { this.sliderAutoplayButton ? (event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target)) \u0026\u0026 this.autoplayButtonIsSetToPlay ? this.play() : this.autoplayButtonIsSetToPlay \u0026\u0026 this.pause() : this.announcementBarSlider.contains(event.target) \u0026\u0026 this.pause() } play() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;off\&quot;), clearInterval(this.autoplay), this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed) } pause() { this.slider.setAttribute(\&quot;aria-live\&quot;, \&quot;polite\&quot;), clearInterval(this.autoplay) } togglePlayButtonState(pauseAutoplay) { pauseAutoplay ? (this.sliderAutoplayButton.classList.add(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.playSlideshow)) : (this.sliderAutoplayButton.classList.remove(\&quot;slideshow__autoplay--paused\&quot;), this.sliderAutoplayButton.setAttribute(\&quot;aria-label\&quot;, window.accessibilityStrings.pauseSlideshow)) } autoRotateSlides() { const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset; this.setSlidePosition(slideScrollPosition), this.applyAnimationToAnnouncementBar() } setSlideVisibility(event) { this.sliderItemsToShow.forEach((item, index) =\u003e { const linkElements = item.querySelectorAll(\&quot;a\&quot;); index === this.currentPage - 1 ? (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.removeAttribute(\&quot;tabindex\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;false\&quot;), item.removeAttribute(\&quot;tabindex\&quot;)) : (linkElements.length \u0026\u0026 linkElements.forEach(button =\u003e { button.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;) }), item.setAttribute(\&quot;aria-hidden\&quot;, \&quot;true\&quot;), item.setAttribute(\&quot;tabindex\&quot;, \&quot;-1\&quot;)) }), this.wasClicked = !1 } applyAnimationToAnnouncementBar(button = \&quot;next\&quot;) { if (!this.announcementBarSlider) return; const itemsCount = this.sliderItems.length, increment = button === \&quot;next\&quot; ? 1 : -1, currentIndex = this.currentPage - 1; let nextIndex = (currentIndex + increment) % itemsCount; nextIndex = nextIndex === -1 ? itemsCount - 1 : nextIndex; const nextSlide = this.sliderItems[nextIndex], currentSlide = this.sliderItems[currentIndex], animationClassIn = \&quot;announcement-bar-slider--fade-in\&quot;, animationClassOut = \&quot;announcement-bar-slider--fade-out\&quot;, isFirstSlide = currentIndex === 0, isLastSlide = currentIndex === itemsCount - 1, direction = button === \&quot;next\&quot; \u0026\u0026 !isLastSlide || button === \&quot;previous\&quot; \u0026\u0026 isFirstSlide ? \&quot;next\&quot; : \&quot;previous\&quot;; currentSlide.classList.add(`${animationClassOut}-${direction}`), nextSlide.classList.add(`${animationClassIn}-${direction}`), setTimeout(() =\u003e { currentSlide.classList.remove(`${animationClassOut}-${direction}`), nextSlide.classList.remove(`${animationClassIn}-${direction}`) }, this.announcerBarAnimationDelay * 2) } linkToSlide(event) { event.preventDefault(); const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ left: slideScrollPosition }) } } customElements.define(\&quot;slideshow-component\&quot;, SlideshowComponent); class VariantSelects extends HTMLElement { constructor() { super(), this.addEventListener(\&quot;change\&quot;, this.onVariantChange) } onVariantChange() { this.updateOptions(), this.updateMasterId(), this.toggleAddButton(!0, \&quot;\&quot;, !1), this.updatePickupAvailability(), this.removeErrorMessage(), this.updateVariantStatuses(), this.currentVariant ? (this.updateMedia(), this.updateURL(), this.updateVariantInput(), this.renderProductInfo(), this.updateShareUrl()) : (this.toggleAddButton(!0, \&quot;\&quot;, !0), this.setUnavailable()) } updateOptions() { this.options = Array.from(this.querySelectorAll(\&quot;select\&quot;), select =\u003e select.value) } updateMasterId() { this.currentVariant = this.getVariantData().find(variant =\u003e !variant.options.map((option, index) =\u003e this.options[index] === option).includes(!1)) } updateMedia() { if (!this.currentVariant || !this.currentVariant.featured_media) return; document.querySelectorAll(`[id^=\&quot;MediaGallery-${this.dataset.section}\&quot;]`).forEach(mediaGallery =\u003e mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, !0)); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; const newMediaModal = modalContent.querySelector(`[data-media-id=\&quot;${this.currentVariant.featured_media.id}\&quot;]`); modalContent.prepend(newMediaModal) } updateURL() { !this.currentVariant || this.dataset.updateUrl === \&quot;false\&quot; || window.history.replaceState({}, \&quot;\&quot;, `${this.dataset.url}?variant=${this.currentVariant.id}`) } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); !shareButton || !shareButton.updateUrl || shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`) } updateVariantInput() { document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`).forEach(productForm =\u003e { const input = productForm.querySelector(&#39;input[name=\&quot;id\&quot;]&#39;); input.value = this.currentVariant.id, input.dispatchEvent(new Event(\&quot;change\&quot;, { bubbles: !0 })) }) } updateVariantStatuses() { const selectedOptionOneVariants = this.variantData.filter(variant =\u003e this.querySelector(\&quot;:checked\&quot;).value === variant.option1), inputWrappers = [...this.querySelectorAll(\&quot;.product-form__input\&quot;)]; inputWrappers.forEach((option, index) =\u003e { if (index === 0) return; const optionInputs = [...option.querySelectorAll(&#39;input[type=\&quot;radio\&quot;], option&#39;)], previousOptionSelected = inputWrappers[index - 1].querySelector(\&quot;:checked\&quot;).value, availableOptionInputsValue = selectedOptionOneVariants.filter(variant =\u003e variant.available \u0026\u0026 variant[`option${index}`] === previousOptionSelected).map(variantOption =\u003e variantOption[`option${index + 1}`]); this.setInputAvailability(optionInputs, availableOptionInputsValue) }) } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.innerText = input.getAttribute(\&quot;value\&quot;) : input.innerText = window.variantStrings.unavailable_with_option.replace(\&quot;[value]\&quot;, input.getAttribute(\&quot;value\&quot;)) }) } updatePickupAvailability() { const pickUpAvailability = document.querySelector(\&quot;pickup-availability\&quot;); pickUpAvailability \u0026\u0026 (this.currentVariant \u0026\u0026 this.currentVariant.available ? pickUpAvailability.fetchAvailability(this.currentVariant.id) : (pickUpAvailability.removeAttribute(\&quot;available\&quot;), pickUpAvailability.innerHTML = \&quot;\&quot;)) } removeErrorMessage() { const section = this.closest(\&quot;section\&quot;); if (!section) return; const productForm = section.querySelector(\&quot;product-form\&quot;); productForm \u0026\u0026 productForm.handleErrorMessage() } renderProductInfo() { const requestedVariantId = this.currentVariant.id, sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; fetch(`${this.dataset.url}?variant=${requestedVariantId}\u0026section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`).then(response =\u003e response.text()).then(responseText =\u003e { if (this.currentVariant.id !== requestedVariantId) return; const html = new DOMParser().parseFromString(responseText, \&quot;text/html\&quot;), destination = document.getElementById(`price-${this.dataset.section}`), source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), skuDestination = document.getElementById(`Sku-${this.dataset.section}`), inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`), volumePricingSource = html.getElementById(`Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`), pricePerItemSource = html.getElementById(`Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`), volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`); source \u0026\u0026 destination \u0026\u0026 (destination.innerHTML = source.innerHTML), inventorySource \u0026\u0026 inventoryDestination \u0026\u0026 (inventoryDestination.innerHTML = inventorySource.innerHTML), skuSource \u0026\u0026 skuDestination \u0026\u0026 (skuDestination.innerHTML = skuSource.innerHTML, skuDestination.classList.toggle(\&quot;visibility-hidden\&quot;, skuSource.classList.contains(\&quot;visibility-hidden\&quot;))), volumePricingSource \u0026\u0026 volumePricingDestination \u0026\u0026 (volumePricingDestination.innerHTML = volumePricingSource.innerHTML), pricePerItemSource \u0026\u0026 pricePerItemDestination \u0026\u0026 (pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML, pricePerItemDestination.classList.toggle(\&quot;visibility-hidden\&quot;, pricePerItemSource.classList.contains(\&quot;visibility-hidden\&quot;))); const price = document.getElementById(`price-${this.dataset.section}`); price \u0026\u0026 price.classList.remove(\&quot;visibility-hidden\&quot;), inventoryDestination \u0026\u0026 inventoryDestination.classList.toggle(\&quot;visibility-hidden\&quot;, inventorySource.innerText === \&quot;\&quot;); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute(\&quot;disabled\&quot;) : !0, window.variantStrings.soldOut), publish(PUB_SUB_EVENTS.variantChange, { data: { sectionId, html, variant: this.currentVariant } }) }) } toggleAddButton(disable = !0, text, modifyClass = !0) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = productForm.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;); addButton \u0026\u0026 (disable ? (addButton.setAttribute(\&quot;disabled\&quot;, \&quot;disabled\&quot;), text \u0026\u0026 (addButtonText.textContent = text)) : (addButton.removeAttribute(\&quot;disabled\&quot;), addButtonText.textContent = window.variantStrings.addToCart)) } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`), addButton = button.querySelector(&#39;[name=\&quot;add\&quot;]&#39;), addButtonText = button.querySelector(&#39;[name=\&quot;add\&quot;] \u003e span&#39;), price = document.getElementById(`price-${this.dataset.section}`), inventory = document.getElementById(`Inventory-${this.dataset.section}`), sku = document.getElementById(`Sku-${this.dataset.section}`), pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); addButton \u0026\u0026 (addButtonText.textContent = window.variantStrings.unavailable, price \u0026\u0026 price.classList.add(\&quot;visibility-hidden\&quot;), inventory \u0026\u0026 inventory.classList.add(\&quot;visibility-hidden\&quot;), sku \u0026\u0026 sku.classList.add(\&quot;visibility-hidden\&quot;), pricePerItem \u0026\u0026 pricePerItem.classList.add(\&quot;visibility-hidden\&quot;)) } getVariantData() { return this.variantData = this.variantData || JSON.parse(this.querySelector(&#39;[type=\&quot;application/json\&quot;]&#39;).textContent), this.variantData } } customElements.define(\&quot;variant-selects\&quot;, VariantSelects); class VariantRadios extends VariantSelects { constructor() { super() } setInputAvailability(listOfOptions, listOfAvailableOptions) { listOfOptions.forEach(input =\u003e { listOfAvailableOptions.includes(input.getAttribute(\&quot;value\&quot;)) ? input.classList.remove(\&quot;disabled\&quot;) : input.classList.add(\&quot;disabled\&quot;) }) } updateOptions() { const fieldsets = Array.from(this.querySelectorAll(\&quot;fieldset\&quot;)); this.options = fieldsets.map(fieldset =\u003e Array.from(fieldset.querySelectorAll(\&quot;input\&quot;)).find(radio =\u003e radio.checked).value) } } customElements.define(\&quot;variant-radios\&quot;, VariantRadios); class ProductRecommendations extends HTMLElement { constructor() { super() } connectedCallback() { const handleIntersection = (entries, observer) =\u003e { entries[0].isIntersecting \u0026\u0026 (observer.unobserve(this), fetch(this.dataset.url).then(response =\u003e response.text()).then(text =\u003e { const html = document.createElement(\&quot;div\&quot;); html.innerHTML = text; const recommendations = html.querySelector(\&quot;product-recommendations\&quot;); recommendations \u0026\u0026 recommendations.innerHTML.trim().length \u0026\u0026 (this.innerHTML = recommendations.innerHTML), !this.querySelector(\&quot;slideshow-component\&quot;) \u0026\u0026 this.classList.contains(\&quot;complementary-products\&quot;) \u0026\u0026 this.remove(), html.querySelector(\&quot;.grid__item\&quot;) \u0026\u0026 this.classList.add(\&quot;product-recommendations--loaded\&quot;) }).catch(e =\u003e { console.error(e) })) }; new IntersectionObserver(handleIntersection.bind(this), { rootMargin: \&quot;0px 0px 400px 0px\&quot; }).observe(this) } } customElements.define(\&quot;product-recommendations\&quot;, ProductRecommendations);\r\n    //# sourceMappingURL=/cdn/shop/t/7/assets/global.js.map?v=54939145903281508041710830343\r\n  &quot;}]}}},{&quot;slug&quot;:&quot;user/referral&quot;,&quot;title&quot;:&quot;お友達紹介&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;defaultFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}}},{&quot;slug&quot;:&quot;sign_up&quot;,&quot;title&quot;:&quot;新規会員登録画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;defaultFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}}},{&quot;slug&quot;:&quot;checkout/crosssell_recommend_confirm&quot;,&quot;title&quot;:&quot;購入確認クロスセル成功画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;defaultFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}}},{&quot;slug&quot;:&quot;checkout/upsell_recommend_confirm&quot;,&quot;title&quot;:&quot;購入確認アップセル成功画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;defaultFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}}},{&quot;slug&quot;:&quot;opt_out&quot;,&quot;title&quot;:&quot;メールマガジン配信停止画面&quot;,&quot;defaultHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addHeader&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;addFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;defaultFooter&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:true,&quot;content&quot;:&quot;&quot;,&quot;tags&quot;:[]}},&quot;leftSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;leftSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideMenu&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}},&quot;rightSideBanner&quot;:{&quot;pc&quot;:{&quot;isDisplayed&quot;:false},&quot;smartphone&quot;:{&quot;isDisplayed&quot;:false}}}],&quot;system_mail_config&quot;:{&quot;is_send_create_user_mail&quot;:true},&quot;emoji_regex&quot;:{&quot;source&quot;:&quot;(?:(?:(?:(?:(?:☝|⛹|✊|✋|✌|✍|\\ud83c\\udf85|\\ud83c\\udfc2|\\ud83c\\udfc3|\\ud83c\\udfc4|\\ud83c\\udfc7|\\ud83c\\udfca|\\ud83c\\udfcb|\\ud83c\\udfcc|\\ud83d\\udc42|\\ud83d\\udc43|\\ud83d\\udc46|\\ud83d\\udc47|\\ud83d\\udc48|\\ud83d\\udc49|\\ud83d\\udc4a|\\ud83d\\udc4b|\\ud83d\\udc4c|\\ud83d\\udc4d|\\ud83d\\udc4e|\\ud83d\\udc4f|\\ud83d\\udc50|\\ud83d\\udc66|\\ud83d\\udc67|\\ud83d\\udc68|\\ud83d\\udc69|\\ud83d\\udc6a|\\ud83d\\udc6b|\\ud83d\\udc6c|\\ud83d\\udc6d|\\ud83d\\udc6e|\\ud83d\\udc6f|\\ud83d\\udc70|\\ud83d\\udc71|\\ud83d\\udc72|\\ud83d\\udc73|\\ud83d\\udc74|\\ud83d\\udc75|\\ud83d\\udc76|\\ud83d\\udc77|\\ud83d\\udc78|\\ud83d\\udc7c|\\ud83d\\udc81|\\ud83d\\udc82|\\ud83d\\udc83|\\ud83d\\udc85|\\ud83d\\udc86|\\ud83d\\udc87|\\ud83d\\udc8f|\\ud83d\\udc91|\\ud83d\\udcaa|\\ud83d\\udd74|\\ud83d\\udd75|\\ud83d\\udd7a|\\ud83d\\udd90|\\ud83d\\udd95|\\ud83d\\udd96|\\ud83d\\ude45|\\ud83d\\ude46|\\ud83d\\ude47|\\ud83d\\ude4b|\\ud83d\\ude4c|\\ud83d\\ude4d|\\ud83d\\ude4e|\\ud83d\\ude4f|\\ud83d\\udea3|\\ud83d\\udeb4|\\ud83d\\udeb5|\\ud83d\\udeb6|\\ud83d\\udec0|\\ud83d\\udecc|\\ud83e\\udd0c|\\ud83e\\udd0f|\\ud83e\\udd18|\\ud83e\\udd19|\\ud83e\\udd1a|\\ud83e\\udd1b|\\ud83e\\udd1c|\\ud83e\\udd1d|\\ud83e\\udd1e|\\ud83e\\udd1f|\\ud83e\\udd26|\\ud83e\\udd30|\\ud83e\\udd31|\\ud83e\\udd32|\\ud83e\\udd33|\\ud83e\\udd34|\\ud83e\\udd35|\\ud83e\\udd36|\\ud83e\\udd37|\\ud83e\\udd38|\\ud83e\\udd39|\\ud83e\\udd3c|\\ud83e\\udd3d|\\ud83e\\udd3e|\\ud83e\\udd77|\\ud83e\\uddb5|\\ud83e\\uddb6|\\ud83e\\uddb8|\\ud83e\\uddb9|\\ud83e\\uddbb|\\ud83e\\uddcd|\\ud83e\\uddce|\\ud83e\\uddcf|\\ud83e\\uddd1|\\ud83e\\uddd2|\\ud83e\\uddd3|\\ud83e\\uddd4|\\ud83e\\uddd5|\\ud83e\\uddd6|\\ud83e\\uddd7|\\ud83e\\uddd8|\\ud83e\\uddd9|\\ud83e\\uddda|\\ud83e\\udddb|\\ud83e\\udddc|\\ud83e\\udddd|\\ud83e\\udec3|\\ud83e\\udec4|\\ud83e\\udec5|\\ud83e\\udef0|\\ud83e\\udef1|\\ud83e\\udef2|\\ud83e\\udef3|\\ud83e\\udef4|\\ud83e\\udef5|\\ud83e\\udef6)(?:\\ud83c\\udffb|\\ud83c\\udffc|\\ud83c\\udffd|\\ud83c\\udffe|\\ud83c\\udfff)|(?:(?:\\#|\\*|0|1|2|3|4|5|6|7|8|9|©|®|‼|⁉|™|ℹ|↔|↕|↖|↗|↘|↙|↩|↪|⌨|⏏|⏭|⏮|⏯|⏱|⏲|⏸|⏹|⏺|Ⓜ|▪|▫|▶|◀|◻|◼|☀|☁|☂|☃|☄|☎|☑|☘|☝|☠|☢|☣|☦|☪|☮|☯|☸|☹|☺|♀|♂|♟|♠|♣|♥|♦|♨|♻|♾|⚒|⚔|⚕|⚖|⚗|⚙|⚛|⚜|⚠|⚧|⚰|⚱|⛈|⛏|⛑|⛓|⛩|⛰|⛱|⛴|⛷|⛸|⛹|✂|✈|✉|✌|✍|✏|✒|✔|✖|✝|✡|✳|✴|❄|❇|❣|❤|➡|⤴|⤵|⬅|⬆|⬇|〰|〽|㊗|㊙|\\ud83c\\udd70|\\ud83c\\udd71|\\ud83c\\udd7e|\\ud83c\\udd7f|\\ud83c\\ude02|\\ud83c\\ude37|\\ud83c\\udf21|\\ud83c\\udf24|\\ud83c\\udf25|\\ud83c\\udf26|\\ud83c\\udf27|\\ud83c\\udf28|\\ud83c\\udf29|\\ud83c\\udf2a|\\ud83c\\udf2b|\\ud83c\\udf2c|\\ud83c\\udf36|\\ud83c\\udf7d|\\ud83c\\udf96|\\ud83c\\udf97|\\ud83c\\udf99|\\ud83c\\udf9a|\\ud83c\\udf9b|\\ud83c\\udf9e|\\ud83c\\udf9f|\\ud83c\\udfcb|\\ud83c\\udfcc|\\ud83c\\udfcd|\\ud83c\\udfce|\\ud83c\\udfd4|\\ud83c\\udfd5|\\ud83c\\udfd6|\\ud83c\\udfd7|\\ud83c\\udfd8|\\ud83c\\udfd9|\\ud83c\\udfda|\\ud83c\\udfdb|\\ud83c\\udfdc|\\ud83c\\udfdd|\\ud83c\\udfde|\\ud83c\\udfdf|\\ud83c\\udff3|\\ud83c\\udff5|\\ud83c\\udff7|\\ud83d\\udc3f|\\ud83d\\udc41|\\ud83d\\udcfd|\\ud83d\\udd49|\\ud83d\\udd4a|\\ud83d\\udd6f|\\ud83d\\udd70|\\ud83d\\udd73|\\ud83d\\udd74|\\ud83d\\udd75|\\ud83d\\udd76|\\ud83d\\udd77|\\ud83d\\udd78|\\ud83d\\udd79|\\ud83d\\udd87|\\ud83d\\udd8a|\\ud83d\\udd8b|\\ud83d\\udd8c|\\ud83d\\udd8d|\\ud83d\\udd90|\\ud83d\\udda5|\\ud83d\\udda8|\\ud83d\\uddb1|\\ud83d\\uddb2|\\ud83d\\uddbc|\\ud83d\\uddc2|\\ud83d\\uddc3|\\ud83d\\uddc4|\\ud83d\\uddd1|\\ud83d\\uddd2|\\ud83d\\uddd3|\\ud83d\\udddc|\\ud83d\\udddd|\\ud83d\\uddde|\\ud83d\\udde1|\\ud83d\\udde3|\\ud83d\\udde8|\\ud83d\\uddef|\\ud83d\\uddf3|\\ud83d\\uddfa|\\ud83d\\udecb|\\ud83d\\udecd|\\ud83d\\udece|\\ud83d\\udecf|\\ud83d\\udee0|\\ud83d\\udee1|\\ud83d\\udee2|\\ud83d\\udee3|\\ud83d\\udee4|\\ud83d\\udee5|\\ud83d\\udee9|\\ud83d\\udef0|\\ud83d\\udef3)️|(?:⌚|⌛|⏩|⏪|⏫|⏬|⏰|⏳|◽|◾|☔|☕|♈|♉|♊|♋|♌|♍|♎|♏|♐|♑|♒|♓|♿|⚓|⚡|⚪|⚫|⚽|⚾|⛄|⛅|⛎|⛔|⛪|⛲|⛳|⛵|⛺|⛽|✅|✊|✋|✨|❌|❎|❓|❔|❕|❗|➕|➖|➗|➰|➿|⬛|⬜|⭐|⭕|\\ud83c\\udc04|\\ud83c\\udccf|\\ud83c\\udd8e|\\ud83c\\udd91|\\ud83c\\udd92|\\ud83c\\udd93|\\ud83c\\udd94|\\ud83c\\udd95|\\ud83c\\udd96|\\ud83c\\udd97|\\ud83c\\udd98|\\ud83c\\udd99|\\ud83c\\udd9a|\\ud83c\\udde6|\\ud83c\\udde7|\\ud83c\\udde8|\\ud83c\\udde9|\\ud83c\\uddea|\\ud83c\\uddeb|\\ud83c\\uddec|\\ud83c\\udded|\\ud83c\\uddee|\\ud83c\\uddef|\\ud83c\\uddf0|\\ud83c\\uddf1|\\ud83c\\uddf2|\\ud83c\\uddf3|\\ud83c\\uddf4|\\ud83c\\uddf5|\\ud83c\\uddf6|\\ud83c\\uddf7|\\ud83c\\uddf8|\\ud83c\\uddf9|\\ud83c\\uddfa|\\ud83c\\uddfb|\\ud83c\\uddfc|\\ud83c\\uddfd|\\ud83c\\uddfe|\\ud83c\\uddff|\\ud83c\\ude01|\\ud83c\\ude1a|\\ud83c\\ude2f|\\ud83c\\ude32|\\ud83c\\ude33|\\ud83c\\ude34|\\ud83c\\ude35|\\ud83c\\ude36|\\ud83c\\ude38|\\ud83c\\ude39|\\ud83c\\ude3a|\\ud83c\\ude50|\\ud83c\\ude51|\\ud83c\\udf00|\\ud83c\\udf01|\\ud83c\\udf02|\\ud83c\\udf03|\\ud83c\\udf04|\\ud83c\\udf05|\\ud83c\\udf06|\\ud83c\\udf07|\\ud83c\\udf08|\\ud83c\\udf09|\\ud83c\\udf0a|\\ud83c\\udf0b|\\ud83c\\udf0c|\\ud83c\\udf0d|\\ud83c\\udf0e|\\ud83c\\udf0f|\\ud83c\\udf10|\\ud83c\\udf11|\\ud83c\\udf12|\\ud83c\\udf13|\\ud83c\\udf14|\\ud83c\\udf15|\\ud83c\\udf16|\\ud83c\\udf17|\\ud83c\\udf18|\\ud83c\\udf19|\\ud83c\\udf1a|\\ud83c\\udf1b|\\ud83c\\udf1c|\\ud83c\\udf1d|\\ud83c\\udf1e|\\ud83c\\udf1f|\\ud83c\\udf20|\\ud83c\\udf2d|\\ud83c\\udf2e|\\ud83c\\udf2f|\\ud83c\\udf30|\\ud83c\\udf31|\\ud83c\\udf32|\\ud83c\\udf33|\\ud83c\\udf34|\\ud83c\\udf35|\\ud83c\\udf37|\\ud83c\\udf38|\\ud83c\\udf39|\\ud83c\\udf3a|\\ud83c\\udf3b|\\ud83c\\udf3c|\\ud83c\\udf3d|\\ud83c\\udf3e|\\ud83c\\udf3f|\\ud83c\\udf40|\\ud83c\\udf41|\\ud83c\\udf42|\\ud83c\\udf43|\\ud83c\\udf44|\\ud83c\\udf45|\\ud83c\\udf46|\\ud83c\\udf47|\\ud83c\\udf48|\\ud83c\\udf49|\\ud83c\\udf4a|\\ud83c\\udf4b|\\ud83c\\udf4c|\\ud83c\\udf4d|\\ud83c\\udf4e|\\ud83c\\udf4f|\\ud83c\\udf50|\\ud83c\\udf51|\\ud83c\\udf52|\\ud83c\\udf53|\\ud83c\\udf54|\\ud83c\\udf55|\\ud83c\\udf56|\\ud83c\\udf57|\\ud83c\\udf58|\\ud83c\\udf59|\\ud83c\\udf5a|\\ud83c\\udf5b|\\ud83c\\udf5c|\\ud83c\\udf5d|\\ud83c\\udf5e|\\ud83c\\udf5f|\\ud83c\\udf60|\\ud83c\\udf61|\\ud83c\\udf62|\\ud83c\\udf63|\\ud83c\\udf64|\\ud83c\\udf65|\\ud83c\\udf66|\\ud83c\\udf67|\\ud83c\\udf68|\\ud83c\\udf69|\\ud83c\\udf6a|\\ud83c\\udf6b|\\ud83c\\udf6c|\\ud83c\\udf6d|\\ud83c\\udf6e|\\ud83c\\udf6f|\\ud83c\\udf70|\\ud83c\\udf71|\\ud83c\\udf72|\\ud83c\\udf73|\\ud83c\\udf74|\\ud83c\\udf75|\\ud83c\\udf76|\\ud83c\\udf77|\\ud83c\\udf78|\\ud83c\\udf79|\\ud83c\\udf7a|\\ud83c\\udf7b|\\ud83c\\udf7c|\\ud83c\\udf7e|\\ud83c\\udf7f|\\ud83c\\udf80|\\ud83c\\udf81|\\ud83c\\udf82|\\ud83c\\udf83|\\ud83c\\udf84|\\ud83c\\udf85|\\ud83c\\udf86|\\ud83c\\udf87|\\ud83c\\udf88|\\ud83c\\udf89|\\ud83c\\udf8a|\\ud83c\\udf8b|\\ud83c\\udf8c|\\ud83c\\udf8d|\\ud83c\\udf8e|\\ud83c\\udf8f|\\ud83c\\udf90|\\ud83c\\udf91|\\ud83c\\udf92|\\ud83c\\udf93|\\ud83c\\udfa0|\\ud83c\\udfa1|\\ud83c\\udfa2|\\ud83c\\udfa3|\\ud83c\\udfa4|\\ud83c\\udfa5|\\ud83c\\udfa6|\\ud83c\\udfa7|\\ud83c\\udfa8|\\ud83c\\udfa9|\\ud83c\\udfaa|\\ud83c\\udfab|\\ud83c\\udfac|\\ud83c\\udfad|\\ud83c\\udfae|\\ud83c\\udfaf|\\ud83c\\udfb0|\\ud83c\\udfb1|\\ud83c\\udfb2|\\ud83c\\udfb3|\\ud83c\\udfb4|\\ud83c\\udfb5|\\ud83c\\udfb6|\\ud83c\\udfb7|\\ud83c\\udfb8|\\ud83c\\udfb9|\\ud83c\\udfba|\\ud83c\\udfbb|\\ud83c\\udfbc|\\ud83c\\udfbd|\\ud83c\\udfbe|\\ud83c\\udfbf|\\ud83c\\udfc0|\\ud83c\\udfc1|\\ud83c\\udfc2|\\ud83c\\udfc3|\\ud83c\\udfc4|\\ud83c\\udfc5|\\ud83c\\udfc6|\\ud83c\\udfc7|\\ud83c\\udfc8|\\ud83c\\udfc9|\\ud83c\\udfca|\\ud83c\\udfcf|\\ud83c\\udfd0|\\ud83c\\udfd1|\\ud83c\\udfd2|\\ud83c\\udfd3|\\ud83c\\udfe0|\\ud83c\\udfe1|\\ud83c\\udfe2|\\ud83c\\udfe3|\\ud83c\\udfe4|\\ud83c\\udfe5|\\ud83c\\udfe6|\\ud83c\\udfe7|\\ud83c\\udfe8|\\ud83c\\udfe9|\\ud83c\\udfea|\\ud83c\\udfeb|\\ud83c\\udfec|\\ud83c\\udfed|\\ud83c\\udfee|\\ud83c\\udfef|\\ud83c\\udff0|\\ud83c\\udff4|\\ud83c\\udff8|\\ud83c\\udff9|\\ud83c\\udffa|\\ud83c\\udffb|\\ud83c\\udffc|\\ud83c\\udffd|\\ud83c\\udffe|\\ud83c\\udfff|\\ud83d\\udc00|\\ud83d\\udc01|\\ud83d\\udc02|\\ud83d\\udc03|\\ud83d\\udc04|\\ud83d\\udc05|\\ud83d\\udc06|\\ud83d\\udc07|\\ud83d\\udc08|\\ud83d\\udc09|\\ud83d\\udc0a|\\ud83d\\udc0b|\\ud83d\\udc0c|\\ud83d\\udc0d|\\ud83d\\udc0e|\\ud83d\\udc0f|\\ud83d\\udc10|\\ud83d\\udc11|\\ud83d\\udc12|\\ud83d\\udc13|\\ud83d\\udc14|\\ud83d\\udc15|\\ud83d\\udc16|\\ud83d\\udc17|\\ud83d\\udc18|\\ud83d\\udc19|\\ud83d\\udc1a|\\ud83d\\udc1b|\\ud83d\\udc1c|\\ud83d\\udc1d|\\ud83d\\udc1e|\\ud83d\\udc1f|\\ud83d\\udc20|\\ud83d\\udc21|\\ud83d\\udc22|\\ud83d\\udc23|\\ud83d\\udc24|\\ud83d\\udc25|\\ud83d\\udc26|\\ud83d\\udc27|\\ud83d\\udc28|\\ud83d\\udc29|\\ud83d\\udc2a|\\ud83d\\udc2b|\\ud83d\\udc2c|\\ud83d\\udc2d|\\ud83d\\udc2e|\\ud83d\\udc2f|\\ud83d\\udc30|\\ud83d\\udc31|\\ud83d\\udc32|\\ud83d\\udc33|\\ud83d\\udc34|\\ud83d\\udc35|\\ud83d\\udc36|\\ud83d\\udc37|\\ud83d\\udc38|\\ud83d\\udc39|\\ud83d\\udc3a|\\ud83d\\udc3b|\\ud83d\\udc3c|\\ud83d\\udc3d|\\ud83d\\udc3e|\\ud83d\\udc40|\\ud83d\\udc42|\\ud83d\\udc43|\\ud83d\\udc44|\\ud83d\\udc45|\\ud83d\\udc46|\\ud83d\\udc47|\\ud83d\\udc48|\\ud83d\\udc49|\\ud83d\\udc4a|\\ud83d\\udc4b|\\ud83d\\udc4c|\\ud83d\\udc4d|\\ud83d\\udc4e|\\ud83d\\udc4f|\\ud83d\\udc50|\\ud83d\\udc51|\\ud83d\\udc52|\\ud83d\\udc53|\\ud83d\\udc54|\\ud83d\\udc55|\\ud83d\\udc56|\\ud83d\\udc57|\\ud83d\\udc58|\\ud83d\\udc59|\\ud83d\\udc5a|\\ud83d\\udc5b|\\ud83d\\udc5c|\\ud83d\\udc5d|\\ud83d\\udc5e|\\ud83d\\udc5f|\\ud83d\\udc60|\\ud83d\\udc61|\\ud83d\\udc62|\\ud83d\\udc63|\\ud83d\\udc64|\\ud83d\\udc65|\\ud83d\\udc66|\\ud83d\\udc67|\\ud83d\\udc68|\\ud83d\\udc69|\\ud83d\\udc6a|\\ud83d\\udc6b|\\ud83d\\udc6c|\\ud83d\\udc6d|\\ud83d\\udc6e|\\ud83d\\udc6f|\\ud83d\\udc70|\\ud83d\\udc71|\\ud83d\\udc72|\\ud83d\\udc73|\\ud83d\\udc74|\\ud83d\\udc75|\\ud83d\\udc76|\\ud83d\\udc77|\\ud83d\\udc78|\\ud83d\\udc79|\\ud83d\\udc7a|\\ud83d\\udc7b|\\ud83d\\udc7c|\\ud83d\\udc7d|\\ud83d\\udc7e|\\ud83d\\udc7f|\\ud83d\\udc80|\\ud83d\\udc81|\\ud83d\\udc82|\\ud83d\\udc83|\\ud83d\\udc84|\\ud83d\\udc85|\\ud83d\\udc86|\\ud83d\\udc87|\\ud83d\\udc88|\\ud83d\\udc89|\\ud83d\\udc8a|\\ud83d\\udc8b|\\ud83d\\udc8c|\\ud83d\\udc8d|\\ud83d\\udc8e|\\ud83d\\udc8f|\\ud83d\\udc90|\\ud83d\\udc91|\\ud83d\\udc92|\\ud83d\\udc93|\\ud83d\\udc94|\\ud83d\\udc95|\\ud83d\\udc96|\\ud83d\\udc97|\\ud83d\\udc98|\\ud83d\\udc99|\\ud83d\\udc9a|\\ud83d\\udc9b|\\ud83d\\udc9c|\\ud83d\\udc9d|\\ud83d\\udc9e|\\ud83d\\udc9f|\\ud83d\\udca0|\\ud83d\\udca1|\\ud83d\\udca2|\\ud83d\\udca3|\\ud83d\\udca4|\\ud83d\\udca5|\\ud83d\\udca6|\\ud83d\\udca7|\\ud83d\\udca8|\\ud83d\\udca9|\\ud83d\\udcaa|\\ud83d\\udcab|\\ud83d\\udcac|\\ud83d\\udcad|\\ud83d\\udcae|\\ud83d\\udcaf|\\ud83d\\udcb0|\\ud83d\\udcb1|\\ud83d\\udcb2|\\ud83d\\udcb3|\\ud83d\\udcb4|\\ud83d\\udcb5|\\ud83d\\udcb6|\\ud83d\\udcb7|\\ud83d\\udcb8|\\ud83d\\udcb9|\\ud83d\\udcba|\\ud83d\\udcbb|\\ud83d\\udcbc|\\ud83d\\udcbd|\\ud83d\\udcbe|\\ud83d\\udcbf|\\ud83d\\udcc0|\\ud83d\\udcc1|\\ud83d\\udcc2|\\ud83d\\udcc3|\\ud83d\\udcc4|\\ud83d\\udcc5|\\ud83d\\udcc6|\\ud83d\\udcc7|\\ud83d\\udcc8|\\ud83d\\udcc9|\\ud83d\\udcca|\\ud83d\\udccb|\\ud83d\\udccc|\\ud83d\\udccd|\\ud83d\\udcce|\\ud83d\\udccf|\\ud83d\\udcd0|\\ud83d\\udcd1|\\ud83d\\udcd2|\\ud83d\\udcd3|\\ud83d\\udcd4|\\ud83d\\udcd5|\\ud83d\\udcd6|\\ud83d\\udcd7|\\ud83d\\udcd8|\\ud83d\\udcd9|\\ud83d\\udcda|\\ud83d\\udcdb|\\ud83d\\udcdc|\\ud83d\\udcdd|\\ud83d\\udcde|\\ud83d\\udcdf|\\ud83d\\udce0|\\ud83d\\udce1|\\ud83d\\udce2|\\ud83d\\udce3|\\ud83d\\udce4|\\ud83d\\udce5|\\ud83d\\udce6|\\ud83d\\udce7|\\ud83d\\udce8|\\ud83d\\udce9|\\ud83d\\udcea|\\ud83d\\udceb|\\ud83d\\udcec|\\ud83d\\udced|\\ud83d\\udcee|\\ud83d\\udcef|\\ud83d\\udcf0|\\ud83d\\udcf1|\\ud83d\\udcf2|\\ud83d\\udcf3|\\ud83d\\udcf4|\\ud83d\\udcf5|\\ud83d\\udcf6|\\ud83d\\udcf7|\\ud83d\\udcf8|\\ud83d\\udcf9|\\ud83d\\udcfa|\\ud83d\\udcfb|\\ud83d\\udcfc|\\ud83d\\udcff|\\ud83d\\udd00|\\ud83d\\udd01|\\ud83d\\udd02|\\ud83d\\udd03|\\ud83d\\udd04|\\ud83d\\udd05|\\ud83d\\udd06|\\ud83d\\udd07|\\ud83d\\udd08|\\ud83d\\udd09|\\ud83d\\udd0a|\\ud83d\\udd0b|\\ud83d\\udd0c|\\ud83d\\udd0d|\\ud83d\\udd0e|\\ud83d\\udd0f|\\ud83d\\udd10|\\ud83d\\udd11|\\ud83d\\udd12|\\ud83d\\udd13|\\ud83d\\udd14|\\ud83d\\udd15|\\ud83d\\udd16|\\ud83d\\udd17|\\ud83d\\udd18|\\ud83d\\udd19|\\ud83d\\udd1a|\\ud83d\\udd1b|\\ud83d\\udd1c|\\ud83d\\udd1d|\\ud83d\\udd1e|\\ud83d\\udd1f|\\ud83d\\udd20|\\ud83d\\udd21|\\ud83d\\udd22|\\ud83d\\udd23|\\ud83d\\udd24|\\ud83d\\udd25|\\ud83d\\udd26|\\ud83d\\udd27|\\ud83d\\udd28|\\ud83d\\udd29|\\ud83d\\udd2a|\\ud83d\\udd2b|\\ud83d\\udd2c|\\ud83d\\udd2d|\\ud83d\\udd2e|\\ud83d\\udd2f|\\ud83d\\udd30|\\ud83d\\udd31|\\ud83d\\udd32|\\ud83d\\udd33|\\ud83d\\udd34|\\ud83d\\udd35|\\ud83d\\udd36|\\ud83d\\udd37|\\ud83d\\udd38|\\ud83d\\udd39|\\ud83d\\udd3a|\\ud83d\\udd3b|\\ud83d\\udd3c|\\ud83d\\udd3d|\\ud83d\\udd4b|\\ud83d\\udd4c|\\ud83d\\udd4d|\\ud83d\\udd4e|\\ud83d\\udd50|\\ud83d\\udd51|\\ud83d\\udd52|\\ud83d\\udd53|\\ud83d\\udd54|\\ud83d\\udd55|\\ud83d\\udd56|\\ud83d\\udd57|\\ud83d\\udd58|\\ud83d\\udd59|\\ud83d\\udd5a|\\ud83d\\udd5b|\\ud83d\\udd5c|\\ud83d\\udd5d|\\ud83d\\udd5e|\\ud83d\\udd5f|\\ud83d\\udd60|\\ud83d\\udd61|\\ud83d\\udd62|\\ud83d\\udd63|\\ud83d\\udd64|\\ud83d\\udd65|\\ud83d\\udd66|\\ud83d\\udd67|\\ud83d\\udd7a|\\ud83d\\udd95|\\ud83d\\udd96|\\ud83d\\udda4|\\ud83d\\uddfb|\\ud83d\\uddfc|\\ud83d\\uddfd|\\ud83d\\uddfe|\\ud83d\\uddff|\\ud83d\\ude00|\\ud83d\\ude01|\\ud83d\\ude02|\\ud83d\\ude03|\\ud83d\\ude04|\\ud83d\\ude05|\\ud83d\\ude06|\\ud83d\\ude07|\\ud83d\\ude08|\\ud83d\\ude09|\\ud83d\\ude0a|\\ud83d\\ude0b|\\ud83d\\ude0c|\\ud83d\\ude0d|\\ud83d\\ude0e|\\ud83d\\ude0f|\\ud83d\\ude10|\\ud83d\\ude11|\\ud83d\\ude12|\\ud83d\\ude13|\\ud83d\\ude14|\\ud83d\\ude15|\\ud83d\\ude16|\\ud83d\\ude17|\\ud83d\\ude18|\\ud83d\\ude19|\\ud83d\\ude1a|\\ud83d\\ude1b|\\ud83d\\ude1c|\\ud83d\\ude1d|\\ud83d\\ude1e|\\ud83d\\ude1f|\\ud83d\\ude20|\\ud83d\\ude21|\\ud83d\\ude22|\\ud83d\\ude23|\\ud83d\\ude24|\\ud83d\\ude25|\\ud83d\\ude26|\\ud83d\\ude27|\\ud83d\\ude28|\\ud83d\\ude29|\\ud83d\\ude2a|\\ud83d\\ude2b|\\ud83d\\ude2c|\\ud83d\\ude2d|\\ud83d\\ude2e|\\ud83d\\ude2f|\\ud83d\\ude30|\\ud83d\\ude31|\\ud83d\\ude32|\\ud83d\\ude33|\\ud83d\\ude34|\\ud83d\\ude35|\\ud83d\\ude36|\\ud83d\\ude37|\\ud83d\\ude38|\\ud83d\\ude39|\\ud83d\\ude3a|\\ud83d\\ude3b|\\ud83d\\ude3c|\\ud83d\\ude3d|\\ud83d\\ude3e|\\ud83d\\ude3f|\\ud83d\\ude40|\\ud83d\\ude41|\\ud83d\\ude42|\\ud83d\\ude43|\\ud83d\\ude44|\\ud83d\\ude45|\\ud83d\\ude46|\\ud83d\\ude47|\\ud83d\\ude48|\\ud83d\\ude49|\\ud83d\\ude4a|\\ud83d\\ude4b|\\ud83d\\ude4c|\\ud83d\\ude4d|\\ud83d\\ude4e|\\ud83d\\ude4f|\\ud83d\\ude80|\\ud83d\\ude81|\\ud83d\\ude82|\\ud83d\\ude83|\\ud83d\\ude84|\\ud83d\\ude85|\\ud83d\\ude86|\\ud83d\\ude87|\\ud83d\\ude88|\\ud83d\\ude89|\\ud83d\\ude8a|\\ud83d\\ude8b|\\ud83d\\ude8c|\\ud83d\\ude8d|\\ud83d\\ude8e|\\ud83d\\ude8f|\\ud83d\\ude90|\\ud83d\\ude91|\\ud83d\\ude92|\\ud83d\\ude93|\\ud83d\\ude94|\\ud83d\\ude95|\\ud83d\\ude96|\\ud83d\\ude97|\\ud83d\\ude98|\\ud83d\\ude99|\\ud83d\\ude9a|\\ud83d\\ude9b|\\ud83d\\ude9c|\\ud83d\\ude9d|\\ud83d\\ude9e|\\ud83d\\ude9f|\\ud83d\\udea0|\\ud83d\\udea1|\\ud83d\\udea2|\\ud83d\\udea3|\\ud83d\\udea4|\\ud83d\\udea5|\\ud83d\\udea6|\\ud83d\\udea7|\\ud83d\\udea8|\\ud83d\\udea9|\\ud83d\\udeaa|\\ud83d\\udeab|\\ud83d\\udeac|\\ud83d\\udead|\\ud83d\\udeae|\\ud83d\\udeaf|\\ud83d\\udeb0|\\ud83d\\udeb1|\\ud83d\\udeb2|\\ud83d\\udeb3|\\ud83d\\udeb4|\\ud83d\\udeb5|\\ud83d\\udeb6|\\ud83d\\udeb7|\\ud83d\\udeb8|\\ud83d\\udeb9|\\ud83d\\udeba|\\ud83d\\udebb|\\ud83d\\udebc|\\ud83d\\udebd|\\ud83d\\udebe|\\ud83d\\udebf|\\ud83d\\udec0|\\ud83d\\udec1|\\ud83d\\udec2|\\ud83d\\udec3|\\ud83d\\udec4|\\ud83d\\udec5|\\ud83d\\udecc|\\ud83d\\uded0|\\ud83d\\uded1|\\ud83d\\uded2|\\ud83d\\uded5|\\ud83d\\uded6|\\ud83d\\uded7|\\ud83d\\udedd|\\ud83d\\udede|\\ud83d\\udedf|\\ud83d\\udeeb|\\ud83d\\udeec|\\ud83d\\udef4|\\ud83d\\udef5|\\ud83d\\udef6|\\ud83d\\udef7|\\ud83d\\udef8|\\ud83d\\udef9|\\ud83d\\udefa|\\ud83d\\udefb|\\ud83d\\udefc|\\ud83d\\udfe0|\\ud83d\\udfe1|\\ud83d\\udfe2|\\ud83d\\udfe3|\\ud83d\\udfe4|\\ud83d\\udfe5|\\ud83d\\udfe6|\\ud83d\\udfe7|\\ud83d\\udfe8|\\ud83d\\udfe9|\\ud83d\\udfea|\\ud83d\\udfeb|\\ud83d\\udff0|\\ud83e\\udd0c|\\ud83e\\udd0d|\\ud83e\\udd0e|\\ud83e\\udd0f|\\ud83e\\udd10|\\ud83e\\udd11|\\ud83e\\udd12|\\ud83e\\udd13|\\ud83e\\udd14|\\ud83e\\udd15|\\ud83e\\udd16|\\ud83e\\udd17|\\ud83e\\udd18|\\ud83e\\udd19|\\ud83e\\udd1a|\\ud83e\\udd1b|\\ud83e\\udd1c|\\ud83e\\udd1d|\\ud83e\\udd1e|\\ud83e\\udd1f|\\ud83e\\udd20|\\ud83e\\udd21|\\ud83e\\udd22|\\ud83e\\udd23|\\ud83e\\udd24|\\ud83e\\udd25|\\ud83e\\udd26|\\ud83e\\udd27|\\ud83e\\udd28|\\ud83e\\udd29|\\ud83e\\udd2a|\\ud83e\\udd2b|\\ud83e\\udd2c|\\ud83e\\udd2d|\\ud83e\\udd2e|\\ud83e\\udd2f|\\ud83e\\udd30|\\ud83e\\udd31|\\ud83e\\udd32|\\ud83e\\udd33|\\ud83e\\udd34|\\ud83e\\udd35|\\ud83e\\udd36|\\ud83e\\udd37|\\ud83e\\udd38|\\ud83e\\udd39|\\ud83e\\udd3a|\\ud83e\\udd3c|\\ud83e\\udd3d|\\ud83e\\udd3e|\\ud83e\\udd3f|\\ud83e\\udd40|\\ud83e\\udd41|\\ud83e\\udd42|\\ud83e\\udd43|\\ud83e\\udd44|\\ud83e\\udd45|\\ud83e\\udd47|\\ud83e\\udd48|\\ud83e\\udd49|\\ud83e\\udd4a|\\ud83e\\udd4b|\\ud83e\\udd4c|\\ud83e\\udd4d|\\ud83e\\udd4e|\\ud83e\\udd4f|\\ud83e\\udd50|\\ud83e\\udd51|\\ud83e\\udd52|\\ud83e\\udd53|\\ud83e\\udd54|\\ud83e\\udd55|\\ud83e\\udd56|\\ud83e\\udd57|\\ud83e\\udd58|\\ud83e\\udd59|\\ud83e\\udd5a|\\ud83e\\udd5b|\\ud83e\\udd5c|\\ud83e\\udd5d|\\ud83e\\udd5e|\\ud83e\\udd5f|\\ud83e\\udd60|\\ud83e\\udd61|\\ud83e\\udd62|\\ud83e\\udd63|\\ud83e\\udd64|\\ud83e\\udd65|\\ud83e\\udd66|\\ud83e\\udd67|\\ud83e\\udd68|\\ud83e\\udd69|\\ud83e\\udd6a|\\ud83e\\udd6b|\\ud83e\\udd6c|\\ud83e\\udd6d|\\ud83e\\udd6e|\\ud83e\\udd6f|\\ud83e\\udd70|\\ud83e\\udd71|\\ud83e\\udd72|\\ud83e\\udd73|\\ud83e\\udd74|\\ud83e\\udd75|\\ud83e\\udd76|\\ud83e\\udd77|\\ud83e\\udd78|\\ud83e\\udd79|\\ud83e\\udd7a|\\ud83e\\udd7b|\\ud83e\\udd7c|\\ud83e\\udd7d|\\ud83e\\udd7e|\\ud83e\\udd7f|\\ud83e\\udd80|\\ud83e\\udd81|\\ud83e\\udd82|\\ud83e\\udd83|\\ud83e\\udd84|\\ud83e\\udd85|\\ud83e\\udd86|\\ud83e\\udd87|\\ud83e\\udd88|\\ud83e\\udd89|\\ud83e\\udd8a|\\ud83e\\udd8b|\\ud83e\\udd8c|\\ud83e\\udd8d|\\ud83e\\udd8e|\\ud83e\\udd8f|\\ud83e\\udd90|\\ud83e\\udd91|\\ud83e\\udd92|\\ud83e\\udd93|\\ud83e\\udd94|\\ud83e\\udd95|\\ud83e\\udd96|\\ud83e\\udd97|\\ud83e\\udd98|\\ud83e\\udd99|\\ud83e\\udd9a|\\ud83e\\udd9b|\\ud83e\\udd9c|\\ud83e\\udd9d|\\ud83e\\udd9e|\\ud83e\\udd9f|\\ud83e\\udda0|\\ud83e\\udda1|\\ud83e\\udda2|\\ud83e\\udda3|\\ud83e\\udda4|\\ud83e\\udda5|\\ud83e\\udda6|\\ud83e\\udda7|\\ud83e\\udda8|\\ud83e\\udda9|\\ud83e\\uddaa|\\ud83e\\uddab|\\ud83e\\uddac|\\ud83e\\uddad|\\ud83e\\uddae|\\ud83e\\uddaf|\\ud83e\\uddb0|\\ud83e\\uddb1|\\ud83e\\uddb2|\\ud83e\\uddb3|\\ud83e\\uddb4|\\ud83e\\uddb5|\\ud83e\\uddb6|\\ud83e\\uddb7|\\ud83e\\uddb8|\\ud83e\\uddb9|\\ud83e\\uddba|\\ud83e\\uddbb|\\ud83e\\uddbc|\\ud83e\\uddbd|\\ud83e\\uddbe|\\ud83e\\uddbf|\\ud83e\\uddc0|\\ud83e\\uddc1|\\ud83e\\uddc2|\\ud83e\\uddc3|\\ud83e\\uddc4|\\ud83e\\uddc5|\\ud83e\\uddc6|\\ud83e\\uddc7|\\ud83e\\uddc8|\\ud83e\\uddc9|\\ud83e\\uddca|\\ud83e\\uddcb|\\ud83e\\uddcc|\\ud83e\\uddcd|\\ud83e\\uddce|\\ud83e\\uddcf|\\ud83e\\uddd0|\\ud83e\\uddd1|\\ud83e\\uddd2|\\ud83e\\uddd3|\\ud83e\\uddd4|\\ud83e\\uddd5|\\ud83e\\uddd6|\\ud83e\\uddd7|\\ud83e\\uddd8|\\ud83e\\uddd9|\\ud83e\\uddda|\\ud83e\\udddb|\\ud83e\\udddc|\\ud83e\\udddd|\\ud83e\\uddde|\\ud83e\\udddf|\\ud83e\\udde0|\\ud83e\\udde1|\\ud83e\\udde2|\\ud83e\\udde3|\\ud83e\\udde4|\\ud83e\\udde5|\\ud83e\\udde6|\\ud83e\\udde7|\\ud83e\\udde8|\\ud83e\\udde9|\\ud83e\\uddea|\\ud83e\\uddeb|\\ud83e\\uddec|\\ud83e\\udded|\\ud83e\\uddee|\\ud83e\\uddef|\\ud83e\\uddf0|\\ud83e\\uddf1|\\ud83e\\uddf2|\\ud83e\\uddf3|\\ud83e\\uddf4|\\ud83e\\uddf5|\\ud83e\\uddf6|\\ud83e\\uddf7|\\ud83e\\uddf8|\\ud83e\\uddf9|\\ud83e\\uddfa|\\ud83e\\uddfb|\\ud83e\\uddfc|\\ud83e\\uddfd|\\ud83e\\uddfe|\\ud83e\\uddff|\\ud83e\\ude70|\\ud83e\\ude71|\\ud83e\\ude72|\\ud83e\\ude73|\\ud83e\\ude74|\\ud83e\\ude78|\\ud83e\\ude79|\\ud83e\\ude7a|\\ud83e\\ude7b|\\ud83e\\ude7c|\\ud83e\\ude80|\\ud83e\\ude81|\\ud83e\\ude82|\\ud83e\\ude83|\\ud83e\\ude84|\\ud83e\\ude85|\\ud83e\\ude86|\\ud83e\\ude90|\\ud83e\\ude91|\\ud83e\\ude92|\\ud83e\\ude93|\\ud83e\\ude94|\\ud83e\\ude95|\\ud83e\\ude96|\\ud83e\\ude97|\\ud83e\\ude98|\\ud83e\\ude99|\\ud83e\\ude9a|\\ud83e\\ude9b|\\ud83e\\ude9c|\\ud83e\\ude9d|\\ud83e\\ude9e|\\ud83e\\ude9f|\\ud83e\\udea0|\\ud83e\\udea1|\\ud83e\\udea2|\\ud83e\\udea3|\\ud83e\\udea4|\\ud83e\\udea5|\\ud83e\\udea6|\\ud83e\\udea7|\\ud83e\\udea8|\\ud83e\\udea9|\\ud83e\\udeaa|\\ud83e\\udeab|\\ud83e\\udeac|\\ud83e\\udeb0|\\ud83e\\udeb1|\\ud83e\\udeb2|\\ud83e\\udeb3|\\ud83e\\udeb4|\\ud83e\\udeb5|\\ud83e\\udeb6|\\ud83e\\udeb7|\\ud83e\\udeb8|\\ud83e\\udeb9|\\ud83e\\udeba|\\ud83e\\udec0|\\ud83e\\udec1|\\ud83e\\udec2|\\ud83e\\udec3|\\ud83e\\udec4|\\ud83e\\udec5|\\ud83e\\uded0|\\ud83e\\uded1|\\ud83e\\uded2|\\ud83e\\uded3|\\ud83e\\uded4|\\ud83e\\uded5|\\ud83e\\uded6|\\ud83e\\uded7|\\ud83e\\uded8|\\ud83e\\uded9|\\ud83e\\udee0|\\ud83e\\udee1|\\ud83e\\udee2|\\ud83e\\udee3|\\ud83e\\udee4|\\ud83e\\udee5|\\ud83e\\udee6|\\ud83e\\udee7|\\ud83e\\udef0|\\ud83e\\udef1|\\ud83e\\udef2|\\ud83e\\udef3|\\ud83e\\udef4|\\ud83e\\udef5|\\ud83e\\udef6)(?!︎)️?)|(?:\\#|\\*|0|1|2|3|4|5|6|7|8|9|©|®|‼|⁉|™|ℹ|↔|↕|↖|↗|↘|↙|↩|↪|⌚|⌛|⌨|⏏|⏩|⏪|⏫|⏬|⏭|⏮|⏯|⏰|⏱|⏲|⏳|⏸|⏹|⏺|Ⓜ|▪|▫|▶|◀|◻|◼|◽|◾|☀|☁|☂|☃|☄|☎|☑|☔|☕|☘|☝|☠|☢|☣|☦|☪|☮|☯|☸|☹|☺|♀|♂|♈|♉|♊|♋|♌|♍|♎|♏|♐|♑|♒|♓|♟|♠|♣|♥|♦|♨|♻|♾|♿|⚒|⚓|⚔|⚕|⚖|⚗|⚙|⚛|⚜|⚠|⚡|⚧|⚪|⚫|⚰|⚱|⚽|⚾|⛄|⛅|⛈|⛎|⛏|⛑|⛓|⛔|⛩|⛪|⛰|⛱|⛲|⛳|⛴|⛵|⛷|⛸|⛹|⛺|⛽|✂|✅|✈|✉|✊|✋|✌|✍|✏|✒|✔|✖|✝|✡|✨|✳|✴|❄|❇|❌|❎|❓|❔|❕|❗|❣|❤|➕|➖|➗|➡|➰|➿|⤴|⤵|⬅|⬆|⬇|⬛|⬜|⭐|⭕|〰|〽|㊗|㊙|\\ud83c\\udc04|\\ud83c\\udccf|\\ud83c\\udd70|\\ud83c\\udd71|\\ud83c\\udd7e|\\ud83c\\udd7f|\\ud83c\\udd8e|\\ud83c\\udd91|\\ud83c\\udd92|\\ud83c\\udd93|\\ud83c\\udd94|\\ud83c\\udd95|\\ud83c\\udd96|\\ud83c\\udd97|\\ud83c\\udd98|\\ud83c\\udd99|\\ud83c\\udd9a|\\ud83c\\udde6|\\ud83c\\udde7|\\ud83c\\udde8|\\ud83c\\udde9|\\ud83c\\uddea|\\ud83c\\uddeb|\\ud83c\\uddec|\\ud83c\\udded|\\ud83c\\uddee|\\ud83c\\uddef|\\ud83c\\uddf0|\\ud83c\\uddf1|\\ud83c\\uddf2|\\ud83c\\uddf3|\\ud83c\\uddf4|\\ud83c\\uddf5|\\ud83c\\uddf6|\\ud83c\\uddf7|\\ud83c\\uddf8|\\ud83c\\uddf9|\\ud83c\\uddfa|\\ud83c\\uddfb|\\ud83c\\uddfc|\\ud83c\\uddfd|\\ud83c\\uddfe|\\ud83c\\uddff|\\ud83c\\ude01|\\ud83c\\ude02|\\ud83c\\ude1a|\\ud83c\\ude2f|\\ud83c\\ude32|\\ud83c\\ude33|\\ud83c\\ude34|\\ud83c\\ude35|\\ud83c\\ude36|\\ud83c\\ude37|\\ud83c\\ude38|\\ud83c\\ude39|\\ud83c\\ude3a|\\ud83c\\ude50|\\ud83c\\ude51|\\ud83c\\udf00|\\ud83c\\udf01|\\ud83c\\udf02|\\ud83c\\udf03|\\ud83c\\udf04|\\ud83c\\udf05|\\ud83c\\udf06|\\ud83c\\udf07|\\ud83c\\udf08|\\ud83c\\udf09|\\ud83c\\udf0a|\\ud83c\\udf0b|\\ud83c\\udf0c|\\ud83c\\udf0d|\\ud83c\\udf0e|\\ud83c\\udf0f|\\ud83c\\udf10|\\ud83c\\udf11|\\ud83c\\udf12|\\ud83c\\udf13|\\ud83c\\udf14|\\ud83c\\udf15|\\ud83c\\udf16|\\ud83c\\udf17|\\ud83c\\udf18|\\ud83c\\udf19|\\ud83c\\udf1a|\\ud83c\\udf1b|\\ud83c\\udf1c|\\ud83c\\udf1d|\\ud83c\\udf1e|\\ud83c\\udf1f|\\ud83c\\udf20|\\ud83c\\udf21|\\ud83c\\udf24|\\ud83c\\udf25|\\ud83c\\udf26|\\ud83c\\udf27|\\ud83c\\udf28|\\ud83c\\udf29|\\ud83c\\udf2a|\\ud83c\\udf2b|\\ud83c\\udf2c|\\ud83c\\udf2d|\\ud83c\\udf2e|\\ud83c\\udf2f|\\ud83c\\udf30|\\ud83c\\udf31|\\ud83c\\udf32|\\ud83c\\udf33|\\ud83c\\udf34|\\ud83c\\udf35|\\ud83c\\udf36|\\ud83c\\udf37|\\ud83c\\udf38|\\ud83c\\udf39|\\ud83c\\udf3a|\\ud83c\\udf3b|\\ud83c\\udf3c|\\ud83c\\udf3d|\\ud83c\\udf3e|\\ud83c\\udf3f|\\ud83c\\udf40|\\ud83c\\udf41|\\ud83c\\udf42|\\ud83c\\udf43|\\ud83c\\udf44|\\ud83c\\udf45|\\ud83c\\udf46|\\ud83c\\udf47|\\ud83c\\udf48|\\ud83c\\udf49|\\ud83c\\udf4a|\\ud83c\\udf4b|\\ud83c\\udf4c|\\ud83c\\udf4d|\\ud83c\\udf4e|\\ud83c\\udf4f|\\ud83c\\udf50|\\ud83c\\udf51|\\ud83c\\udf52|\\ud83c\\udf53|\\ud83c\\udf54|\\ud83c\\udf55|\\ud83c\\udf56|\\ud83c\\udf57|\\ud83c\\udf58|\\ud83c\\udf59|\\ud83c\\udf5a|\\ud83c\\udf5b|\\ud83c\\udf5c|\\ud83c\\udf5d|\\ud83c\\udf5e|\\ud83c\\udf5f|\\ud83c\\udf60|\\ud83c\\udf61|\\ud83c\\udf62|\\ud83c\\udf63|\\ud83c\\udf64|\\ud83c\\udf65|\\ud83c\\udf66|\\ud83c\\udf67|\\ud83c\\udf68|\\ud83c\\udf69|\\ud83c\\udf6a|\\ud83c\\udf6b|\\ud83c\\udf6c|\\ud83c\\udf6d|\\ud83c\\udf6e|\\ud83c\\udf6f|\\ud83c\\udf70|\\ud83c\\udf71|\\ud83c\\udf72|\\ud83c\\udf73|\\ud83c\\udf74|\\ud83c\\udf75|\\ud83c\\udf76|\\ud83c\\udf77|\\ud83c\\udf78|\\ud83c\\udf79|\\ud83c\\udf7a|\\ud83c\\udf7b|\\ud83c\\udf7c|\\ud83c\\udf7d|\\ud83c\\udf7e|\\ud83c\\udf7f|\\ud83c\\udf80|\\ud83c\\udf81|\\ud83c\\udf82|\\ud83c\\udf83|\\ud83c\\udf84|\\ud83c\\udf85|\\ud83c\\udf86|\\ud83c\\udf87|\\ud83c\\udf88|\\ud83c\\udf89|\\ud83c\\udf8a|\\ud83c\\udf8b|\\ud83c\\udf8c|\\ud83c\\udf8d|\\ud83c\\udf8e|\\ud83c\\udf8f|\\ud83c\\udf90|\\ud83c\\udf91|\\ud83c\\udf92|\\ud83c\\udf93|\\ud83c\\udf96|\\ud83c\\udf97|\\ud83c\\udf99|\\ud83c\\udf9a|\\ud83c\\udf9b|\\ud83c\\udf9e|\\ud83c\\udf9f|\\ud83c\\udfa0|\\ud83c\\udfa1|\\ud83c\\udfa2|\\ud83c\\udfa3|\\ud83c\\udfa4|\\ud83c\\udfa5|\\ud83c\\udfa6|\\ud83c\\udfa7|\\ud83c\\udfa8|\\ud83c\\udfa9|\\ud83c\\udfaa|\\ud83c\\udfab|\\ud83c\\udfac|\\ud83c\\udfad|\\ud83c\\udfae|\\ud83c\\udfaf|\\ud83c\\udfb0|\\ud83c\\udfb1|\\ud83c\\udfb2|\\ud83c\\udfb3|\\ud83c\\udfb4|\\ud83c\\udfb5|\\ud83c\\udfb6|\\ud83c\\udfb7|\\ud83c\\udfb8|\\ud83c\\udfb9|\\ud83c\\udfba|\\ud83c\\udfbb|\\ud83c\\udfbc|\\ud83c\\udfbd|\\ud83c\\udfbe|\\ud83c\\udfbf|\\ud83c\\udfc0|\\ud83c\\udfc1|\\ud83c\\udfc2|\\ud83c\\udfc3|\\ud83c\\udfc4|\\ud83c\\udfc5|\\ud83c\\udfc6|\\ud83c\\udfc7|\\ud83c\\udfc8|\\ud83c\\udfc9|\\ud83c\\udfca|\\ud83c\\udfcb|\\ud83c\\udfcc|\\ud83c\\udfcd|\\ud83c\\udfce|\\ud83c\\udfcf|\\ud83c\\udfd0|\\ud83c\\udfd1|\\ud83c\\udfd2|\\ud83c\\udfd3|\\ud83c\\udfd4|\\ud83c\\udfd5|\\ud83c\\udfd6|\\ud83c\\udfd7|\\ud83c\\udfd8|\\ud83c\\udfd9|\\ud83c\\udfda|\\ud83c\\udfdb|\\ud83c\\udfdc|\\ud83c\\udfdd|\\ud83c\\udfde|\\ud83c\\udfdf|\\ud83c\\udfe0|\\ud83c\\udfe1|\\ud83c\\udfe2|\\ud83c\\udfe3|\\ud83c\\udfe4|\\ud83c\\udfe5|\\ud83c\\udfe6|\\ud83c\\udfe7|\\ud83c\\udfe8|\\ud83c\\udfe9|\\ud83c\\udfea|\\ud83c\\udfeb|\\ud83c\\udfec|\\ud83c\\udfed|\\ud83c\\udfee|\\ud83c\\udfef|\\ud83c\\udff0|\\ud83c\\udff3|\\ud83c\\udff4|\\ud83c\\udff5|\\ud83c\\udff7|\\ud83c\\udff8|\\ud83c\\udff9|\\ud83c\\udffa|\\ud83c\\udffb|\\ud83c\\udffc|\\ud83c\\udffd|\\ud83c\\udffe|\\ud83c\\udfff|\\ud83d\\udc00|\\ud83d\\udc01|\\ud83d\\udc02|\\ud83d\\udc03|\\ud83d\\udc04|\\ud83d\\udc05|\\ud83d\\udc06|\\ud83d\\udc07|\\ud83d\\udc08|\\ud83d\\udc09|\\ud83d\\udc0a|\\ud83d\\udc0b|\\ud83d\\udc0c|\\ud83d\\udc0d|\\ud83d\\udc0e|\\ud83d\\udc0f|\\ud83d\\udc10|\\ud83d\\udc11|\\ud83d\\udc12|\\ud83d\\udc13|\\ud83d\\udc14|\\ud83d\\udc15|\\ud83d\\udc16|\\ud83d\\udc17|\\ud83d\\udc18|\\ud83d\\udc19|\\ud83d\\udc1a|\\ud83d\\udc1b|\\ud83d\\udc1c|\\ud83d\\udc1d|\\ud83d\\udc1e|\\ud83d\\udc1f|\\ud83d\\udc20|\\ud83d\\udc21|\\ud83d\\udc22|\\ud83d\\udc23|\\ud83d\\udc24|\\ud83d\\udc25|\\ud83d\\udc26|\\ud83d\\udc27|\\ud83d\\udc28|\\ud83d\\udc29|\\ud83d\\udc2a|\\ud83d\\udc2b|\\ud83d\\udc2c|\\ud83d\\udc2d|\\ud83d\\udc2e|\\ud83d\\udc2f|\\ud83d\\udc30|\\ud83d\\udc31|\\ud83d\\udc32|\\ud83d\\udc33|\\ud83d\\udc34|\\ud83d\\udc35|\\ud83d\\udc36|\\ud83d\\udc37|\\ud83d\\udc38|\\ud83d\\udc39|\\ud83d\\udc3a|\\ud83d\\udc3b|\\ud83d\\udc3c|\\ud83d\\udc3d|\\ud83d\\udc3e|\\ud83d\\udc3f|\\ud83d\\udc40|\\ud83d\\udc41|\\ud83d\\udc42|\\ud83d\\udc43|\\ud83d\\udc44|\\ud83d\\udc45|\\ud83d\\udc46|\\ud83d\\udc47|\\ud83d\\udc48|\\ud83d\\udc49|\\ud83d\\udc4a|\\ud83d\\udc4b|\\ud83d\\udc4c|\\ud83d\\udc4d|\\ud83d\\udc4e|\\ud83d\\udc4f|\\ud83d\\udc50|\\ud83d\\udc51|\\ud83d\\udc52|\\ud83d\\udc53|\\ud83d\\udc54|\\ud83d\\udc55|\\ud83d\\udc56|\\ud83d\\udc57|\\ud83d\\udc58|\\ud83d\\udc59|\\ud83d\\udc5a|\\ud83d\\udc5b|\\ud83d\\udc5c|\\ud83d\\udc5d|\\ud83d\\udc5e|\\ud83d\\udc5f|\\ud83d\\udc60|\\ud83d\\udc61|\\ud83d\\udc62|\\ud83d\\udc63|\\ud83d\\udc64|\\ud83d\\udc65|\\ud83d\\udc66|\\ud83d\\udc67|\\ud83d\\udc68|\\ud83d\\udc69|\\ud83d\\udc6a|\\ud83d\\udc6b|\\ud83d\\udc6c|\\ud83d\\udc6d|\\ud83d\\udc6e|\\ud83d\\udc6f|\\ud83d\\udc70|\\ud83d\\udc71|\\ud83d\\udc72|\\ud83d\\udc73|\\ud83d\\udc74|\\ud83d\\udc75|\\ud83d\\udc76|\\ud83d\\udc77|\\ud83d\\udc78|\\ud83d\\udc79|\\ud83d\\udc7a|\\ud83d\\udc7b|\\ud83d\\udc7c|\\ud83d\\udc7d|\\ud83d\\udc7e|\\ud83d\\udc7f|\\ud83d\\udc80|\\ud83d\\udc81|\\ud83d\\udc82|\\ud83d\\udc83|\\ud83d\\udc84|\\ud83d\\udc85|\\ud83d\\udc86|\\ud83d\\udc87|\\ud83d\\udc88|\\ud83d\\udc89|\\ud83d\\udc8a|\\ud83d\\udc8b|\\ud83d\\udc8c|\\ud83d\\udc8d|\\ud83d\\udc8e|\\ud83d\\udc8f|\\ud83d\\udc90|\\ud83d\\udc91|\\ud83d\\udc92|\\ud83d\\udc93|\\ud83d\\udc94|\\ud83d\\udc95|\\ud83d\\udc96|\\ud83d\\udc97|\\ud83d\\udc98|\\ud83d\\udc99|\\ud83d\\udc9a|\\ud83d\\udc9b|\\ud83d\\udc9c|\\ud83d\\udc9d|\\ud83d\\udc9e|\\ud83d\\udc9f|\\ud83d\\udca0|\\ud83d\\udca1|\\ud83d\\udca2|\\ud83d\\udca3|\\ud83d\\udca4|\\ud83d\\udca5|\\ud83d\\udca6|\\ud83d\\udca7|\\ud83d\\udca8|\\ud83d\\udca9|\\ud83d\\udcaa|\\ud83d\\udcab|\\ud83d\\udcac|\\ud83d\\udcad|\\ud83d\\udcae|\\ud83d\\udcaf|\\ud83d\\udcb0|\\ud83d\\udcb1|\\ud83d\\udcb2|\\ud83d\\udcb3|\\ud83d\\udcb4|\\ud83d\\udcb5|\\ud83d\\udcb6|\\ud83d\\udcb7|\\ud83d\\udcb8|\\ud83d\\udcb9|\\ud83d\\udcba|\\ud83d\\udcbb|\\ud83d\\udcbc|\\ud83d\\udcbd|\\ud83d\\udcbe|\\ud83d\\udcbf|\\ud83d\\udcc0|\\ud83d\\udcc1|\\ud83d\\udcc2|\\ud83d\\udcc3|\\ud83d\\udcc4|\\ud83d\\udcc5|\\ud83d\\udcc6|\\ud83d\\udcc7|\\ud83d\\udcc8|\\ud83d\\udcc9|\\ud83d\\udcca|\\ud83d\\udccb|\\ud83d\\udccc|\\ud83d\\udccd|\\ud83d\\udcce|\\ud83d\\udccf|\\ud83d\\udcd0|\\ud83d\\udcd1|\\ud83d\\udcd2|\\ud83d\\udcd3|\\ud83d\\udcd4|\\ud83d\\udcd5|\\ud83d\\udcd6|\\ud83d\\udcd7|\\ud83d\\udcd8|\\ud83d\\udcd9|\\ud83d\\udcda|\\ud83d\\udcdb|\\ud83d\\udcdc|\\ud83d\\udcdd|\\ud83d\\udcde|\\ud83d\\udcdf|\\ud83d\\udce0|\\ud83d\\udce1|\\ud83d\\udce2|\\ud83d\\udce3|\\ud83d\\udce4|\\ud83d\\udce5|\\ud83d\\udce6|\\ud83d\\udce7|\\ud83d\\udce8|\\ud83d\\udce9|\\ud83d\\udcea|\\ud83d\\udceb|\\ud83d\\udcec|\\ud83d\\udced|\\ud83d\\udcee|\\ud83d\\udcef|\\ud83d\\udcf0|\\ud83d\\udcf1|\\ud83d\\udcf2|\\ud83d\\udcf3|\\ud83d\\udcf4|\\ud83d\\udcf5|\\ud83d\\udcf6|\\ud83d\\udcf7|\\ud83d\\udcf8|\\ud83d\\udcf9|\\ud83d\\udcfa|\\ud83d\\udcfb|\\ud83d\\udcfc|\\ud83d\\udcfd|\\ud83d\\udcff|\\ud83d\\udd00|\\ud83d\\udd01|\\ud83d\\udd02|\\ud83d\\udd03|\\ud83d\\udd04|\\ud83d\\udd05|\\ud83d\\udd06|\\ud83d\\udd07|\\ud83d\\udd08|\\ud83d\\udd09|\\ud83d\\udd0a|\\ud83d\\udd0b|\\ud83d\\udd0c|\\ud83d\\udd0d|\\ud83d\\udd0e|\\ud83d\\udd0f|\\ud83d\\udd10|\\ud83d\\udd11|\\ud83d\\udd12|\\ud83d\\udd13|\\ud83d\\udd14|\\ud83d\\udd15|\\ud83d\\udd16|\\ud83d\\udd17|\\ud83d\\udd18|\\ud83d\\udd19|\\ud83d\\udd1a|\\ud83d\\udd1b|\\ud83d\\udd1c|\\ud83d\\udd1d|\\ud83d\\udd1e|\\ud83d\\udd1f|\\ud83d\\udd20|\\ud83d\\udd21|\\ud83d\\udd22|\\ud83d\\udd23|\\ud83d\\udd24|\\ud83d\\udd25|\\ud83d\\udd26|\\ud83d\\udd27|\\ud83d\\udd28|\\ud83d\\udd29|\\ud83d\\udd2a|\\ud83d\\udd2b|\\ud83d\\udd2c|\\ud83d\\udd2d|\\ud83d\\udd2e|\\ud83d\\udd2f|\\ud83d\\udd30|\\ud83d\\udd31|\\ud83d\\udd32|\\ud83d\\udd33|\\ud83d\\udd34|\\ud83d\\udd35|\\ud83d\\udd36|\\ud83d\\udd37|\\ud83d\\udd38|\\ud83d\\udd39|\\ud83d\\udd3a|\\ud83d\\udd3b|\\ud83d\\udd3c|\\ud83d\\udd3d|\\ud83d\\udd49|\\ud83d\\udd4a|\\ud83d\\udd4b|\\ud83d\\udd4c|\\ud83d\\udd4d|\\ud83d\\udd4e|\\ud83d\\udd50|\\ud83d\\udd51|\\ud83d\\udd52|\\ud83d\\udd53|\\ud83d\\udd54|\\ud83d\\udd55|\\ud83d\\udd56|\\ud83d\\udd57|\\ud83d\\udd58|\\ud83d\\udd59|\\ud83d\\udd5a|\\ud83d\\udd5b|\\ud83d\\udd5c|\\ud83d\\udd5d|\\ud83d\\udd5e|\\ud83d\\udd5f|\\ud83d\\udd60|\\ud83d\\udd61|\\ud83d\\udd62|\\ud83d\\udd63|\\ud83d\\udd64|\\ud83d\\udd65|\\ud83d\\udd66|\\ud83d\\udd67|\\ud83d\\udd6f|\\ud83d\\udd70|\\ud83d\\udd73|\\ud83d\\udd74|\\ud83d\\udd75|\\ud83d\\udd76|\\ud83d\\udd77|\\ud83d\\udd78|\\ud83d\\udd79|\\ud83d\\udd7a|\\ud83d\\udd87|\\ud83d\\udd8a|\\ud83d\\udd8b|\\ud83d\\udd8c|\\ud83d\\udd8d|\\ud83d\\udd90|\\ud83d\\udd95|\\ud83d\\udd96|\\ud83d\\udda4|\\ud83d\\udda5|\\ud83d\\udda8|\\ud83d\\uddb1|\\ud83d\\uddb2|\\ud83d\\uddbc|\\ud83d\\uddc2|\\ud83d\\uddc3|\\ud83d\\uddc4|\\ud83d\\uddd1|\\ud83d\\uddd2|\\ud83d\\uddd3|\\ud83d\\udddc|\\ud83d\\udddd|\\ud83d\\uddde|\\ud83d\\udde1|\\ud83d\\udde3|\\ud83d\\udde8|\\ud83d\\uddef|\\ud83d\\uddf3|\\ud83d\\uddfa|\\ud83d\\uddfb|\\ud83d\\uddfc|\\ud83d\\uddfd|\\ud83d\\uddfe|\\ud83d\\uddff|\\ud83d\\ude00|\\ud83d\\ude01|\\ud83d\\ude02|\\ud83d\\ude03|\\ud83d\\ude04|\\ud83d\\ude05|\\ud83d\\ude06|\\ud83d\\ude07|\\ud83d\\ude08|\\ud83d\\ude09|\\ud83d\\ude0a|\\ud83d\\ude0b|\\ud83d\\ude0c|\\ud83d\\ude0d|\\ud83d\\ude0e|\\ud83d\\ude0f|\\ud83d\\ude10|\\ud83d\\ude11|\\ud83d\\ude12|\\ud83d\\ude13|\\ud83d\\ude14|\\ud83d\\ude15|\\ud83d\\ude16|\\ud83d\\ude17|\\ud83d\\ude18|\\ud83d\\ude19|\\ud83d\\ude1a|\\ud83d\\ude1b|\\ud83d\\ude1c|\\ud83d\\ude1d|\\ud83d\\ude1e|\\ud83d\\ude1f|\\ud83d\\ude20|\\ud83d\\ude21|\\ud83d\\ude22|\\ud83d\\ude23|\\ud83d\\ude24|\\ud83d\\ude25|\\ud83d\\ude26|\\ud83d\\ude27|\\ud83d\\ude28|\\ud83d\\ude29|\\ud83d\\ude2a|\\ud83d\\ude2b|\\ud83d\\ude2c|\\ud83d\\ude2d|\\ud83d\\ude2e|\\ud83d\\ude2f|\\ud83d\\ude30|\\ud83d\\ude31|\\ud83d\\ude32|\\ud83d\\ude33|\\ud83d\\ude34|\\ud83d\\ude35|\\ud83d\\ude36|\\ud83d\\ude37|\\ud83d\\ude38|\\ud83d\\ude39|\\ud83d\\ude3a|\\ud83d\\ude3b|\\ud83d\\ude3c|\\ud83d\\ude3d|\\ud83d\\ude3e|\\ud83d\\ude3f|\\ud83d\\ude40|\\ud83d\\ude41|\\ud83d\\ude42|\\ud83d\\ude43|\\ud83d\\ude44|\\ud83d\\ude45|\\ud83d\\ude46|\\ud83d\\ude47|\\ud83d\\ude48|\\ud83d\\ude49|\\ud83d\\ude4a|\\ud83d\\ude4b|\\ud83d\\ude4c|\\ud83d\\ude4d|\\ud83d\\ude4e|\\ud83d\\ude4f|\\ud83d\\ude80|\\ud83d\\ude81|\\ud83d\\ude82|\\ud83d\\ude83|\\ud83d\\ude84|\\ud83d\\ude85|\\ud83d\\ude86|\\ud83d\\ude87|\\ud83d\\ude88|\\ud83d\\ude89|\\ud83d\\ude8a|\\ud83d\\ude8b|\\ud83d\\ude8c|\\ud83d\\ude8d|\\ud83d\\ude8e|\\ud83d\\ude8f|\\ud83d\\ude90|\\ud83d\\ude91|\\ud83d\\ude92|\\ud83d\\ude93|\\ud83d\\ude94|\\ud83d\\ude95|\\ud83d\\ude96|\\ud83d\\ude97|\\ud83d\\ude98|\\ud83d\\ude99|\\ud83d\\ude9a|\\ud83d\\ude9b|\\ud83d\\ude9c|\\ud83d\\ude9d|\\ud83d\\ude9e|\\ud83d\\ude9f|\\ud83d\\udea0|\\ud83d\\udea1|\\ud83d\\udea2|\\ud83d\\udea3|\\ud83d\\udea4|\\ud83d\\udea5|\\ud83d\\udea6|\\ud83d\\udea7|\\ud83d\\udea8|\\ud83d\\udea9|\\ud83d\\udeaa|\\ud83d\\udeab|\\ud83d\\udeac|\\ud83d\\udead|\\ud83d\\udeae|\\ud83d\\udeaf|\\ud83d\\udeb0|\\ud83d\\udeb1|\\ud83d\\udeb2|\\ud83d\\udeb3|\\ud83d\\udeb4|\\ud83d\\udeb5|\\ud83d\\udeb6|\\ud83d\\udeb7|\\ud83d\\udeb8|\\ud83d\\udeb9|\\ud83d\\udeba|\\ud83d\\udebb|\\ud83d\\udebc|\\ud83d\\udebd|\\ud83d\\udebe|\\ud83d\\udebf|\\ud83d\\udec0|\\ud83d\\udec1|\\ud83d\\udec2|\\ud83d\\udec3|\\ud83d\\udec4|\\ud83d\\udec5|\\ud83d\\udecb|\\ud83d\\udecc|\\ud83d\\udecd|\\ud83d\\udece|\\ud83d\\udecf|\\ud83d\\uded0|\\ud83d\\uded1|\\ud83d\\uded2|\\ud83d\\uded5|\\ud83d\\uded6|\\ud83d\\uded7|\\ud83d\\udedd|\\ud83d\\udede|\\ud83d\\udedf|\\ud83d\\udee0|\\ud83d\\udee1|\\ud83d\\udee2|\\ud83d\\udee3|\\ud83d\\udee4|\\ud83d\\udee5|\\ud83d\\udee9|\\ud83d\\udeeb|\\ud83d\\udeec|\\ud83d\\udef0|\\ud83d\\udef3|\\ud83d\\udef4|\\ud83d\\udef5|\\ud83d\\udef6|\\ud83d\\udef7|\\ud83d\\udef8|\\ud83d\\udef9|\\ud83d\\udefa|\\ud83d\\udefb|\\ud83d\\udefc|\\ud83d\\udfe0|\\ud83d\\udfe1|\\ud83d\\udfe2|\\ud83d\\udfe3|\\ud83d\\udfe4|\\ud83d\\udfe5|\\ud83d\\udfe6|\\ud83d\\udfe7|\\ud83d\\udfe8|\\ud83d\\udfe9|\\ud83d\\udfea|\\ud83d\\udfeb|\\ud83d\\udff0|\\ud83e\\udd0c|\\ud83e\\udd0d|\\ud83e\\udd0e|\\ud83e\\udd0f|\\ud83e\\udd10|\\ud83e\\udd11|\\ud83e\\udd12|\\ud83e\\udd13|\\ud83e\\udd14|\\ud83e\\udd15|\\ud83e\\udd16|\\ud83e\\udd17|\\ud83e\\udd18|\\ud83e\\udd19|\\ud83e\\udd1a|\\ud83e\\udd1b|\\ud83e\\udd1c|\\ud83e\\udd1d|\\ud83e\\udd1e|\\ud83e\\udd1f|\\ud83e\\udd20|\\ud83e\\udd21|\\ud83e\\udd22|\\ud83e\\udd23|\\ud83e\\udd24|\\ud83e\\udd25|\\ud83e\\udd26|\\ud83e\\udd27|\\ud83e\\udd28|\\ud83e\\udd29|\\ud83e\\udd2a|\\ud83e\\udd2b|\\ud83e\\udd2c|\\ud83e\\udd2d|\\ud83e\\udd2e|\\ud83e\\udd2f|\\ud83e\\udd30|\\ud83e\\udd31|\\ud83e\\udd32|\\ud83e\\udd33|\\ud83e\\udd34|\\ud83e\\udd35|\\ud83e\\udd36|\\ud83e\\udd37|\\ud83e\\udd38|\\ud83e\\udd39|\\ud83e\\udd3a|\\ud83e\\udd3c|\\ud83e\\udd3d|\\ud83e\\udd3e|\\ud83e\\udd3f|\\ud83e\\udd40|\\ud83e\\udd41|\\ud83e\\udd42|\\ud83e\\udd43|\\ud83e\\udd44|\\ud83e\\udd45|\\ud83e\\udd47|\\ud83e\\udd48|\\ud83e\\udd49|\\ud83e\\udd4a|\\ud83e\\udd4b|\\ud83e\\udd4c|\\ud83e\\udd4d|\\ud83e\\udd4e|\\ud83e\\udd4f|\\ud83e\\udd50|\\ud83e\\udd51|\\ud83e\\udd52|\\ud83e\\udd53|\\ud83e\\udd54|\\ud83e\\udd55|\\ud83e\\udd56|\\ud83e\\udd57|\\ud83e\\udd58|\\ud83e\\udd59|\\ud83e\\udd5a|\\ud83e\\udd5b|\\ud83e\\udd5c|\\ud83e\\udd5d|\\ud83e\\udd5e|\\ud83e\\udd5f|\\ud83e\\udd60|\\ud83e\\udd61|\\ud83e\\udd62|\\ud83e\\udd63|\\ud83e\\udd64|\\ud83e\\udd65|\\ud83e\\udd66|\\ud83e\\udd67|\\ud83e\\udd68|\\ud83e\\udd69|\\ud83e\\udd6a|\\ud83e\\udd6b|\\ud83e\\udd6c|\\ud83e\\udd6d|\\ud83e\\udd6e|\\ud83e\\udd6f|\\ud83e\\udd70|\\ud83e\\udd71|\\ud83e\\udd72|\\ud83e\\udd73|\\ud83e\\udd74|\\ud83e\\udd75|\\ud83e\\udd76|\\ud83e\\udd77|\\ud83e\\udd78|\\ud83e\\udd79|\\ud83e\\udd7a|\\ud83e\\udd7b|\\ud83e\\udd7c|\\ud83e\\udd7d|\\ud83e\\udd7e|\\ud83e\\udd7f|\\ud83e\\udd80|\\ud83e\\udd81|\\ud83e\\udd82|\\ud83e\\udd83|\\ud83e\\udd84|\\ud83e\\udd85|\\ud83e\\udd86|\\ud83e\\udd87|\\ud83e\\udd88|\\ud83e\\udd89|\\ud83e\\udd8a|\\ud83e\\udd8b|\\ud83e\\udd8c|\\ud83e\\udd8d|\\ud83e\\udd8e|\\ud83e\\udd8f|\\ud83e\\udd90|\\ud83e\\udd91|\\ud83e\\udd92|\\ud83e\\udd93|\\ud83e\\udd94|\\ud83e\\udd95|\\ud83e\\udd96|\\ud83e\\udd97|\\ud83e\\udd98|\\ud83e\\udd99|\\ud83e\\udd9a|\\ud83e\\udd9b|\\ud83e\\udd9c|\\ud83e\\udd9d|\\ud83e\\udd9e|\\ud83e\\udd9f|\\ud83e\\udda0|\\ud83e\\udda1|\\ud83e\\udda2|\\ud83e\\udda3|\\ud83e\\udda4|\\ud83e\\udda5|\\ud83e\\udda6|\\ud83e\\udda7|\\ud83e\\udda8|\\ud83e\\udda9|\\ud83e\\uddaa|\\ud83e\\uddab|\\ud83e\\uddac|\\ud83e\\uddad|\\ud83e\\uddae|\\ud83e\\uddaf|\\ud83e\\uddb0|\\ud83e\\uddb1|\\ud83e\\uddb2|\\ud83e\\uddb3|\\ud83e\\uddb4|\\ud83e\\uddb5|\\ud83e\\uddb6|\\ud83e\\uddb7|\\ud83e\\uddb8|\\ud83e\\uddb9|\\ud83e\\uddba|\\ud83e\\uddbb|\\ud83e\\uddbc|\\ud83e\\uddbd|\\ud83e\\uddbe|\\ud83e\\uddbf|\\ud83e\\uddc0|\\ud83e\\uddc1|\\ud83e\\uddc2|\\ud83e\\uddc3|\\ud83e\\uddc4|\\ud83e\\uddc5|\\ud83e\\uddc6|\\ud83e\\uddc7|\\ud83e\\uddc8|\\ud83e\\uddc9|\\ud83e\\uddca|\\ud83e\\uddcb|\\ud83e\\uddcc|\\ud83e\\uddcd|\\ud83e\\uddce|\\ud83e\\uddcf|\\ud83e\\uddd0|\\ud83e\\uddd1|\\ud83e\\uddd2|\\ud83e\\uddd3|\\ud83e\\uddd4|\\ud83e\\uddd5|\\ud83e\\uddd6|\\ud83e\\uddd7|\\ud83e\\uddd8|\\ud83e\\uddd9|\\ud83e\\uddda|\\ud83e\\udddb|\\ud83e\\udddc|\\ud83e\\udddd|\\ud83e\\uddde|\\ud83e\\udddf|\\ud83e\\udde0|\\ud83e\\udde1|\\ud83e\\udde2|\\ud83e\\udde3|\\ud83e\\udde4|\\ud83e\\udde5|\\ud83e\\udde6|\\ud83e\\udde7|\\ud83e\\udde8|\\ud83e\\udde9|\\ud83e\\uddea|\\ud83e\\uddeb|\\ud83e\\uddec|\\ud83e\\udded|\\ud83e\\uddee|\\ud83e\\uddef|\\ud83e\\uddf0|\\ud83e\\uddf1|\\ud83e\\uddf2|\\ud83e\\uddf3|\\ud83e\\uddf4|\\ud83e\\uddf5|\\ud83e\\uddf6|\\ud83e\\uddf7|\\ud83e\\uddf8|\\ud83e\\uddf9|\\ud83e\\uddfa|\\ud83e\\uddfb|\\ud83e\\uddfc|\\ud83e\\uddfd|\\ud83e\\uddfe|\\ud83e\\uddff|\\ud83e\\ude70|\\ud83e\\ude71|\\ud83e\\ude72|\\ud83e\\ude73|\\ud83e\\ude74|\\ud83e\\ude78|\\ud83e\\ude79|\\ud83e\\ude7a|\\ud83e\\ude7b|\\ud83e\\ude7c|\\ud83e\\ude80|\\ud83e\\ude81|\\ud83e\\ude82|\\ud83e\\ude83|\\ud83e\\ude84|\\ud83e\\ude85|\\ud83e\\ude86|\\ud83e\\ude90|\\ud83e\\ude91|\\ud83e\\ude92|\\ud83e\\ude93|\\ud83e\\ude94|\\ud83e\\ude95|\\ud83e\\ude96|\\ud83e\\ude97|\\ud83e\\ude98|\\ud83e\\ude99|\\ud83e\\ude9a|\\ud83e\\ude9b|\\ud83e\\ude9c|\\ud83e\\ude9d|\\ud83e\\ude9e|\\ud83e\\ude9f|\\ud83e\\udea0|\\ud83e\\udea1|\\ud83e\\udea2|\\ud83e\\udea3|\\ud83e\\udea4|\\ud83e\\udea5|\\ud83e\\udea6|\\ud83e\\udea7|\\ud83e\\udea8|\\ud83e\\udea9|\\ud83e\\udeaa|\\ud83e\\udeab|\\ud83e\\udeac|\\ud83e\\udeb0|\\ud83e\\udeb1|\\ud83e\\udeb2|\\ud83e\\udeb3|\\ud83e\\udeb4|\\ud83e\\udeb5|\\ud83e\\udeb6|\\ud83e\\udeb7|\\ud83e\\udeb8|\\ud83e\\udeb9|\\ud83e\\udeba|\\ud83e\\udec0|\\ud83e\\udec1|\\ud83e\\udec2|\\ud83e\\udec3|\\ud83e\\udec4|\\ud83e\\udec5|\\ud83e\\uded0|\\ud83e\\uded1|\\ud83e\\uded2|\\ud83e\\uded3|\\ud83e\\uded4|\\ud83e\\uded5|\\ud83e\\uded6|\\ud83e\\uded7|\\ud83e\\uded8|\\ud83e\\uded9|\\ud83e\\udee0|\\ud83e\\udee1|\\ud83e\\udee2|\\ud83e\\udee3|\\ud83e\\udee4|\\ud83e\\udee5|\\ud83e\\udee6|\\ud83e\\udee7|\\ud83e\\udef0|\\ud83e\\udef1|\\ud83e\\udef2|\\ud83e\\udef3|\\ud83e\\udef4|\\ud83e\\udef5|\\ud83e\\udef6))‍)+(?:(?:☝|⛹|✊|✋|✌|✍|\\ud83c\\udf85|\\ud83c\\udfc2|\\ud83c\\udfc3|\\ud83c\\udfc4|\\ud83c\\udfc7|\\ud83c\\udfca|\\ud83c\\udfcb|\\ud83c\\udfcc|\\ud83d\\udc42|\\ud83d\\udc43|\\ud83d\\udc46|\\ud83d\\udc47|\\ud83d\\udc48|\\ud83d\\udc49|\\ud83d\\udc4a|\\ud83d\\udc4b|\\ud83d\\udc4c|\\ud83d\\udc4d|\\ud83d\\udc4e|\\ud83d\\udc4f|\\ud83d\\udc50|\\ud83d\\udc66|\\ud83d\\udc67|\\ud83d\\udc68|\\ud83d\\udc69|\\ud83d\\udc6a|\\ud83d\\udc6b|\\ud83d\\udc6c|\\ud83d\\udc6d|\\ud83d\\udc6e|\\ud83d\\udc6f|\\ud83d\\udc70|\\ud83d\\udc71|\\ud83d\\udc72|\\ud83d\\udc73|\\ud83d\\udc74|\\ud83d\\udc75|\\ud83d\\udc76|\\ud83d\\udc77|\\ud83d\\udc78|\\ud83d\\udc7c|\\ud83d\\udc81|\\ud83d\\udc82|\\ud83d\\udc83|\\ud83d\\udc85|\\ud83d\\udc86|\\ud83d\\udc87|\\ud83d\\udc8f|\\ud83d\\udc91|\\ud83d\\udcaa|\\ud83d\\udd74|\\ud83d\\udd75|\\ud83d\\udd7a|\\ud83d\\udd90|\\ud83d\\udd95|\\ud83d\\udd96|\\ud83d\\ude45|\\ud83d\\ude46|\\ud83d\\ude47|\\ud83d\\ude4b|\\ud83d\\ude4c|\\ud83d\\ude4d|\\ud83d\\ude4e|\\ud83d\\ude4f|\\ud83d\\udea3|\\ud83d\\udeb4|\\ud83d\\udeb5|\\ud83d\\udeb6|\\ud83d\\udec0|\\ud83d\\udecc|\\ud83e\\udd0c|\\ud83e\\udd0f|\\ud83e\\udd18|\\ud83e\\udd19|\\ud83e\\udd1a|\\ud83e\\udd1b|\\ud83e\\udd1c|\\ud83e\\udd1d|\\ud83e\\udd1e|\\ud83e\\udd1f|\\ud83e\\udd26|\\ud83e\\udd30|\\ud83e\\udd31|\\ud83e\\udd32|\\ud83e\\udd33|\\ud83e\\udd34|\\ud83e\\udd35|\\ud83e\\udd36|\\ud83e\\udd37|\\ud83e\\udd38|\\ud83e\\udd39|\\ud83e\\udd3c|\\ud83e\\udd3d|\\ud83e\\udd3e|\\ud83e\\udd77|\\ud83e\\uddb5|\\ud83e\\uddb6|\\ud83e\\uddb8|\\ud83e\\uddb9|\\ud83e\\uddbb|\\ud83e\\uddcd|\\ud83e\\uddce|\\ud83e\\uddcf|\\ud83e\\uddd1|\\ud83e\\uddd2|\\ud83e\\uddd3|\\ud83e\\uddd4|\\ud83e\\uddd5|\\ud83e\\uddd6|\\ud83e\\uddd7|\\ud83e\\uddd8|\\ud83e\\uddd9|\\ud83e\\uddda|\\ud83e\\udddb|\\ud83e\\udddc|\\ud83e\\udddd|\\ud83e\\udec3|\\ud83e\\udec4|\\ud83e\\udec5|\\ud83e\\udef0|\\ud83e\\udef1|\\ud83e\\udef2|\\ud83e\\udef3|\\ud83e\\udef4|\\ud83e\\udef5|\\ud83e\\udef6)(?:\\ud83c\\udffb|\\ud83c\\udffc|\\ud83c\\udffd|\\ud83c\\udffe|\\ud83c\\udfff)|(?:(?:\\#|\\*|0|1|2|3|4|5|6|7|8|9|©|®|‼|⁉|™|ℹ|↔|↕|↖|↗|↘|↙|↩|↪|⌨|⏏|⏭|⏮|⏯|⏱|⏲|⏸|⏹|⏺|Ⓜ|▪|▫|▶|◀|◻|◼|☀|☁|☂|☃|☄|☎|☑|☘|☝|☠|☢|☣|☦|☪|☮|☯|☸|☹|☺|♀|♂|♟|♠|♣|♥|♦|♨|♻|♾|⚒|⚔|⚕|⚖|⚗|⚙|⚛|⚜|⚠|⚧|⚰|⚱|⛈|⛏|⛑|⛓|⛩|⛰|⛱|⛴|⛷|⛸|⛹|✂|✈|✉|✌|✍|✏|✒|✔|✖|✝|✡|✳|✴|❄|❇|❣|❤|➡|⤴|⤵|⬅|⬆|⬇|〰|〽|㊗|㊙|\\ud83c\\udd70|\\ud83c\\udd71|\\ud83c\\udd7e|\\ud83c\\udd7f|\\ud83c\\ude02|\\ud83c\\ude37|\\ud83c\\udf21|\\ud83c\\udf24|\\ud83c\\udf25|\\ud83c\\udf26|\\ud83c\\udf27|\\ud83c\\udf28|\\ud83c\\udf29|\\ud83c\\udf2a|\\ud83c\\udf2b|\\ud83c\\udf2c|\\ud83c\\udf36|\\ud83c\\udf7d|\\ud83c\\udf96|\\ud83c\\udf97|\\ud83c\\udf99|\\ud83c\\udf9a|\\ud83c\\udf9b|\\ud83c\\udf9e|\\ud83c\\udf9f|\\ud83c\\udfcb|\\ud83c\\udfcc|\\ud83c\\udfcd|\\ud83c\\udfce|\\ud83c\\udfd4|\\ud83c\\udfd5|\\ud83c\\udfd6|\\ud83c\\udfd7|\\ud83c\\udfd8|\\ud83c\\udfd9|\\ud83c\\udfda|\\ud83c\\udfdb|\\ud83c\\udfdc|\\ud83c\\udfdd|\\ud83c\\udfde|\\ud83c\\udfdf|\\ud83c\\udff3|\\ud83c\\udff5|\\ud83c\\udff7|\\ud83d\\udc3f|\\ud83d\\udc41|\\ud83d\\udcfd|\\ud83d\\udd49|\\ud83d\\udd4a|\\ud83d\\udd6f|\\ud83d\\udd70|\\ud83d\\udd73|\\ud83d\\udd74|\\ud83d\\udd75|\\ud83d\\udd76|\\ud83d\\udd77|\\ud83d\\udd78|\\ud83d\\udd79|\\ud83d\\udd87|\\ud83d\\udd8a|\\ud83d\\udd8b|\\ud83d\\udd8c|\\ud83d\\udd8d|\\ud83d\\udd90|\\ud83d\\udda5|\\ud83d\\udda8|\\ud83d\\uddb1|\\ud83d\\uddb2|\\ud83d\\uddbc|\\ud83d\\uddc2|\\ud83d\\uddc3|\\ud83d\\uddc4|\\ud83d\\uddd1|\\ud83d\\uddd2|\\ud83d\\uddd3|\\ud83d\\udddc|\\ud83d\\udddd|\\ud83d\\uddde|\\ud83d\\udde1|\\ud83d\\udde3|\\ud83d\\udde8|\\ud83d\\uddef|\\ud83d\\uddf3|\\ud83d\\uddfa|\\ud83d\\udecb|\\ud83d\\udecd|\\ud83d\\udece|\\ud83d\\udecf|\\ud83d\\udee0|\\ud83d\\udee1|\\ud83d\\udee2|\\ud83d\\udee3|\\ud83d\\udee4|\\ud83d\\udee5|\\ud83d\\udee9|\\ud83d\\udef0|\\ud83d\\udef3)️|(?:⌚|⌛|⏩|⏪|⏫|⏬|⏰|⏳|◽|◾|☔|☕|♈|♉|♊|♋|♌|♍|♎|♏|♐|♑|♒|♓|♿|⚓|⚡|⚪|⚫|⚽|⚾|⛄|⛅|⛎|⛔|⛪|⛲|⛳|⛵|⛺|⛽|✅|✊|✋|✨|❌|❎|❓|❔|❕|❗|➕|➖|➗|➰|➿|⬛|⬜|⭐|⭕|\\ud83c\\udc04|\\ud83c\\udccf|\\ud83c\\udd8e|\\ud83c\\udd91|\\ud83c\\udd92|\\ud83c\\udd93|\\ud83c\\udd94|\\ud83c\\udd95|\\ud83c\\udd96|\\ud83c\\udd97|\\ud83c\\udd98|\\ud83c\\udd99|\\ud83c\\udd9a|\\ud83c\\udde6|\\ud83c\\udde7|\\ud83c\\udde8|\\ud83c\\udde9|\\ud83c\\uddea|\\ud83c\\uddeb|\\ud83c\\uddec|\\ud83c\\udded|\\ud83c\\uddee|\\ud83c\\uddef|\\ud83c\\uddf0|\\ud83c\\uddf1|\\ud83c\\uddf2|\\ud83c\\uddf3|\\ud83c\\uddf4|\\ud83c\\uddf5|\\ud83c\\uddf6|\\ud83c\\uddf7|\\ud83c\\uddf8|\\ud83c\\uddf9|\\ud83c\\uddfa|\\ud83c\\uddfb|\\ud83c\\uddfc|\\ud83c\\uddfd|\\ud83c\\uddfe|\\ud83c\\uddff|\\ud83c\\ude01|\\ud83c\\ude1a|\\ud83c\\ude2f|\\ud83c\\ude32|\\ud83c\\ude33|\\ud83c\\ude34|\\ud83c\\ude35|\\ud83c\\ude36|\\ud83c\\ude38|\\ud83c\\ude39|\\ud83c\\ude3a|\\ud83c\\ude50|\\ud83c\\ude51|\\ud83c\\udf00|\\ud83c\\udf01|\\ud83c\\udf02|\\ud83c\\udf03|\\ud83c\\udf04|\\ud83c\\udf05|\\ud83c\\udf06|\\ud83c\\udf07|\\ud83c\\udf08|\\ud83c\\udf09|\\ud83c\\udf0a|\\ud83c\\udf0b|\\ud83c\\udf0c|\\ud83c\\udf0d|\\ud83c\\udf0e|\\ud83c\\udf0f|\\ud83c\\udf10|\\ud83c\\udf11|\\ud83c\\udf12|\\ud83c\\udf13|\\ud83c\\udf14|\\ud83c\\udf15|\\ud83c\\udf16|\\ud83c\\udf17|\\ud83c\\udf18|\\ud83c\\udf19|\\ud83c\\udf1a|\\ud83c\\udf1b|\\ud83c\\udf1c|\\ud83c\\udf1d|\\ud83c\\udf1e|\\ud83c\\udf1f|\\ud83c\\udf20|\\ud83c\\udf2d|\\ud83c\\udf2e|\\ud83c\\udf2f|\\ud83c\\udf30|\\ud83c\\udf31|\\ud83c\\udf32|\\ud83c\\udf33|\\ud83c\\udf34|\\ud83c\\udf35|\\ud83c\\udf37|\\ud83c\\udf38|\\ud83c\\udf39|\\ud83c\\udf3a|\\ud83c\\udf3b|\\ud83c\\udf3c|\\ud83c\\udf3d|\\ud83c\\udf3e|\\ud83c\\udf3f|\\ud83c\\udf40|\\ud83c\\udf41|\\ud83c\\udf42|\\ud83c\\udf43|\\ud83c\\udf44|\\ud83c\\udf45|\\ud83c\\udf46|\\ud83c\\udf47|\\ud83c\\udf48|\\ud83c\\udf49|\\ud83c\\udf4a|\\ud83c\\udf4b|\\ud83c\\udf4c|\\ud83c\\udf4d|\\ud83c\\udf4e|\\ud83c\\udf4f|\\ud83c\\udf50|\\ud83c\\udf51|\\ud83c\\udf52|\\ud83c\\udf53|\\ud83c\\udf54|\\ud83c\\udf55|\\ud83c\\udf56|\\ud83c\\udf57|\\ud83c\\udf58|\\ud83c\\udf59|\\ud83c\\udf5a|\\ud83c\\udf5b|\\ud83c\\udf5c|\\ud83c\\udf5d|\\ud83c\\udf5e|\\ud83c\\udf5f|\\ud83c\\udf60|\\ud83c\\udf61|\\ud83c\\udf62|\\ud83c\\udf63|\\ud83c\\udf64|\\ud83c\\udf65|\\ud83c\\udf66|\\ud83c\\udf67|\\ud83c\\udf68|\\ud83c\\udf69|\\ud83c\\udf6a|\\ud83c\\udf6b|\\ud83c\\udf6c|\\ud83c\\udf6d|\\ud83c\\udf6e|\\ud83c\\udf6f|\\ud83c\\udf70|\\ud83c\\udf71|\\ud83c\\udf72|\\ud83c\\udf73|\\ud83c\\udf74|\\ud83c\\udf75|\\ud83c\\udf76|\\ud83c\\udf77|\\ud83c\\udf78|\\ud83c\\udf79|\\ud83c\\udf7a|\\ud83c\\udf7b|\\ud83c\\udf7c|\\ud83c\\udf7e|\\ud83c\\udf7f|\\ud83c\\udf80|\\ud83c\\udf81|\\ud83c\\udf82|\\ud83c\\udf83|\\ud83c\\udf84|\\ud83c\\udf85|\\ud83c\\udf86|\\ud83c\\udf87|\\ud83c\\udf88|\\ud83c\\udf89|\\ud83c\\udf8a|\\ud83c\\udf8b|\\ud83c\\udf8c|\\ud83c\\udf8d|\\ud83c\\udf8e|\\ud83c\\udf8f|\\ud83c\\udf90|\\ud83c\\udf91|\\ud83c\\udf92|\\ud83c\\udf93|\\ud83c\\udfa0|\\ud83c\\udfa1|\\ud83c\\udfa2|\\ud83c\\udfa3|\\ud83c\\udfa4|\\ud83c\\udfa5|\\ud83c\\udfa6|\\ud83c\\udfa7|\\ud83c\\udfa8|\\ud83c\\udfa9|\\ud83c\\udfaa|\\ud83c\\udfab|\\ud83c\\udfac|\\ud83c\\udfad|\\ud83c\\udfae|\\ud83c\\udfaf|\\ud83c\\udfb0|\\ud83c\\udfb1|\\ud83c\\udfb2|\\ud83c\\udfb3|\\ud83c\\udfb4|\\ud83c\\udfb5|\\ud83c\\udfb6|\\ud83c\\udfb7|\\ud83c\\udfb8|\\ud83c\\udfb9|\\ud83c\\udfba|\\ud83c\\udfbb|\\ud83c\\udfbc|\\ud83c\\udfbd|\\ud83c\\udfbe|\\ud83c\\udfbf|\\ud83c\\udfc0|\\ud83c\\udfc1|\\ud83c\\udfc2|\\ud83c\\udfc3|\\ud83c\\udfc4|\\ud83c\\udfc5|\\ud83c\\udfc6|\\ud83c\\udfc7|\\ud83c\\udfc8|\\ud83c\\udfc9|\\ud83c\\udfca|\\ud83c\\udfcf|\\ud83c\\udfd0|\\ud83c\\udfd1|\\ud83c\\udfd2|\\ud83c\\udfd3|\\ud83c\\udfe0|\\ud83c\\udfe1|\\ud83c\\udfe2|\\ud83c\\udfe3|\\ud83c\\udfe4|\\ud83c\\udfe5|\\ud83c\\udfe6|\\ud83c\\udfe7|\\ud83c\\udfe8|\\ud83c\\udfe9|\\ud83c\\udfea|\\ud83c\\udfeb|\\ud83c\\udfec|\\ud83c\\udfed|\\ud83c\\udfee|\\ud83c\\udfef|\\ud83c\\udff0|\\ud83c\\udff4|\\ud83c\\udff8|\\ud83c\\udff9|\\ud83c\\udffa|\\ud83c\\udffb|\\ud83c\\udffc|\\ud83c\\udffd|\\ud83c\\udffe|\\ud83c\\udfff|\\ud83d\\udc00|\\ud83d\\udc01|\\ud83d\\udc02|\\ud83d\\udc03|\\ud83d\\udc04|\\ud83d\\udc05|\\ud83d\\udc06|\\ud83d\\udc07|\\ud83d\\udc08|\\ud83d\\udc09|\\ud83d\\udc0a|\\ud83d\\udc0b|\\ud83d\\udc0c|\\ud83d\\udc0d|\\ud83d\\udc0e|\\ud83d\\udc0f|\\ud83d\\udc10|\\ud83d\\udc11|\\ud83d\\udc12|\\ud83d\\udc13|\\ud83d\\udc14|\\ud83d\\udc15|\\ud83d\\udc16|\\ud83d\\udc17|\\ud83d\\udc18|\\ud83d\\udc19|\\ud83d\\udc1a|\\ud83d\\udc1b|\\ud83d\\udc1c|\\ud83d\\udc1d|\\ud83d\\udc1e|\\ud83d\\udc1f|\\ud83d\\udc20|\\ud83d\\udc21|\\ud83d\\udc22|\\ud83d\\udc23|\\ud83d\\udc24|\\ud83d\\udc25|\\ud83d\\udc26|\\ud83d\\udc27|\\ud83d\\udc28|\\ud83d\\udc29|\\ud83d\\udc2a|\\ud83d\\udc2b|\\ud83d\\udc2c|\\ud83d\\udc2d|\\ud83d\\udc2e|\\ud83d\\udc2f|\\ud83d\\udc30|\\ud83d\\udc31|\\ud83d\\udc32|\\ud83d\\udc33|\\ud83d\\udc34|\\ud83d\\udc35|\\ud83d\\udc36|\\ud83d\\udc37|\\ud83d\\udc38|\\ud83d\\udc39|\\ud83d\\udc3a|\\ud83d\\udc3b|\\ud83d\\udc3c|\\ud83d\\udc3d|\\ud83d\\udc3e|\\ud83d\\udc40|\\ud83d\\udc42|\\ud83d\\udc43|\\ud83d\\udc44|\\ud83d\\udc45|\\ud83d\\udc46|\\ud83d\\udc47|\\ud83d\\udc48|\\ud83d\\udc49|\\ud83d\\udc4a|\\ud83d\\udc4b|\\ud83d\\udc4c|\\ud83d\\udc4d|\\ud83d\\udc4e|\\ud83d\\udc4f|\\ud83d\\udc50|\\ud83d\\udc51|\\ud83d\\udc52|\\ud83d\\udc53|\\ud83d\\udc54|\\ud83d\\udc55|\\ud83d\\udc56|\\ud83d\\udc57|\\ud83d\\udc58|\\ud83d\\udc59|\\ud83d\\udc5a|\\ud83d\\udc5b|\\ud83d\\udc5c|\\ud83d\\udc5d|\\ud83d\\udc5e|\\ud83d\\udc5f|\\ud83d\\udc60|\\ud83d\\udc61|\\ud83d\\udc62|\\ud83d\\udc63|\\ud83d\\udc64|\\ud83d\\udc65|\\ud83d\\udc66|\\ud83d\\udc67|\\ud83d\\udc68|\\ud83d\\udc69|\\ud83d\\udc6a|\\ud83d\\udc6b|\\ud83d\\udc6c|\\ud83d\\udc6d|\\ud83d\\udc6e|\\ud83d\\udc6f|\\ud83d\\udc70|\\ud83d\\udc71|\\ud83d\\udc72|\\ud83d\\udc73|\\ud83d\\udc74|\\ud83d\\udc75|\\ud83d\\udc76|\\ud83d\\udc77|\\ud83d\\udc78|\\ud83d\\udc79|\\ud83d\\udc7a|\\ud83d\\udc7b|\\ud83d\\udc7c|\\ud83d\\udc7d|\\ud83d\\udc7e|\\ud83d\\udc7f|\\ud83d\\udc80|\\ud83d\\udc81|\\ud83d\\udc82|\\ud83d\\udc83|\\ud83d\\udc84|\\ud83d\\udc85|\\ud83d\\udc86|\\ud83d\\udc87|\\ud83d\\udc88|\\ud83d\\udc89|\\ud83d\\udc8a|\\ud83d\\udc8b|\\ud83d\\udc8c|\\ud83d\\udc8d|\\ud83d\\udc8e|\\ud83d\\udc8f|\\ud83d\\udc90|\\ud83d\\udc91|\\ud83d\\udc92|\\ud83d\\udc93|\\ud83d\\udc94|\\ud83d\\udc95|\\ud83d\\udc96|\\ud83d\\udc97|\\ud83d\\udc98|\\ud83d\\udc99|\\ud83d\\udc9a|\\ud83d\\udc9b|\\ud83d\\udc9c|\\ud83d\\udc9d|\\ud83d\\udc9e|\\ud83d\\udc9f|\\ud83d\\udca0|\\ud83d\\udca1|\\ud83d\\udca2|\\ud83d\\udca3|\\ud83d\\udca4|\\ud83d\\udca5|\\ud83d\\udca6|\\ud83d\\udca7|\\ud83d\\udca8|\\ud83d\\udca9|\\ud83d\\udcaa|\\ud83d\\udcab|\\ud83d\\udcac|\\ud83d\\udcad|\\ud83d\\udcae|\\ud83d\\udcaf|\\ud83d\\udcb0|\\ud83d\\udcb1|\\ud83d\\udcb2|\\ud83d\\udcb3|\\ud83d\\udcb4|\\ud83d\\udcb5|\\ud83d\\udcb6|\\ud83d\\udcb7|\\ud83d\\udcb8|\\ud83d\\udcb9|\\ud83d\\udcba|\\ud83d\\udcbb|\\ud83d\\udcbc|\\ud83d\\udcbd|\\ud83d\\udcbe|\\ud83d\\udcbf|\\ud83d\\udcc0|\\ud83d\\udcc1|\\ud83d\\udcc2|\\ud83d\\udcc3|\\ud83d\\udcc4|\\ud83d\\udcc5|\\ud83d\\udcc6|\\ud83d\\udcc7|\\ud83d\\udcc8|\\ud83d\\udcc9|\\ud83d\\udcca|\\ud83d\\udccb|\\ud83d\\udccc|\\ud83d\\udccd|\\ud83d\\udcce|\\ud83d\\udccf|\\ud83d\\udcd0|\\ud83d\\udcd1|\\ud83d\\udcd2|\\ud83d\\udcd3|\\ud83d\\udcd4|\\ud83d\\udcd5|\\ud83d\\udcd6|\\ud83d\\udcd7|\\ud83d\\udcd8|\\ud83d\\udcd9|\\ud83d\\udcda|\\ud83d\\udcdb|\\ud83d\\udcdc|\\ud83d\\udcdd|\\ud83d\\udcde|\\ud83d\\udcdf|\\ud83d\\udce0|\\ud83d\\udce1|\\ud83d\\udce2|\\ud83d\\udce3|\\ud83d\\udce4|\\ud83d\\udce5|\\ud83d\\udce6|\\ud83d\\udce7|\\ud83d\\udce8|\\ud83d\\udce9|\\ud83d\\udcea|\\ud83d\\udceb|\\ud83d\\udcec|\\ud83d\\udced|\\ud83d\\udcee|\\ud83d\\udcef|\\ud83d\\udcf0|\\ud83d\\udcf1|\\ud83d\\udcf2|\\ud83d\\udcf3|\\ud83d\\udcf4|\\ud83d\\udcf5|\\ud83d\\udcf6|\\ud83d\\udcf7|\\ud83d\\udcf8|\\ud83d\\udcf9|\\ud83d\\udcfa|\\ud83d\\udcfb|\\ud83d\\udcfc|\\ud83d\\udcff|\\ud83d\\udd00|\\ud83d\\udd01|\\ud83d\\udd02|\\ud83d\\udd03|\\ud83d\\udd04|\\ud83d\\udd05|\\ud83d\\udd06|\\ud83d\\udd07|\\ud83d\\udd08|\\ud83d\\udd09|\\ud83d\\udd0a|\\ud83d\\udd0b|\\ud83d\\udd0c|\\ud83d\\udd0d|\\ud83d\\udd0e|\\ud83d\\udd0f|\\ud83d\\udd10|\\ud83d\\udd11|\\ud83d\\udd12|\\ud83d\\udd13|\\ud83d\\udd14|\\ud83d\\udd15|\\ud83d\\udd16|\\ud83d\\udd17|\\ud83d\\udd18|\\ud83d\\udd19|\\ud83d\\udd1a|\\ud83d\\udd1b|\\ud83d\\udd1c|\\ud83d\\udd1d|\\ud83d\\udd1e|\\ud83d\\udd1f|\\ud83d\\udd20|\\ud83d\\udd21|\\ud83d\\udd22|\\ud83d\\udd23|\\ud83d\\udd24|\\ud83d\\udd25|\\ud83d\\udd26|\\ud83d\\udd27|\\ud83d\\udd28|\\ud83d\\udd29|\\ud83d\\udd2a|\\ud83d\\udd2b|\\ud83d\\udd2c|\\ud83d\\udd2d|\\ud83d\\udd2e|\\ud83d\\udd2f|\\ud83d\\udd30|\\ud83d\\udd31|\\ud83d\\udd32|\\ud83d\\udd33|\\ud83d\\udd34|\\ud83d\\udd35|\\ud83d\\udd36|\\ud83d\\udd37|\\ud83d\\udd38|\\ud83d\\udd39|\\ud83d\\udd3a|\\ud83d\\udd3b|\\ud83d\\udd3c|\\ud83d\\udd3d|\\ud83d\\udd4b|\\ud83d\\udd4c|\\ud83d\\udd4d|\\ud83d\\udd4e|\\ud83d\\udd50|\\ud83d\\udd51|\\ud83d\\udd52|\\ud83d\\udd53|\\ud83d\\udd54|\\ud83d\\udd55|\\ud83d\\udd56|\\ud83d\\udd57|\\ud83d\\udd58|\\ud83d\\udd59|\\ud83d\\udd5a|\\ud83d\\udd5b|\\ud83d\\udd5c|\\ud83d\\udd5d|\\ud83d\\udd5e|\\ud83d\\udd5f|\\ud83d\\udd60|\\ud83d\\udd61|\\ud83d\\udd62|\\ud83d\\udd63|\\ud83d\\udd64|\\ud83d\\udd65|\\ud83d\\udd66|\\ud83d\\udd67|\\ud83d\\udd7a|\\ud83d\\udd95|\\ud83d\\udd96|\\ud83d\\udda4|\\ud83d\\uddfb|\\ud83d\\uddfc|\\ud83d\\uddfd|\\ud83d\\uddfe|\\ud83d\\uddff|\\ud83d\\ude00|\\ud83d\\ude01|\\ud83d\\ude02|\\ud83d\\ude03|\\ud83d\\ude04|\\ud83d\\ude05|\\ud83d\\ude06|\\ud83d\\ude07|\\ud83d\\ude08|\\ud83d\\ude09|\\ud83d\\ude0a|\\ud83d\\ude0b|\\ud83d\\ude0c|\\ud83d\\ude0d|\\ud83d\\ude0e|\\ud83d\\ude0f|\\ud83d\\ude10|\\ud83d\\ude11|\\ud83d\\ude12|\\ud83d\\ude13|\\ud83d\\ude14|\\ud83d\\ude15|\\ud83d\\ude16|\\ud83d\\ude17|\\ud83d\\ude18|\\ud83d\\ude19|\\ud83d\\ude1a|\\ud83d\\ude1b|\\ud83d\\ude1c|\\ud83d\\ude1d|\\ud83d\\ude1e|\\ud83d\\ude1f|\\ud83d\\ude20|\\ud83d\\ude21|\\ud83d\\ude22|\\ud83d\\ude23|\\ud83d\\ude24|\\ud83d\\ude25|\\ud83d\\ude26|\\ud83d\\ude27|\\ud83d\\ude28|\\ud83d\\ude29|\\ud83d\\ude2a|\\ud83d\\ude2b|\\ud83d\\ude2c|\\ud83d\\ude2d|\\ud83d\\ude2e|\\ud83d\\ude2f|\\ud83d\\ude30|\\ud83d\\ude31|\\ud83d\\ude32|\\ud83d\\ude33|\\ud83d\\ude34|\\ud83d\\ude35|\\ud83d\\ude36|\\ud83d\\ude37|\\ud83d\\ude38|\\ud83d\\ude39|\\ud83d\\ude3a|\\ud83d\\ude3b|\\ud83d\\ude3c|\\ud83d\\ude3d|\\ud83d\\ude3e|\\ud83d\\ude3f|\\ud83d\\ude40|\\ud83d\\ude41|\\ud83d\\ude42|\\ud83d\\ude43|\\ud83d\\ude44|\\ud83d\\ude45|\\ud83d\\ude46|\\ud83d\\ude47|\\ud83d\\ude48|\\ud83d\\ude49|\\ud83d\\ude4a|\\ud83d\\ude4b|\\ud83d\\ude4c|\\ud83d\\ude4d|\\ud83d\\ude4e|\\ud83d\\ude4f|\\ud83d\\ude80|\\ud83d\\ude81|\\ud83d\\ude82|\\ud83d\\ude83|\\ud83d\\ude84|\\ud83d\\ude85|\\ud83d\\ude86|\\ud83d\\ude87|\\ud83d\\ude88|\\ud83d\\ude89|\\ud83d\\ude8a|\\ud83d\\ude8b|\\ud83d\\ude8c|\\ud83d\\ude8d|\\ud83d\\ude8e|\\ud83d\\ude8f|\\ud83d\\ude90|\\ud83d\\ude91|\\ud83d\\ude92|\\ud83d\\ude93|\\ud83d\\ude94|\\ud83d\\ude95|\\ud83d\\ude96|\\ud83d\\ude97|\\ud83d\\ude98|\\ud83d\\ude99|\\ud83d\\ude9a|\\ud83d\\ude9b|\\ud83d\\ude9c|\\ud83d\\ude9d|\\ud83d\\ude9e|\\ud83d\\ude9f|\\ud83d\\udea0|\\ud83d\\udea1|\\ud83d\\udea2|\\ud83d\\udea3|\\ud83d\\udea4|\\ud83d\\udea5|\\ud83d\\udea6|\\ud83d\\udea7|\\ud83d\\udea8|\\ud83d\\udea9|\\ud83d\\udeaa|\\ud83d\\udeab|\\ud83d\\udeac|\\ud83d\\udead|\\ud83d\\udeae|\\ud83d\\udeaf|\\ud83d\\udeb0|\\ud83d\\udeb1|\\ud83d\\udeb2|\\ud83d\\udeb3|\\ud83d\\udeb4|\\ud83d\\udeb5|\\ud83d\\udeb6|\\ud83d\\udeb7|\\ud83d\\udeb8|\\ud83d\\udeb9|\\ud83d\\udeba|\\ud83d\\udebb|\\ud83d\\udebc|\\ud83d\\udebd|\\ud83d\\udebe|\\ud83d\\udebf|\\ud83d\\udec0|\\ud83d\\udec1|\\ud83d\\udec2|\\ud83d\\udec3|\\ud83d\\udec4|\\ud83d\\udec5|\\ud83d\\udecc|\\ud83d\\uded0|\\ud83d\\uded1|\\ud83d\\uded2|\\ud83d\\uded5|\\ud83d\\uded6|\\ud83d\\uded7|\\ud83d\\udedd|\\ud83d\\udede|\\ud83d\\udedf|\\ud83d\\udeeb|\\ud83d\\udeec|\\ud83d\\udef4|\\ud83d\\udef5|\\ud83d\\udef6|\\ud83d\\udef7|\\ud83d\\udef8|\\ud83d\\udef9|\\ud83d\\udefa|\\ud83d\\udefb|\\ud83d\\udefc|\\ud83d\\udfe0|\\ud83d\\udfe1|\\ud83d\\udfe2|\\ud83d\\udfe3|\\ud83d\\udfe4|\\ud83d\\udfe5|\\ud83d\\udfe6|\\ud83d\\udfe7|\\ud83d\\udfe8|\\ud83d\\udfe9|\\ud83d\\udfea|\\ud83d\\udfeb|\\ud83d\\udff0|\\ud83e\\udd0c|\\ud83e\\udd0d|\\ud83e\\udd0e|\\ud83e\\udd0f|\\ud83e\\udd10|\\ud83e\\udd11|\\ud83e\\udd12|\\ud83e\\udd13|\\ud83e\\udd14|\\ud83e\\udd15|\\ud83e\\udd16|\\ud83e\\udd17|\\ud83e\\udd18|\\ud83e\\udd19|\\ud83e\\udd1a|\\ud83e\\udd1b|\\ud83e\\udd1c|\\ud83e\\udd1d|\\ud83e\\udd1e|\\ud83e\\udd1f|\\ud83e\\udd20|\\ud83e\\udd21|\\ud83e\\udd22|\\ud83e\\udd23|\\ud83e\\udd24|\\ud83e\\udd25|\\ud83e\\udd26|\\ud83e\\udd27|\\ud83e\\udd28|\\ud83e\\udd29|\\ud83e\\udd2a|\\ud83e\\udd2b|\\ud83e\\udd2c|\\ud83e\\udd2d|\\ud83e\\udd2e|\\ud83e\\udd2f|\\ud83e\\udd30|\\ud83e\\udd31|\\ud83e\\udd32|\\ud83e\\udd33|\\ud83e\\udd34|\\ud83e\\udd35|\\ud83e\\udd36|\\ud83e\\udd37|\\ud83e\\udd38|\\ud83e\\udd39|\\ud83e\\udd3a|\\ud83e\\udd3c|\\ud83e\\udd3d|\\ud83e\\udd3e|\\ud83e\\udd3f|\\ud83e\\udd40|\\ud83e\\udd41|\\ud83e\\udd42|\\ud83e\\udd43|\\ud83e\\udd44|\\ud83e\\udd45|\\ud83e\\udd47|\\ud83e\\udd48|\\ud83e\\udd49|\\ud83e\\udd4a|\\ud83e\\udd4b|\\ud83e\\udd4c|\\ud83e\\udd4d|\\ud83e\\udd4e|\\ud83e\\udd4f|\\ud83e\\udd50|\\ud83e\\udd51|\\ud83e\\udd52|\\ud83e\\udd53|\\ud83e\\udd54|\\ud83e\\udd55|\\ud83e\\udd56|\\ud83e\\udd57|\\ud83e\\udd58|\\ud83e\\udd59|\\ud83e\\udd5a|\\ud83e\\udd5b|\\ud83e\\udd5c|\\ud83e\\udd5d|\\ud83e\\udd5e|\\ud83e\\udd5f|\\ud83e\\udd60|\\ud83e\\udd61|\\ud83e\\udd62|\\ud83e\\udd63|\\ud83e\\udd64|\\ud83e\\udd65|\\ud83e\\udd66|\\ud83e\\udd67|\\ud83e\\udd68|\\ud83e\\udd69|\\ud83e\\udd6a|\\ud83e\\udd6b|\\ud83e\\udd6c|\\ud83e\\udd6d|\\ud83e\\udd6e|\\ud83e\\udd6f|\\ud83e\\udd70|\\ud83e\\udd71|\\ud83e\\udd72|\\ud83e\\udd73|\\ud83e\\udd74|\\ud83e\\udd75|\\ud83e\\udd76|\\ud83e\\udd77|\\ud83e\\udd78|\\ud83e\\udd79|\\ud83e\\udd7a|\\ud83e\\udd7b|\\ud83e\\udd7c|\\ud83e\\udd7d|\\ud83e\\udd7e|\\ud83e\\udd7f|\\ud83e\\udd80|\\ud83e\\udd81|\\ud83e\\udd82|\\ud83e\\udd83|\\ud83e\\udd84|\\ud83e\\udd85|\\ud83e\\udd86|\\ud83e\\udd87|\\ud83e\\udd88|\\ud83e\\udd89|\\ud83e\\udd8a|\\ud83e\\udd8b|\\ud83e\\udd8c|\\ud83e\\udd8d|\\ud83e\\udd8e|\\ud83e\\udd8f|\\ud83e\\udd90|\\ud83e\\udd91|\\ud83e\\udd92|\\ud83e\\udd93|\\ud83e\\udd94|\\ud83e\\udd95|\\ud83e\\udd96|\\ud83e\\udd97|\\ud83e\\udd98|\\ud83e\\udd99|\\ud83e\\udd9a|\\ud83e\\udd9b|\\ud83e\\udd9c|\\ud83e\\udd9d|\\ud83e\\udd9e|\\ud83e\\udd9f|\\ud83e\\udda0|\\ud83e\\udda1|\\ud83e\\udda2|\\ud83e\\udda3|\\ud83e\\udda4|\\ud83e\\udda5|\\ud83e\\udda6|\\ud83e\\udda7|\\ud83e\\udda8|\\ud83e\\udda9|\\ud83e\\uddaa|\\ud83e\\uddab|\\ud83e\\uddac|\\ud83e\\uddad|\\ud83e\\uddae|\\ud83e\\uddaf|\\ud83e\\uddb0|\\ud83e\\uddb1|\\ud83e\\uddb2|\\ud83e\\uddb3|\\ud83e\\uddb4|\\ud83e\\uddb5|\\ud83e\\uddb6|\\ud83e\\uddb7|\\ud83e\\uddb8|\\ud83e\\uddb9|\\ud83e\\uddba|\\ud83e\\uddbb|\\ud83e\\uddbc|\\ud83e\\uddbd|\\ud83e\\uddbe|\\ud83e\\uddbf|\\ud83e\\uddc0|\\ud83e\\uddc1|\\ud83e\\uddc2|\\ud83e\\uddc3|\\ud83e\\uddc4|\\ud83e\\uddc5|\\ud83e\\uddc6|\\ud83e\\uddc7|\\ud83e\\uddc8|\\ud83e\\uddc9|\\ud83e\\uddca|\\ud83e\\uddcb|\\ud83e\\uddcc|\\ud83e\\uddcd|\\ud83e\\uddce|\\ud83e\\uddcf|\\ud83e\\uddd0|\\ud83e\\uddd1|\\ud83e\\uddd2|\\ud83e\\uddd3|\\ud83e\\uddd4|\\ud83e\\uddd5|\\ud83e\\uddd6|\\ud83e\\uddd7|\\ud83e\\uddd8|\\ud83e\\uddd9|\\ud83e\\uddda|\\ud83e\\udddb|\\ud83e\\udddc|\\ud83e\\udddd|\\ud83e\\uddde|\\ud83e\\udddf|\\ud83e\\udde0|\\ud83e\\udde1|\\ud83e\\udde2|\\ud83e\\udde3|\\ud83e\\udde4|\\ud83e\\udde5|\\ud83e\\udde6|\\ud83e\\udde7|\\ud83e\\udde8|\\ud83e\\udde9|\\ud83e\\uddea|\\ud83e\\uddeb|\\ud83e\\uddec|\\ud83e\\udded|\\ud83e\\uddee|\\ud83e\\uddef|\\ud83e\\uddf0|\\ud83e\\uddf1|\\ud83e\\uddf2|\\ud83e\\uddf3|\\ud83e\\uddf4|\\ud83e\\uddf5|\\ud83e\\uddf6|\\ud83e\\uddf7|\\ud83e\\uddf8|\\ud83e\\uddf9|\\ud83e\\uddfa|\\ud83e\\uddfb|\\ud83e\\uddfc|\\ud83e\\uddfd|\\ud83e\\uddfe|\\ud83e\\uddff|\\ud83e\\ude70|\\ud83e\\ude71|\\ud83e\\ude72|\\ud83e\\ude73|\\ud83e\\ude74|\\ud83e\\ude78|\\ud83e\\ude79|\\ud83e\\ude7a|\\ud83e\\ude7b|\\ud83e\\ude7c|\\ud83e\\ude80|\\ud83e\\ude81|\\ud83e\\ude82|\\ud83e\\ude83|\\ud83e\\ude84|\\ud83e\\ude85|\\ud83e\\ude86|\\ud83e\\ude90|\\ud83e\\ude91|\\ud83e\\ude92|\\ud83e\\ude93|\\ud83e\\ude94|\\ud83e\\ude95|\\ud83e\\ude96|\\ud83e\\ude97|\\ud83e\\ude98|\\ud83e\\ude99|\\ud83e\\ude9a|\\ud83e\\ude9b|\\ud83e\\ude9c|\\ud83e\\ude9d|\\ud83e\\ude9e|\\ud83e\\ude9f|\\ud83e\\udea0|\\ud83e\\udea1|\\ud83e\\udea2|\\ud83e\\udea3|\\ud83e\\udea4|\\ud83e\\udea5|\\ud83e\\udea6|\\ud83e\\udea7|\\ud83e\\udea8|\\ud83e\\udea9|\\ud83e\\udeaa|\\ud83e\\udeab|\\ud83e\\udeac|\\ud83e\\udeb0|\\ud83e\\udeb1|\\ud83e\\udeb2|\\ud83e\\udeb3|\\ud83e\\udeb4|\\ud83e\\udeb5|\\ud83e\\udeb6|\\ud83e\\udeb7|\\ud83e\\udeb8|\\ud83e\\udeb9|\\ud83e\\udeba|\\ud83e\\udec0|\\ud83e\\udec1|\\ud83e\\udec2|\\ud83e\\udec3|\\ud83e\\udec4|\\ud83e\\udec5|\\ud83e\\uded0|\\ud83e\\uded1|\\ud83e\\uded2|\\ud83e\\uded3|\\ud83e\\uded4|\\ud83e\\uded5|\\ud83e\\uded6|\\ud83e\\uded7|\\ud83e\\uded8|\\ud83e\\uded9|\\ud83e\\udee0|\\ud83e\\udee1|\\ud83e\\udee2|\\ud83e\\udee3|\\ud83e\\udee4|\\ud83e\\udee5|\\ud83e\\udee6|\\ud83e\\udee7|\\ud83e\\udef0|\\ud83e\\udef1|\\ud83e\\udef2|\\ud83e\\udef3|\\ud83e\\udef4|\\ud83e\\udef5|\\ud83e\\udef6)(?!︎)️?)|(?:\\#|\\*|0|1|2|3|4|5|6|7|8|9|©|®|‼|⁉|™|ℹ|↔|↕|↖|↗|↘|↙|↩|↪|⌚|⌛|⌨|⏏|⏩|⏪|⏫|⏬|⏭|⏮|⏯|⏰|⏱|⏲|⏳|⏸|⏹|⏺|Ⓜ|▪|▫|▶|◀|◻|◼|◽|◾|☀|☁|☂|☃|☄|☎|☑|☔|☕|☘|☝|☠|☢|☣|☦|☪|☮|☯|☸|☹|☺|♀|♂|♈|♉|♊|♋|♌|♍|♎|♏|♐|♑|♒|♓|♟|♠|♣|♥|♦|♨|♻|♾|♿|⚒|⚓|⚔|⚕|⚖|⚗|⚙|⚛|⚜|⚠|⚡|⚧|⚪|⚫|⚰|⚱|⚽|⚾|⛄|⛅|⛈|⛎|⛏|⛑|⛓|⛔|⛩|⛪|⛰|⛱|⛲|⛳|⛴|⛵|⛷|⛸|⛹|⛺|⛽|✂|✅|✈|✉|✊|✋|✌|✍|✏|✒|✔|✖|✝|✡|✨|✳|✴|❄|❇|❌|❎|❓|❔|❕|❗|❣|❤|➕|➖|➗|➡|➰|➿|⤴|⤵|⬅|⬆|⬇|⬛|⬜|⭐|⭕|〰|〽|㊗|㊙|\\ud83c\\udc04|\\ud83c\\udccf|\\ud83c\\udd70|\\ud83c\\udd71|\\ud83c\\udd7e|\\ud83c\\udd7f|\\ud83c\\udd8e|\\ud83c\\udd91|\\ud83c\\udd92|\\ud83c\\udd93|\\ud83c\\udd94|\\ud83c\\udd95|\\ud83c\\udd96|\\ud83c\\udd97|\\ud83c\\udd98|\\ud83c\\udd99|\\ud83c\\udd9a|\\ud83c\\udde6|\\ud83c\\udde7|\\ud83c\\udde8|\\ud83c\\udde9|\\ud83c\\uddea|\\ud83c\\uddeb|\\ud83c\\uddec|\\ud83c\\udded|\\ud83c\\uddee|\\ud83c\\uddef|\\ud83c\\uddf0|\\ud83c\\uddf1|\\ud83c\\uddf2|\\ud83c\\uddf3|\\ud83c\\uddf4|\\ud83c\\uddf5|\\ud83c\\uddf6|\\ud83c\\uddf7|\\ud83c\\uddf8|\\ud83c\\uddf9|\\ud83c\\uddfa|\\ud83c\\uddfb|\\ud83c\\uddfc|\\ud83c\\uddfd|\\ud83c\\uddfe|\\ud83c\\uddff|\\ud83c\\ude01|\\ud83c\\ude02|\\ud83c\\ude1a|\\ud83c\\ude2f|\\ud83c\\ude32|\\ud83c\\ude33|\\ud83c\\ude34|\\ud83c\\ude35|\\ud83c\\ude36|\\ud83c\\ude37|\\ud83c\\ude38|\\ud83c\\ude39|\\ud83c\\ude3a|\\ud83c\\ude50|\\ud83c\\ude51|\\ud83c\\udf00|\\ud83c\\udf01|\\ud83c\\udf02|\\ud83c\\udf03|\\ud83c\\udf04|\\ud83c\\udf05|\\ud83c\\udf06|\\ud83c\\udf07|\\ud83c\\udf08|\\ud83c\\udf09|\\ud83c\\udf0a|\\ud83c\\udf0b|\\ud83c\\udf0c|\\ud83c\\udf0d|\\ud83c\\udf0e|\\ud83c\\udf0f|\\ud83c\\udf10|\\ud83c\\udf11|\\ud83c\\udf12|\\ud83c\\udf13|\\ud83c\\udf14|\\ud83c\\udf15|\\ud83c\\udf16|\\ud83c\\udf17|\\ud83c\\udf18|\\ud83c\\udf19|\\ud83c\\udf1a|\\ud83c\\udf1b|\\ud83c\\udf1c|\\ud83c\\udf1d|\\ud83c\\udf1e|\\ud83c\\udf1f|\\ud83c\\udf20|\\ud83c\\udf21|\\ud83c\\udf24|\\ud83c\\udf25|\\ud83c\\udf26|\\ud83c\\udf27|\\ud83c\\udf28|\\ud83c\\udf29|\\ud83c\\udf2a|\\ud83c\\udf2b|\\ud83c\\udf2c|\\ud83c\\udf2d|\\ud83c\\udf2e|\\ud83c\\udf2f|\\ud83c\\udf30|\\ud83c\\udf31|\\ud83c\\udf32|\\ud83c\\udf33|\\ud83c\\udf34|\\ud83c\\udf35|\\ud83c\\udf36|\\ud83c\\udf37|\\ud83c\\udf38|\\ud83c\\udf39|\\ud83c\\udf3a|\\ud83c\\udf3b|\\ud83c\\udf3c|\\ud83c\\udf3d|\\ud83c\\udf3e|\\ud83c\\udf3f|\\ud83c\\udf40|\\ud83c\\udf41|\\ud83c\\udf42|\\ud83c\\udf43|\\ud83c\\udf44|\\ud83c\\udf45|\\ud83c\\udf46|\\ud83c\\udf47|\\ud83c\\udf48|\\ud83c\\udf49|\\ud83c\\udf4a|\\ud83c\\udf4b|\\ud83c\\udf4c|\\ud83c\\udf4d|\\ud83c\\udf4e|\\ud83c\\udf4f|\\ud83c\\udf50|\\ud83c\\udf51|\\ud83c\\udf52|\\ud83c\\udf53|\\ud83c\\udf54|\\ud83c\\udf55|\\ud83c\\udf56|\\ud83c\\udf57|\\ud83c\\udf58|\\ud83c\\udf59|\\ud83c\\udf5a|\\ud83c\\udf5b|\\ud83c\\udf5c|\\ud83c\\udf5d|\\ud83c\\udf5e|\\ud83c\\udf5f|\\ud83c\\udf60|\\ud83c\\udf61|\\ud83c\\udf62|\\ud83c\\udf63|\\ud83c\\udf64|\\ud83c\\udf65|\\ud83c\\udf66|\\ud83c\\udf67|\\ud83c\\udf68|\\ud83c\\udf69|\\ud83c\\udf6a|\\ud83c\\udf6b|\\ud83c\\udf6c|\\ud83c\\udf6d|\\ud83c\\udf6e|\\ud83c\\udf6f|\\ud83c\\udf70|\\ud83c\\udf71|\\ud83c\\udf72|\\ud83c\\udf73|\\ud83c\\udf74|\\ud83c\\udf75|\\ud83c\\udf76|\\ud83c\\udf77|\\ud83c\\udf78|\\ud83c\\udf79|\\ud83c\\udf7a|\\ud83c\\udf7b|\\ud83c\\udf7c|\\ud83c\\udf7d|\\ud83c\\udf7e|\\ud83c\\udf7f|\\ud83c\\udf80|\\ud83c\\udf81|\\ud83c\\udf82|\\ud83c\\udf83|\\ud83c\\udf84|\\ud83c\\udf85|\\ud83c\\udf86|\\ud83c\\udf87|\\ud83c\\udf88|\\ud83c\\udf89|\\ud83c\\udf8a|\\ud83c\\udf8b|\\ud83c\\udf8c|\\ud83c\\udf8d|\\ud83c\\udf8e|\\ud83c\\udf8f|\\ud83c\\udf90|\\ud83c\\udf91|\\ud83c\\udf92|\\ud83c\\udf93|\\ud83c\\udf96|\\ud83c\\udf97|\\ud83c\\udf99|\\ud83c\\udf9a|\\ud83c\\udf9b|\\ud83c\\udf9e|\\ud83c\\udf9f|\\ud83c\\udfa0|\\ud83c\\udfa1|\\ud83c\\udfa2|\\ud83c\\udfa3|\\ud83c\\udfa4|\\ud83c\\udfa5|\\ud83c\\udfa6|\\ud83c\\udfa7|\\ud83c\\udfa8|\\ud83c\\udfa9|\\ud83c\\udfaa|\\ud83c\\udfab|\\ud83c\\udfac|\\ud83c\\udfad|\\ud83c\\udfae|\\ud83c\\udfaf|\\ud83c\\udfb0|\\ud83c\\udfb1|\\ud83c\\udfb2|\\ud83c\\udfb3|\\ud83c\\udfb4|\\ud83c\\udfb5|\\ud83c\\udfb6|\\ud83c\\udfb7|\\ud83c\\udfb8|\\ud83c\\udfb9|\\ud83c\\udfba|\\ud83c\\udfbb|\\ud83c\\udfbc|\\ud83c\\udfbd|\\ud83c\\udfbe|\\ud83c\\udfbf|\\ud83c\\udfc0|\\ud83c\\udfc1|\\ud83c\\udfc2|\\ud83c\\udfc3|\\ud83c\\udfc4|\\ud83c\\udfc5|\\ud83c\\udfc6|\\ud83c\\udfc7|\\ud83c\\udfc8|\\ud83c\\udfc9|\\ud83c\\udfca|\\ud83c\\udfcb|\\ud83c\\udfcc|\\ud83c\\udfcd|\\ud83c\\udfce|\\ud83c\\udfcf|\\ud83c\\udfd0|\\ud83c\\udfd1|\\ud83c\\udfd2|\\ud83c\\udfd3|\\ud83c\\udfd4|\\ud83c\\udfd5|\\ud83c\\udfd6|\\ud83c\\udfd7|\\ud83c\\udfd8|\\ud83c\\udfd9|\\ud83c\\udfda|\\ud83c\\udfdb|\\ud83c\\udfdc|\\ud83c\\udfdd|\\ud83c\\udfde|\\ud83c\\udfdf|\\ud83c\\udfe0|\\ud83c\\udfe1|\\ud83c\\udfe2|\\ud83c\\udfe3|\\ud83c\\udfe4|\\ud83c\\udfe5|\\ud83c\\udfe6|\\ud83c\\udfe7|\\ud83c\\udfe8|\\ud83c\\udfe9|\\ud83c\\udfea|\\ud83c\\udfeb|\\ud83c\\udfec|\\ud83c\\udfed|\\ud83c\\udfee|\\ud83c\\udfef|\\ud83c\\udff0|\\ud83c\\udff3|\\ud83c\\udff4|\\ud83c\\udff5|\\ud83c\\udff7|\\ud83c\\udff8|\\ud83c\\udff9|\\ud83c\\udffa|\\ud83c\\udffb|\\ud83c\\udffc|\\ud83c\\udffd|\\ud83c\\udffe|\\ud83c\\udfff|\\ud83d\\udc00|\\ud83d\\udc01|\\ud83d\\udc02|\\ud83d\\udc03|\\ud83d\\udc04|\\ud83d\\udc05|\\ud83d\\udc06|\\ud83d\\udc07|\\ud83d\\udc08|\\ud83d\\udc09|\\ud83d\\udc0a|\\ud83d\\udc0b|\\ud83d\\udc0c|\\ud83d\\udc0d|\\ud83d\\udc0e|\\ud83d\\udc0f|\\ud83d\\udc10|\\ud83d\\udc11|\\ud83d\\udc12|\\ud83d\\udc13|\\ud83d\\udc14|\\ud83d\\udc15|\\ud83d\\udc16|\\ud83d\\udc17|\\ud83d\\udc18|\\ud83d\\udc19|\\ud83d\\udc1a|\\ud83d\\udc1b|\\ud83d\\udc1c|\\ud83d\\udc1d|\\ud83d\\udc1e|\\ud83d\\udc1f|\\ud83d\\udc20|\\ud83d\\udc21|\\ud83d\\udc22|\\ud83d\\udc23|\\ud83d\\udc24|\\ud83d\\udc25|\\ud83d\\udc26|\\ud83d\\udc27|\\ud83d\\udc28|\\ud83d\\udc29|\\ud83d\\udc2a|\\ud83d\\udc2b|\\ud83d\\udc2c|\\ud83d\\udc2d|\\ud83d\\udc2e|\\ud83d\\udc2f|\\ud83d\\udc30|\\ud83d\\udc31|\\ud83d\\udc32|\\ud83d\\udc33|\\ud83d\\udc34|\\ud83d\\udc35|\\ud83d\\udc36|\\ud83d\\udc37|\\ud83d\\udc38|\\ud83d\\udc39|\\ud83d\\udc3a|\\ud83d\\udc3b|\\ud83d\\udc3c|\\ud83d\\udc3d|\\ud83d\\udc3e|\\ud83d\\udc3f|\\ud83d\\udc40|\\ud83d\\udc41|\\ud83d\\udc42|\\ud83d\\udc43|\\ud83d\\udc44|\\ud83d\\udc45|\\ud83d\\udc46|\\ud83d\\udc47|\\ud83d\\udc48|\\ud83d\\udc49|\\ud83d\\udc4a|\\ud83d\\udc4b|\\ud83d\\udc4c|\\ud83d\\udc4d|\\ud83d\\udc4e|\\ud83d\\udc4f|\\ud83d\\udc50|\\ud83d\\udc51|\\ud83d\\udc52|\\ud83d\\udc53|\\ud83d\\udc54|\\ud83d\\udc55|\\ud83d\\udc56|\\ud83d\\udc57|\\ud83d\\udc58|\\ud83d\\udc59|\\ud83d\\udc5a|\\ud83d\\udc5b|\\ud83d\\udc5c|\\ud83d\\udc5d|\\ud83d\\udc5e|\\ud83d\\udc5f|\\ud83d\\udc60|\\ud83d\\udc61|\\ud83d\\udc62|\\ud83d\\udc63|\\ud83d\\udc64|\\ud83d\\udc65|\\ud83d\\udc66|\\ud83d\\udc67|\\ud83d\\udc68|\\ud83d\\udc69|\\ud83d\\udc6a|\\ud83d\\udc6b|\\ud83d\\udc6c|\\ud83d\\udc6d|\\ud83d\\udc6e|\\ud83d\\udc6f|\\ud83d\\udc70|\\ud83d\\udc71|\\ud83d\\udc72|\\ud83d\\udc73|\\ud83d\\udc74|\\ud83d\\udc75|\\ud83d\\udc76|\\ud83d\\udc77|\\ud83d\\udc78|\\ud83d\\udc79|\\ud83d\\udc7a|\\ud83d\\udc7b|\\ud83d\\udc7c|\\ud83d\\udc7d|\\ud83d\\udc7e|\\ud83d\\udc7f|\\ud83d\\udc80|\\ud83d\\udc81|\\ud83d\\udc82|\\ud83d\\udc83|\\ud83d\\udc84|\\ud83d\\udc85|\\ud83d\\udc86|\\ud83d\\udc87|\\ud83d\\udc88|\\ud83d\\udc89|\\ud83d\\udc8a|\\ud83d\\udc8b|\\ud83d\\udc8c|\\ud83d\\udc8d|\\ud83d\\udc8e|\\ud83d\\udc8f|\\ud83d\\udc90|\\ud83d\\udc91|\\ud83d\\udc92|\\ud83d\\udc93|\\ud83d\\udc94|\\ud83d\\udc95|\\ud83d\\udc96|\\ud83d\\udc97|\\ud83d\\udc98|\\ud83d\\udc99|\\ud83d\\udc9a|\\ud83d\\udc9b|\\ud83d\\udc9c|\\ud83d\\udc9d|\\ud83d\\udc9e|\\ud83d\\udc9f|\\ud83d\\udca0|\\ud83d\\udca1|\\ud83d\\udca2|\\ud83d\\udca3|\\ud83d\\udca4|\\ud83d\\udca5|\\ud83d\\udca6|\\ud83d\\udca7|\\ud83d\\udca8|\\ud83d\\udca9|\\ud83d\\udcaa|\\ud83d\\udcab|\\ud83d\\udcac|\\ud83d\\udcad|\\ud83d\\udcae|\\ud83d\\udcaf|\\ud83d\\udcb0|\\ud83d\\udcb1|\\ud83d\\udcb2|\\ud83d\\udcb3|\\ud83d\\udcb4|\\ud83d\\udcb5|\\ud83d\\udcb6|\\ud83d\\udcb7|\\ud83d\\udcb8|\\ud83d\\udcb9|\\ud83d\\udcba|\\ud83d\\udcbb|\\ud83d\\udcbc|\\ud83d\\udcbd|\\ud83d\\udcbe|\\ud83d\\udcbf|\\ud83d\\udcc0|\\ud83d\\udcc1|\\ud83d\\udcc2|\\ud83d\\udcc3|\\ud83d\\udcc4|\\ud83d\\udcc5|\\ud83d\\udcc6|\\ud83d\\udcc7|\\ud83d\\udcc8|\\ud83d\\udcc9|\\ud83d\\udcca|\\ud83d\\udccb|\\ud83d\\udccc|\\ud83d\\udccd|\\ud83d\\udcce|\\ud83d\\udccf|\\ud83d\\udcd0|\\ud83d\\udcd1|\\ud83d\\udcd2|\\ud83d\\udcd3|\\ud83d\\udcd4|\\ud83d\\udcd5|\\ud83d\\udcd6|\\ud83d\\udcd7|\\ud83d\\udcd8|\\ud83d\\udcd9|\\ud83d\\udcda|\\ud83d\\udcdb|\\ud83d\\udcdc|\\ud83d\\udcdd|\\ud83d\\udcde|\\ud83d\\udcdf|\\ud83d\\udce0|\\ud83d\\udce1|\\ud83d\\udce2|\\ud83d\\udce3|\\ud83d\\udce4|\\ud83d\\udce5|\\ud83d\\udce6|\\ud83d\\udce7|\\ud83d\\udce8|\\ud83d\\udce9|\\ud83d\\udcea|\\ud83d\\udceb|\\ud83d\\udcec|\\ud83d\\udced|\\ud83d\\udcee|\\ud83d\\udcef|\\ud83d\\udcf0|\\ud83d\\udcf1|\\ud83d\\udcf2|\\ud83d\\udcf3|\\ud83d\\udcf4|\\ud83d\\udcf5|\\ud83d\\udcf6|\\ud83d\\udcf7|\\ud83d\\udcf8|\\ud83d\\udcf9|\\ud83d\\udcfa|\\ud83d\\udcfb|\\ud83d\\udcfc|\\ud83d\\udcfd|\\ud83d\\udcff|\\ud83d\\udd00|\\ud83d\\udd01|\\ud83d\\udd02|\\ud83d\\udd03|\\ud83d\\udd04|\\ud83d\\udd05|\\ud83d\\udd06|\\ud83d\\udd07|\\ud83d\\udd08|\\ud83d\\udd09|\\ud83d\\udd0a|\\ud83d\\udd0b|\\ud83d\\udd0c|\\ud83d\\udd0d|\\ud83d\\udd0e|\\ud83d\\udd0f|\\ud83d\\udd10|\\ud83d\\udd11|\\ud83d\\udd12|\\ud83d\\udd13|\\ud83d\\udd14|\\ud83d\\udd15|\\ud83d\\udd16|\\ud83d\\udd17|\\ud83d\\udd18|\\ud83d\\udd19|\\ud83d\\udd1a|\\ud83d\\udd1b|\\ud83d\\udd1c|\\ud83d\\udd1d|\\ud83d\\udd1e|\\ud83d\\udd1f|\\ud83d\\udd20|\\ud83d\\udd21|\\ud83d\\udd22|\\ud83d\\udd23|\\ud83d\\udd24|\\ud83d\\udd25|\\ud83d\\udd26|\\ud83d\\udd27|\\ud83d\\udd28|\\ud83d\\udd29|\\ud83d\\udd2a|\\ud83d\\udd2b|\\ud83d\\udd2c|\\ud83d\\udd2d|\\ud83d\\udd2e|\\ud83d\\udd2f|\\ud83d\\udd30|\\ud83d\\udd31|\\ud83d\\udd32|\\ud83d\\udd33|\\ud83d\\udd34|\\ud83d\\udd35|\\ud83d\\udd36|\\ud83d\\udd37|\\ud83d\\udd38|\\ud83d\\udd39|\\ud83d\\udd3a|\\ud83d\\udd3b|\\ud83d\\udd3c|\\ud83d\\udd3d|\\ud83d\\udd49|\\ud83d\\udd4a|\\ud83d\\udd4b|\\ud83d\\udd4c|\\ud83d\\udd4d|\\ud83d\\udd4e|\\ud83d\\udd50|\\ud83d\\udd51|\\ud83d\\udd52|\\ud83d\\udd53|\\ud83d\\udd54|\\ud83d\\udd55|\\ud83d\\udd56|\\ud83d\\udd57|\\ud83d\\udd58|\\ud83d\\udd59|\\ud83d\\udd5a|\\ud83d\\udd5b|\\ud83d\\udd5c|\\ud83d\\udd5d|\\ud83d\\udd5e|\\ud83d\\udd5f|\\ud83d\\udd60|\\ud83d\\udd61|\\ud83d\\udd62|\\ud83d\\udd63|\\ud83d\\udd64|\\ud83d\\udd65|\\ud83d\\udd66|\\ud83d\\udd67|\\ud83d\\udd6f|\\ud83d\\udd70|\\ud83d\\udd73|\\ud83d\\udd74|\\ud83d\\udd75|\\ud83d\\udd76|\\ud83d\\udd77|\\ud83d\\udd78|\\ud83d\\udd79|\\ud83d\\udd7a|\\ud83d\\udd87|\\ud83d\\udd8a|\\ud83d\\udd8b|\\ud83d\\udd8c|\\ud83d\\udd8d|\\ud83d\\udd90|\\ud83d\\udd95|\\ud83d\\udd96|\\ud83d\\udda4|\\ud83d\\udda5|\\ud83d\\udda8|\\ud83d\\uddb1|\\ud83d\\uddb2|\\ud83d\\uddbc|\\ud83d\\uddc2|\\ud83d\\uddc3|\\ud83d\\uddc4|\\ud83d\\uddd1|\\ud83d\\uddd2|\\ud83d\\uddd3|\\ud83d\\udddc|\\ud83d\\udddd|\\ud83d\\uddde|\\ud83d\\udde1|\\ud83d\\udde3|\\ud83d\\udde8|\\ud83d\\uddef|\\ud83d\\uddf3|\\ud83d\\uddfa|\\ud83d\\uddfb|\\ud83d\\uddfc|\\ud83d\\uddfd|\\ud83d\\uddfe|\\ud83d\\uddff|\\ud83d\\ude00|\\ud83d\\ude01|\\ud83d\\ude02|\\ud83d\\ude03|\\ud83d\\ude04|\\ud83d\\ude05|\\ud83d\\ude06|\\ud83d\\ude07|\\ud83d\\ude08|\\ud83d\\ude09|\\ud83d\\ude0a|\\ud83d\\ude0b|\\ud83d\\ude0c|\\ud83d\\ude0d|\\ud83d\\ude0e|\\ud83d\\ude0f|\\ud83d\\ude10|\\ud83d\\ude11|\\ud83d\\ude12|\\ud83d\\ude13|\\ud83d\\ude14|\\ud83d\\ude15|\\ud83d\\ude16|\\ud83d\\ude17|\\ud83d\\ude18|\\ud83d\\ude19|\\ud83d\\ude1a|\\ud83d\\ude1b|\\ud83d\\ude1c|\\ud83d\\ude1d|\\ud83d\\ude1e|\\ud83d\\ude1f|\\ud83d\\ude20|\\ud83d\\ude21|\\ud83d\\ude22|\\ud83d\\ude23|\\ud83d\\ude24|\\ud83d\\ude25|\\ud83d\\ude26|\\ud83d\\ude27|\\ud83d\\ude28|\\ud83d\\ude29|\\ud83d\\ude2a|\\ud83d\\ude2b|\\ud83d\\ude2c|\\ud83d\\ude2d|\\ud83d\\ude2e|\\ud83d\\ude2f|\\ud83d\\ude30|\\ud83d\\ude31|\\ud83d\\ude32|\\ud83d\\ude33|\\ud83d\\ude34|\\ud83d\\ude35|\\ud83d\\ude36|\\ud83d\\ude37|\\ud83d\\ude38|\\ud83d\\ude39|\\ud83d\\ude3a|\\ud83d\\ude3b|\\ud83d\\ude3c|\\ud83d\\ude3d|\\ud83d\\ude3e|\\ud83d\\ude3f|\\ud83d\\ude40|\\ud83d\\ude41|\\ud83d\\ude42|\\ud83d\\ude43|\\ud83d\\ude44|\\ud83d\\ude45|\\ud83d\\ude46|\\ud83d\\ude47|\\ud83d\\ude48|\\ud83d\\ude49|\\ud83d\\ude4a|\\ud83d\\ude4b|\\ud83d\\ude4c|\\ud83d\\ude4d|\\ud83d\\ude4e|\\ud83d\\ude4f|\\ud83d\\ude80|\\ud83d\\ude81|\\ud83d\\ude82|\\ud83d\\ude83|\\ud83d\\ude84|\\ud83d\\ude85|\\ud83d\\ude86|\\ud83d\\ude87|\\ud83d\\ude88|\\ud83d\\ude89|\\ud83d\\ude8a|\\ud83d\\ude8b|\\ud83d\\ude8c|\\ud83d\\ude8d|\\ud83d\\ude8e|\\ud83d\\ude8f|\\ud83d\\ude90|\\ud83d\\ude91|\\ud83d\\ude92|\\ud83d\\ude93|\\ud83d\\ude94|\\ud83d\\ude95|\\ud83d\\ude96|\\ud83d\\ude97|\\ud83d\\ude98|\\ud83d\\ude99|\\ud83d\\ude9a|\\ud83d\\ude9b|\\ud83d\\ude9c|\\ud83d\\ude9d|\\ud83d\\ude9e|\\ud83d\\ude9f|\\ud83d\\udea0|\\ud83d\\udea1|\\ud83d\\udea2|\\ud83d\\udea3|\\ud83d\\udea4|\\ud83d\\udea5|\\ud83d\\udea6|\\ud83d\\udea7|\\ud83d\\udea8|\\ud83d\\udea9|\\ud83d\\udeaa|\\ud83d\\udeab|\\ud83d\\udeac|\\ud83d\\udead|\\ud83d\\udeae|\\ud83d\\udeaf|\\ud83d\\udeb0|\\ud83d\\udeb1|\\ud83d\\udeb2|\\ud83d\\udeb3|\\ud83d\\udeb4|\\ud83d\\udeb5|\\ud83d\\udeb6|\\ud83d\\udeb7|\\ud83d\\udeb8|\\ud83d\\udeb9|\\ud83d\\udeba|\\ud83d\\udebb|\\ud83d\\udebc|\\ud83d\\udebd|\\ud83d\\udebe|\\ud83d\\udebf|\\ud83d\\udec0|\\ud83d\\udec1|\\ud83d\\udec2|\\ud83d\\udec3|\\ud83d\\udec4|\\ud83d\\udec5|\\ud83d\\udecb|\\ud83d\\udecc|\\ud83d\\udecd|\\ud83d\\udece|\\ud83d\\udecf|\\ud83d\\uded0|\\ud83d\\uded1|\\ud83d\\uded2|\\ud83d\\uded5|\\ud83d\\uded6|\\ud83d\\uded7|\\ud83d\\udedd|\\ud83d\\udede|\\ud83d\\udedf|\\ud83d\\udee0|\\ud83d\\udee1|\\ud83d\\udee2|\\ud83d\\udee3|\\ud83d\\udee4|\\ud83d\\udee5|\\ud83d\\udee9|\\ud83d\\udeeb|\\ud83d\\udeec|\\ud83d\\udef0|\\ud83d\\udef3|\\ud83d\\udef4|\\ud83d\\udef5|\\ud83d\\udef6|\\ud83d\\udef7|\\ud83d\\udef8|\\ud83d\\udef9|\\ud83d\\udefa|\\ud83d\\udefb|\\ud83d\\udefc|\\ud83d\\udfe0|\\ud83d\\udfe1|\\ud83d\\udfe2|\\ud83d\\udfe3|\\ud83d\\udfe4|\\ud83d\\udfe5|\\ud83d\\udfe6|\\ud83d\\udfe7|\\ud83d\\udfe8|\\ud83d\\udfe9|\\ud83d\\udfea|\\ud83d\\udfeb|\\ud83d\\udff0|\\ud83e\\udd0c|\\ud83e\\udd0d|\\ud83e\\udd0e|\\ud83e\\udd0f|\\ud83e\\udd10|\\ud83e\\udd11|\\ud83e\\udd12|\\ud83e\\udd13|\\ud83e\\udd14|\\ud83e\\udd15|\\ud83e\\udd16|\\ud83e\\udd17|\\ud83e\\udd18|\\ud83e\\udd19|\\ud83e\\udd1a|\\ud83e\\udd1b|\\ud83e\\udd1c|\\ud83e\\udd1d|\\ud83e\\udd1e|\\ud83e\\udd1f|\\ud83e\\udd20|\\ud83e\\udd21|\\ud83e\\udd22|\\ud83e\\udd23|\\ud83e\\udd24|\\ud83e\\udd25|\\ud83e\\udd26|\\ud83e\\udd27|\\ud83e\\udd28|\\ud83e\\udd29|\\ud83e\\udd2a|\\ud83e\\udd2b|\\ud83e\\udd2c|\\ud83e\\udd2d|\\ud83e\\udd2e|\\ud83e\\udd2f|\\ud83e\\udd30|\\ud83e\\udd31|\\ud83e\\udd32|\\ud83e\\udd33|\\ud83e\\udd34|\\ud83e\\udd35|\\ud83e\\udd36|\\ud83e\\udd37|\\ud83e\\udd38|\\ud83e\\udd39|\\ud83e\\udd3a|\\ud83e\\udd3c|\\ud83e\\udd3d|\\ud83e\\udd3e|\\ud83e\\udd3f|\\ud83e\\udd40|\\ud83e\\udd41|\\ud83e\\udd42|\\ud83e\\udd43|\\ud83e\\udd44|\\ud83e\\udd45|\\ud83e\\udd47|\\ud83e\\udd48|\\ud83e\\udd49|\\ud83e\\udd4a|\\ud83e\\udd4b|\\ud83e\\udd4c|\\ud83e\\udd4d|\\ud83e\\udd4e|\\ud83e\\udd4f|\\ud83e\\udd50|\\ud83e\\udd51|\\ud83e\\udd52|\\ud83e\\udd53|\\ud83e\\udd54|\\ud83e\\udd55|\\ud83e\\udd56|\\ud83e\\udd57|\\ud83e\\udd58|\\ud83e\\udd59|\\ud83e\\udd5a|\\ud83e\\udd5b|\\ud83e\\udd5c|\\ud83e\\udd5d|\\ud83e\\udd5e|\\ud83e\\udd5f|\\ud83e\\udd60|\\ud83e\\udd61|\\ud83e\\udd62|\\ud83e\\udd63|\\ud83e\\udd64|\\ud83e\\udd65|\\ud83e\\udd66|\\ud83e\\udd67|\\ud83e\\udd68|\\ud83e\\udd69|\\ud83e\\udd6a|\\ud83e\\udd6b|\\ud83e\\udd6c|\\ud83e\\udd6d|\\ud83e\\udd6e|\\ud83e\\udd6f|\\ud83e\\udd70|\\ud83e\\udd71|\\ud83e\\udd72|\\ud83e\\udd73|\\ud83e\\udd74|\\ud83e\\udd75|\\ud83e\\udd76|\\ud83e\\udd77|\\ud83e\\udd78|\\ud83e\\udd79|\\ud83e\\udd7a|\\ud83e\\udd7b|\\ud83e\\udd7c|\\ud83e\\udd7d|\\ud83e\\udd7e|\\ud83e\\udd7f|\\ud83e\\udd80|\\ud83e\\udd81|\\ud83e\\udd82|\\ud83e\\udd83|\\ud83e\\udd84|\\ud83e\\udd85|\\ud83e\\udd86|\\ud83e\\udd87|\\ud83e\\udd88|\\ud83e\\udd89|\\ud83e\\udd8a|\\ud83e\\udd8b|\\ud83e\\udd8c|\\ud83e\\udd8d|\\ud83e\\udd8e|\\ud83e\\udd8f|\\ud83e\\udd90|\\ud83e\\udd91|\\ud83e\\udd92|\\ud83e\\udd93|\\ud83e\\udd94|\\ud83e\\udd95|\\ud83e\\udd96|\\ud83e\\udd97|\\ud83e\\udd98|\\ud83e\\udd99|\\ud83e\\udd9a|\\ud83e\\udd9b|\\ud83e\\udd9c|\\ud83e\\udd9d|\\ud83e\\udd9e|\\ud83e\\udd9f|\\ud83e\\udda0|\\ud83e\\udda1|\\ud83e\\udda2|\\ud83e\\udda3|\\ud83e\\udda4|\\ud83e\\udda5|\\ud83e\\udda6|\\ud83e\\udda7|\\ud83e\\udda8|\\ud83e\\udda9|\\ud83e\\uddaa|\\ud83e\\uddab|\\ud83e\\uddac|\\ud83e\\uddad|\\ud83e\\uddae|\\ud83e\\uddaf|\\ud83e\\uddb0|\\ud83e\\uddb1|\\ud83e\\uddb2|\\ud83e\\uddb3|\\ud83e\\uddb4|\\ud83e\\uddb5|\\ud83e\\uddb6|\\ud83e\\uddb7|\\ud83e\\uddb8|\\ud83e\\uddb9|\\ud83e\\uddba|\\ud83e\\uddbb|\\ud83e\\uddbc|\\ud83e\\uddbd|\\ud83e\\uddbe|\\ud83e\\uddbf|\\ud83e\\uddc0|\\ud83e\\uddc1|\\ud83e\\uddc2|\\ud83e\\uddc3|\\ud83e\\uddc4|\\ud83e\\uddc5|\\ud83e\\uddc6|\\ud83e\\uddc7|\\ud83e\\uddc8|\\ud83e\\uddc9|\\ud83e\\uddca|\\ud83e\\uddcb|\\ud83e\\uddcc|\\ud83e\\uddcd|\\ud83e\\uddce|\\ud83e\\uddcf|\\ud83e\\uddd0|\\ud83e\\uddd1|\\ud83e\\uddd2|\\ud83e\\uddd3|\\ud83e\\uddd4|\\ud83e\\uddd5|\\ud83e\\uddd6|\\ud83e\\uddd7|\\ud83e\\uddd8|\\ud83e\\uddd9|\\ud83e\\uddda|\\ud83e\\udddb|\\ud83e\\udddc|\\ud83e\\udddd|\\ud83e\\uddde|\\ud83e\\udddf|\\ud83e\\udde0|\\ud83e\\udde1|\\ud83e\\udde2|\\ud83e\\udde3|\\ud83e\\udde4|\\ud83e\\udde5|\\ud83e\\udde6|\\ud83e\\udde7|\\ud83e\\udde8|\\ud83e\\udde9|\\ud83e\\uddea|\\ud83e\\uddeb|\\ud83e\\uddec|\\ud83e\\udded|\\ud83e\\uddee|\\ud83e\\uddef|\\ud83e\\uddf0|\\ud83e\\uddf1|\\ud83e\\uddf2|\\ud83e\\uddf3|\\ud83e\\uddf4|\\ud83e\\uddf5|\\ud83e\\uddf6|\\ud83e\\uddf7|\\ud83e\\uddf8|\\ud83e\\uddf9|\\ud83e\\uddfa|\\ud83e\\uddfb|\\ud83e\\uddfc|\\ud83e\\uddfd|\\ud83e\\uddfe|\\ud83e\\uddff|\\ud83e\\ude70|\\ud83e\\ude71|\\ud83e\\ude72|\\ud83e\\ude73|\\ud83e\\ude74|\\ud83e\\ude78|\\ud83e\\ude79|\\ud83e\\ude7a|\\ud83e\\ude7b|\\ud83e\\ude7c|\\ud83e\\ude80|\\ud83e\\ude81|\\ud83e\\ude82|\\ud83e\\ude83|\\ud83e\\ude84|\\ud83e\\ude85|\\ud83e\\ude86|\\ud83e\\ude90|\\ud83e\\ude91|\\ud83e\\ude92|\\ud83e\\ude93|\\ud83e\\ude94|\\ud83e\\ude95|\\ud83e\\ude96|\\ud83e\\ude97|\\ud83e\\ude98|\\ud83e\\ude99|\\ud83e\\ude9a|\\ud83e\\ude9b|\\ud83e\\ude9c|\\ud83e\\ude9d|\\ud83e\\ude9e|\\ud83e\\ude9f|\\ud83e\\udea0|\\ud83e\\udea1|\\ud83e\\udea2|\\ud83e\\udea3|\\ud83e\\udea4|\\ud83e\\udea5|\\ud83e\\udea6|\\ud83e\\udea7|\\ud83e\\udea8|\\ud83e\\udea9|\\ud83e\\udeaa|\\ud83e\\udeab|\\ud83e\\udeac|\\ud83e\\udeb0|\\ud83e\\udeb1|\\ud83e\\udeb2|\\ud83e\\udeb3|\\ud83e\\udeb4|\\ud83e\\udeb5|\\ud83e\\udeb6|\\ud83e\\udeb7|\\ud83e\\udeb8|\\ud83e\\udeb9|\\ud83e\\udeba|\\ud83e\\udec0|\\ud83e\\udec1|\\ud83e\\udec2|\\ud83e\\udec3|\\ud83e\\udec4|\\ud83e\\udec5|\\ud83e\\uded0|\\ud83e\\uded1|\\ud83e\\uded2|\\ud83e\\uded3|\\ud83e\\uded4|\\ud83e\\uded5|\\ud83e\\uded6|\\ud83e\\uded7|\\ud83e\\uded8|\\ud83e\\uded9|\\ud83e\\udee0|\\ud83e\\udee1|\\ud83e\\udee2|\\ud83e\\udee3|\\ud83e\\udee4|\\ud83e\\udee5|\\ud83e\\udee6|\\ud83e\\udee7|\\ud83e\\udef0|\\ud83e\\udef1|\\ud83e\\udef2|\\ud83e\\udef3|\\ud83e\\udef4|\\ud83e\\udef5|\\ud83e\\udef6)))|(?:\\ud83c\\udff4(?:󠁡󠁤󠀰󠀲󠁾󠀸|󠁡󠁥󠁡󠁪|󠁡󠁥󠁡󠁺|󠁡󠁥󠁤󠁵|󠁡󠁥󠁦󠁵|󠁡󠁥󠁲󠁫|󠁡󠁥󠁳󠁨|󠁡󠁥󠁵󠁱|󠁡󠁦󠁢󠁡󠁬󠁾󠁭|󠁡󠁦󠁢󠁤󠁧|󠁡󠁦󠁢󠁤󠁳|󠁡󠁦󠁢󠁧󠁬|󠁡󠁦󠁤󠁡󠁹|󠁡󠁦󠁦󠁲󠁡|󠁡󠁦󠁦󠁹󠁢|󠁡󠁦󠁧󠁨󠁡|󠁡󠁦󠁧󠁨󠁯|󠁡󠁦󠁨󠁥󠁬|󠁡󠁦󠁨󠁥󠁲|󠁡󠁦󠁪󠁯󠁷|󠁡󠁦󠁫󠁡󠁢|󠁡󠁦󠁫󠁡󠁮|󠁡󠁦󠁫󠁡󠁰|󠁡󠁦󠁫󠁤󠁺|󠁡󠁦󠁫󠁨󠁯|󠁡󠁦󠁫󠁮󠁲|󠁡󠁦󠁬󠁡󠁧|󠁡󠁦󠁬󠁯󠁧|󠁡󠁦󠁮󠁡󠁮|󠁡󠁦󠁮󠁩󠁭|󠁡󠁦󠁮󠁵󠁲|󠁡󠁦󠁰󠁡󠁮|󠁡󠁦󠁰󠁡󠁲|󠁡󠁦󠁰󠁩󠁡|󠁡󠁦󠁰󠁫󠁡|󠁡󠁦󠁳󠁡󠁭|󠁡󠁦󠁳󠁡󠁲|󠁡󠁦󠁴󠁡󠁫|󠁡󠁦󠁵󠁲󠁵|󠁡󠁦󠁷󠁡󠁲|󠁡󠁦󠁺󠁡󠁢|󠁡󠁧󠀰󠀳󠁾󠀸|󠁡󠁧󠀱󠀰󠁾󠀱|󠁡󠁬󠀰󠀱󠁾󠀹|󠁡󠁬󠀱󠀰󠁾󠀲|󠁡󠁭󠁡󠁧|󠁡󠁭󠁡󠁲|󠁡󠁭󠁡󠁶|󠁡󠁭󠁥󠁲|󠁡󠁭󠁧󠁲|󠁡󠁭󠁫󠁴|󠁡󠁭󠁬󠁯|󠁡󠁭󠁳󠁨|󠁡󠁭󠁳󠁵|󠁡󠁭󠁴󠁶|󠁡󠁭󠁶󠁤|󠁡󠁯󠁢󠁧󠁯|󠁡󠁯󠁢󠁧󠁵|󠁡󠁯󠁢󠁩󠁥|󠁡󠁯󠁣󠁡󠁢|󠁡󠁯󠁣󠁣󠁵|󠁡󠁯󠁣󠁮󠁮󠁾󠁯|󠁡󠁯󠁣󠁵󠁳|󠁡󠁯󠁨󠁵󠁡|󠁡󠁯󠁨󠁵󠁩|󠁡󠁯󠁬󠁮󠁯|󠁡󠁯󠁬󠁳󠁵|󠁡󠁯󠁬󠁵󠁡|󠁡󠁯󠁭󠁡󠁬|󠁡󠁯󠁭󠁯󠁸|󠁡󠁯󠁮󠁡󠁭|󠁡󠁯󠁵󠁩󠁧|󠁡󠁯󠁺󠁡󠁩|󠁡󠁲󠁡󠁾󠁨|󠁡󠁲󠁪󠁾󠁮|󠁡󠁲󠁰󠁾󠁺|󠁡󠁴󠀱󠁾󠀹|󠁡󠁵󠁡󠁣󠁴|󠁡󠁵󠁮󠁳󠁷|󠁡󠁵󠁮󠁴|󠁡󠁵󠁱󠁬󠁤|󠁡󠁵󠁳󠁡|󠁡󠁵󠁴󠁡󠁳|󠁡󠁵󠁶󠁩󠁣|󠁡󠁵󠁷󠁡|󠁡󠁺󠁡󠁢󠁳|󠁡󠁺󠁡󠁧󠁡|󠁡󠁺󠁡󠁧󠁣|󠁡󠁺󠁡󠁧󠁭|󠁡󠁺󠁡󠁧󠁳|󠁡󠁺󠁡󠁧󠁵|󠁡󠁺󠁡󠁳󠁴|󠁡󠁺󠁢󠁡|󠁡󠁺󠁢󠁡󠁢|󠁡󠁺󠁢󠁡󠁬|󠁡󠁺󠁢󠁡󠁲|󠁡󠁺󠁢󠁥󠁹|󠁡󠁺󠁢󠁩󠁬|󠁡󠁺󠁣󠁡󠁢|󠁡󠁺󠁣󠁡󠁬|󠁡󠁺󠁣󠁵󠁬|󠁡󠁺󠁤󠁡󠁳|󠁡󠁺󠁦󠁵󠁺|󠁡󠁺󠁧󠁡|󠁡󠁺󠁧󠁡󠁤|󠁡󠁺󠁧󠁯󠁲|󠁡󠁺󠁧󠁯󠁹|󠁡󠁺󠁧󠁹󠁧|󠁡󠁺󠁨󠁡󠁣|󠁡󠁺󠁩󠁭󠁩|󠁡󠁺󠁩󠁳󠁭|󠁡󠁺󠁫󠁡󠁬|󠁡󠁺󠁫󠁡󠁮|󠁡󠁺󠁫󠁵󠁲|󠁡󠁺󠁬󠁡|󠁡󠁺󠁬󠁡󠁣|󠁡󠁺󠁬󠁡󠁮|󠁡󠁺󠁬󠁥󠁲|󠁡󠁺󠁭󠁡󠁳|󠁡󠁺󠁭󠁩|󠁡󠁺󠁮󠁡|󠁡󠁺󠁮󠁥󠁦|󠁡󠁺󠁮󠁶|󠁡󠁺󠁮󠁸|󠁡󠁺󠁯󠁧󠁵|󠁡󠁺󠁯󠁲󠁤|󠁡󠁺󠁱󠁡󠁢|󠁡󠁺󠁱󠁡󠁸|󠁡󠁺󠁱󠁡󠁺|󠁡󠁺󠁱󠁢󠁡|󠁡󠁺󠁱󠁢󠁩|󠁡󠁺󠁱󠁯󠁢|󠁡󠁺󠁱󠁵󠁳|󠁡󠁺󠁳󠁡|󠁡󠁺󠁳󠁡󠁢|󠁡󠁺󠁳󠁡󠁤|󠁡󠁺󠁳󠁡󠁨|󠁡󠁺󠁳󠁡󠁫󠁾󠁬|󠁡󠁺󠁳󠁡󠁲|󠁡󠁺󠁳󠁡󠁴|󠁡󠁺󠁳󠁢󠁮|󠁡󠁺󠁳󠁩󠁹|󠁡󠁺󠁳󠁫󠁲|󠁡󠁺󠁳󠁭|󠁡󠁺󠁳󠁭󠁩|󠁡󠁺󠁳󠁭󠁸|󠁡󠁺󠁳󠁲|󠁡󠁺󠁳󠁵󠁳|󠁡󠁺󠁴󠁡󠁲|󠁡󠁺󠁴󠁯󠁶|󠁡󠁺󠁵󠁣󠁡|󠁡󠁺󠁸󠁡|󠁡󠁺󠁸󠁡󠁣|󠁡󠁺󠁸󠁣󠁩|󠁡󠁺󠁸󠁩󠁺|󠁡󠁺󠁸󠁶󠁤|󠁡󠁺󠁹󠁡󠁲|󠁡󠁺󠁹󠁥|󠁡󠁺󠁹󠁥󠁶|󠁡󠁺󠁺󠁡󠁮|󠁡󠁺󠁺󠁡󠁱󠁾󠁲|󠁢󠁡󠁢󠁩󠁨|󠁢󠁡󠁢󠁲󠁣|󠁢󠁡󠁳󠁲󠁰|󠁢󠁢󠀰󠀱󠁾󠀹|󠁢󠁢󠀱󠀰󠁾󠀱|󠁢󠁤󠀰󠀱󠁾󠀹|󠁢󠁤󠀱󠀰󠁾󠀹|󠁢󠁤󠀲󠀰󠁾󠀹|󠁢󠁤󠀳󠀰󠁾󠀹|󠁢󠁤󠀴󠀰󠁾󠀹|󠁢󠁤󠀵󠀰󠁾󠀹|󠁢󠁤󠀶󠀰󠁾󠀴|󠁢󠁤󠁡󠁾󠁨|󠁢󠁥󠁢󠁲󠁵|󠁢󠁥󠁶󠁡󠁮|󠁢󠁥󠁶󠁢󠁲|󠁢󠁥󠁶󠁬󠁧|󠁢󠁥󠁶󠁬󠁩|󠁢󠁥󠁶󠁯󠁶|󠁢󠁥󠁶󠁷󠁶|󠁢󠁥󠁷󠁡󠁬|󠁢󠁥󠁷󠁢󠁲|󠁢󠁥󠁷󠁨󠁴|󠁢󠁥󠁷󠁬󠁧|󠁢󠁥󠁷󠁬󠁸|󠁢󠁥󠁷󠁮󠁡|󠁢󠁦󠀰󠀱󠁾󠀹|󠁢󠁦󠀱󠀰󠁾󠀳|󠁢󠁦󠁢󠁡󠁬󠁾󠁮|󠁢󠁦󠁢󠁡󠁺|󠁢󠁦󠁢󠁧󠁲|󠁢󠁦󠁢󠁬󠁧|󠁢󠁦󠁢󠁬󠁫|󠁢󠁦󠁣󠁯󠁭|󠁢󠁦󠁧󠁡󠁮|󠁢󠁦󠁧󠁮󠁡|󠁢󠁦󠁧󠁯󠁵|󠁢󠁦󠁨󠁯󠁵|󠁢󠁦󠁩󠁯󠁢|󠁢󠁦󠁫󠁡󠁤|󠁢󠁦󠁫󠁥󠁮|󠁢󠁦󠁫󠁭󠁤|󠁢󠁦󠁫󠁭󠁰|󠁢󠁦󠁫󠁯󠁰|󠁢󠁦󠁫󠁯󠁳󠁾󠁴|󠁢󠁦󠁫󠁯󠁷|󠁢󠁦󠁬󠁥󠁲|󠁢󠁦󠁬󠁯󠁲|󠁢󠁦󠁭󠁯󠁵|󠁢󠁦󠁮󠁡󠁭|󠁢󠁦󠁮󠁡󠁯|󠁢󠁦󠁮󠁡󠁹|󠁢󠁦󠁮󠁯󠁵|󠁢󠁦󠁯󠁵󠁢|󠁢󠁦󠁯󠁵󠁤|󠁢󠁦󠁰󠁡󠁳|󠁢󠁦󠁰󠁯󠁮|󠁢󠁦󠁳󠁥󠁮|󠁢󠁦󠁳󠁩󠁳|󠁢󠁦󠁳󠁭󠁴|󠁢󠁦󠁳󠁮󠁧|󠁢󠁦󠁳󠁯󠁭|󠁢󠁦󠁳󠁯󠁲|󠁢󠁦󠁴󠁡󠁰|󠁢󠁦󠁴󠁵󠁩|󠁢󠁦󠁹󠁡󠁧|󠁢󠁦󠁹󠁡󠁴|󠁢󠁦󠁺󠁩󠁲|󠁢󠁦󠁺󠁯󠁮|󠁢󠁦󠁺󠁯󠁵|󠁢󠁧󠀰󠀱󠁾󠀹|󠁢󠁧󠀱󠀰󠁾󠀹|󠁢󠁧󠀲󠀰󠁾󠀸|󠁢󠁨󠀱󠀳󠁾󠀵|󠁢󠁨󠀱󠀷|󠁢󠁩󠁢󠁢|󠁢󠁩󠁢󠁬󠁾󠁭|󠁢󠁩󠁢󠁲|󠁢󠁩󠁣󠁡|󠁢󠁩󠁣󠁩|󠁢󠁩󠁧󠁩|󠁢󠁩󠁫󠁩|󠁢󠁩󠁫󠁲|󠁢󠁩󠁫󠁹|󠁢󠁩󠁭󠁡|󠁢󠁩󠁭󠁵|󠁢󠁩󠁭󠁷|󠁢󠁩󠁭󠁹|󠁢󠁩󠁮󠁧|󠁢󠁩󠁲󠁭|󠁢󠁩󠁲󠁴|󠁢󠁩󠁲󠁹|󠁢󠁪󠁡󠁫󠁾󠁬|󠁢󠁪󠁡󠁱|󠁢󠁪󠁢󠁯|󠁢󠁪󠁣󠁯|󠁢󠁪󠁤󠁯|󠁢󠁪󠁫󠁯|󠁢󠁪󠁬󠁩|󠁢󠁪󠁭󠁯|󠁢󠁪󠁯󠁵|󠁢󠁪󠁰󠁬|󠁢󠁪󠁺󠁯|󠁢󠁮󠁢󠁥|󠁢󠁮󠁢󠁭|󠁢󠁮󠁴󠁥|󠁢󠁮󠁴󠁵|󠁢󠁯󠁢󠁾󠁣|󠁢󠁯󠁨|󠁢󠁯󠁬|󠁢󠁯󠁮󠁾󠁰|󠁢󠁯󠁳󠁾󠁴|󠁢󠁱󠁢󠁯|󠁢󠁱󠁳󠁡|󠁢󠁱󠁳󠁥|󠁢󠁲󠁡󠁣|󠁢󠁲󠁡󠁬󠁾󠁭|󠁢󠁲󠁡󠁰|󠁢󠁲󠁢󠁡|󠁢󠁲󠁣󠁥|󠁢󠁲󠁤󠁦|󠁢󠁲󠁥󠁳|󠁢󠁲󠁧󠁯|󠁢󠁲󠁭󠁡|󠁢󠁲󠁭󠁧|󠁢󠁲󠁭󠁳󠁾󠁴|󠁢󠁲󠁰󠁡󠁾󠁢|󠁢󠁲󠁰󠁥|󠁢󠁲󠁰󠁩|󠁢󠁲󠁰󠁲|󠁢󠁲󠁲󠁪|󠁢󠁲󠁲󠁮󠁾󠁯|󠁢󠁲󠁲󠁲󠁾󠁳|󠁢󠁲󠁳󠁣|󠁢󠁲󠁳󠁥|󠁢󠁲󠁳󠁰|󠁢󠁲󠁴󠁯|󠁢󠁳󠁡󠁫|󠁢󠁳󠁢󠁩|󠁢󠁳󠁢󠁰|󠁢󠁳󠁢󠁹|󠁢󠁳󠁣󠁥|󠁢󠁳󠁣󠁩|󠁢󠁳󠁣󠁫|󠁢󠁳󠁣󠁯|󠁢󠁳󠁣󠁳|󠁢󠁳󠁥󠁧|󠁢󠁳󠁥󠁸|󠁢󠁳󠁦󠁰|󠁢󠁳󠁧󠁣|󠁢󠁳󠁨󠁩|󠁢󠁳󠁨󠁴|󠁢󠁳󠁩󠁮|󠁢󠁳󠁬󠁩|󠁢󠁳󠁭󠁣|󠁢󠁳󠁭󠁧|󠁢󠁳󠁭󠁩|󠁢󠁳󠁮󠁥|󠁢󠁳󠁮󠁯󠁾󠁰|󠁢󠁳󠁮󠁳|󠁢󠁳󠁲󠁣|󠁢󠁳󠁲󠁩|󠁢󠁳󠁳󠁡|󠁢󠁳󠁳󠁥|󠁢󠁳󠁳󠁯|󠁢󠁳󠁳󠁳|󠁢󠁳󠁳󠁷|󠁢󠁳󠁷󠁧|󠁢󠁴󠀱󠀱󠁾󠀵|󠁢󠁴󠀲󠀱󠁾󠀴|󠁢󠁴󠀳󠀱󠁾󠀴|󠁢󠁴󠀴󠀱󠁾󠀵|󠁢󠁴󠁧󠁡|󠁢󠁴󠁴󠁹|󠁢󠁷󠁣󠁥|󠁢󠁷󠁣󠁨|󠁢󠁷󠁦󠁲|󠁢󠁷󠁧󠁡|󠁢󠁷󠁧󠁨|󠁢󠁷󠁪󠁷|󠁢󠁷󠁫󠁧|󠁢󠁷󠁫󠁬|󠁢󠁷󠁫󠁷|󠁢󠁷󠁬󠁯|󠁢󠁷󠁮󠁥|󠁢󠁷󠁮󠁷|󠁢󠁷󠁳󠁥|󠁢󠁷󠁳󠁯󠁾󠁰|󠁢󠁷󠁳󠁴|󠁢󠁹󠁢󠁲|󠁢󠁹󠁨󠁭|󠁢󠁹󠁨󠁯|󠁢󠁹󠁨󠁲|󠁢󠁹󠁭󠁡|󠁢󠁹󠁭󠁩|󠁢󠁹󠁶󠁩|󠁢󠁺󠁢󠁺|󠁢󠁺󠁣󠁹|󠁢󠁺󠁣󠁺󠁬|󠁢󠁺󠁯󠁷|󠁢󠁺󠁳󠁣|󠁢󠁺󠁴󠁯󠁬|󠁣󠁡󠁡󠁢|󠁣󠁡󠁢󠁣|󠁣󠁡󠁭󠁢|󠁣󠁡󠁮󠁢|󠁣󠁡󠁮󠁬|󠁣󠁡󠁮󠁳󠁾󠁵|󠁣󠁡󠁯󠁮|󠁣󠁡󠁰󠁥|󠁣󠁡󠁱󠁣|󠁣󠁡󠁳󠁫|󠁣󠁡󠁹󠁴|󠁣󠁤󠁢󠁣|󠁣󠁤󠁢󠁵|󠁣󠁤󠁥󠁱|󠁣󠁤󠁨󠁫󠁾󠁬|󠁣󠁤󠁨󠁵|󠁣󠁤󠁩󠁴|󠁣󠁤󠁫󠁣|󠁣󠁤󠁫󠁥|󠁣󠁤󠁫󠁧|󠁣󠁤󠁫󠁬|󠁣󠁤󠁫󠁮|󠁣󠁤󠁫󠁳|󠁣󠁤󠁬󠁯|󠁣󠁤󠁬󠁵|󠁣󠁤󠁭󠁡|󠁣󠁤󠁭󠁮󠁾󠁯|󠁣󠁤󠁮󠁫|󠁣󠁤󠁮󠁵|󠁣󠁤󠁳󠁡|󠁣󠁤󠁳󠁫|󠁣󠁤󠁳󠁵|󠁣󠁤󠁴󠁡|󠁣󠁤󠁴󠁯|󠁣󠁤󠁴󠁵|󠁣󠁦󠁡󠁣|󠁣󠁦󠁢󠁢|󠁣󠁦󠁢󠁧󠁦|󠁣󠁦󠁢󠁫|󠁣󠁦󠁨󠁫|󠁣󠁦󠁨󠁭|󠁣󠁦󠁨󠁳|󠁣󠁦󠁫󠁢|󠁣󠁦󠁫󠁧|󠁣󠁦󠁬󠁢|󠁣󠁦󠁭󠁢|󠁣󠁦󠁭󠁰|󠁣󠁦󠁮󠁭|󠁣󠁦󠁯󠁰|󠁣󠁦󠁳󠁥|󠁣󠁦󠁵󠁫|󠁣󠁦󠁶󠁫|󠁣󠁧󠀱󠀱󠁾󠀶|󠁣󠁧󠀲|󠁣󠁧󠀵|󠁣󠁧󠀷󠁾󠀹|󠁣󠁧󠁢󠁺󠁶|󠁣󠁨󠁡󠁧|󠁣󠁨󠁡󠁩|󠁣󠁨󠁡󠁲|󠁣󠁨󠁢󠁥|󠁣󠁨󠁢󠁬|󠁣󠁨󠁢󠁳|󠁣󠁨󠁦󠁲|󠁣󠁨󠁧󠁥|󠁣󠁨󠁧󠁬|󠁣󠁨󠁧󠁲|󠁣󠁨󠁪󠁵|󠁣󠁨󠁬󠁵|󠁣󠁨󠁮󠁥|󠁣󠁨󠁮󠁷|󠁣󠁨󠁯󠁷|󠁣󠁨󠁳󠁧󠁾󠁨|󠁣󠁨󠁳󠁯|󠁣󠁨󠁳󠁺|󠁣󠁨󠁴󠁧|󠁣󠁨󠁴󠁩|󠁣󠁨󠁵󠁲|󠁣󠁨󠁶󠁤|󠁣󠁨󠁶󠁳|󠁣󠁨󠁺󠁧󠁾󠁨|󠁣󠁩󠁡󠁢|󠁣󠁩󠁢󠁳|󠁣󠁩󠁣󠁭|󠁣󠁩󠁤󠁮|󠁣󠁩󠁧󠁤|󠁣󠁩󠁬󠁣|󠁣󠁩󠁬󠁧|󠁣󠁩󠁭󠁧|󠁣󠁩󠁳󠁭|󠁣󠁩󠁳󠁶|󠁣󠁩󠁶󠁢|󠁣󠁩󠁷󠁲|󠁣󠁩󠁹󠁭|󠁣󠁩󠁺󠁺|󠁣󠁬󠁡󠁩|󠁣󠁬󠁡󠁮|󠁣󠁬󠁡󠁰|󠁣󠁬󠁡󠁲|󠁣󠁬󠁡󠁴|󠁣󠁬󠁢󠁩|󠁣󠁬󠁣󠁯|󠁣󠁬󠁬󠁩|󠁣󠁬󠁬󠁬|󠁣󠁬󠁬󠁲|󠁣󠁬󠁭󠁡|󠁣󠁬󠁭󠁬|󠁣󠁬󠁮󠁢|󠁣󠁬󠁲󠁭|󠁣󠁬󠁴󠁡|󠁣󠁬󠁶󠁳|󠁣󠁭󠁡󠁤|󠁣󠁭󠁣󠁥|󠁣󠁭󠁥󠁮|󠁣󠁭󠁥󠁳|󠁣󠁭󠁬󠁴|󠁣󠁭󠁮󠁯|󠁣󠁭󠁮󠁷|󠁣󠁭󠁯󠁵|󠁣󠁭󠁳󠁵|󠁣󠁭󠁳󠁷|󠁣󠁮󠁡󠁨|󠁣󠁮󠁢󠁪|󠁣󠁮󠁣󠁱|󠁣󠁮󠁦󠁪|󠁣󠁮󠁧󠁤|󠁣󠁮󠁧󠁳|󠁣󠁮󠁧󠁸|󠁣󠁮󠁧󠁺|󠁣󠁮󠁨󠁡󠁾󠁢|󠁣󠁮󠁨󠁥|󠁣󠁮󠁨󠁩|󠁣󠁮󠁨󠁫󠁾󠁬|󠁣󠁮󠁨󠁮|󠁣󠁮󠁪󠁬|󠁣󠁮󠁪󠁳|󠁣󠁮󠁪󠁸|󠁣󠁮󠁬󠁮|󠁣󠁮󠁭󠁯|󠁣󠁮󠁮󠁭|󠁣󠁮󠁮󠁸|󠁣󠁮󠁱󠁨|󠁣󠁮󠁳󠁣󠁾󠁤|󠁣󠁮󠁳󠁨|󠁣󠁮󠁳󠁮|󠁣󠁮󠁳󠁸|󠁣󠁮󠁴󠁪|󠁣󠁮󠁴󠁷|󠁣󠁮󠁸󠁪|󠁣󠁮󠁸󠁺|󠁣󠁮󠁹󠁮|󠁣󠁮󠁺󠁪|󠁣󠁯󠁡󠁭󠁡|󠁣󠁯󠁡󠁮󠁴|󠁣󠁯󠁡󠁲󠁡|󠁣󠁯󠁡󠁴󠁬|󠁣󠁯󠁢󠁯󠁬|󠁣󠁯󠁢󠁯󠁹|󠁣󠁯󠁣󠁡󠁬|󠁣󠁯󠁣󠁡󠁱|󠁣󠁯󠁣󠁡󠁳|󠁣󠁯󠁣󠁡󠁵|󠁣󠁯󠁣󠁥󠁳|󠁣󠁯󠁣󠁨󠁯|󠁣󠁯󠁣󠁯󠁲|󠁣󠁯󠁣󠁵󠁮|󠁣󠁯󠁤󠁣|󠁣󠁯󠁧󠁵󠁡|󠁣󠁯󠁧󠁵󠁶|󠁣󠁯󠁨󠁵󠁩|󠁣󠁯󠁬󠁡󠁧|󠁣󠁯󠁭󠁡󠁧|󠁣󠁯󠁭󠁥󠁴|󠁣󠁯󠁮󠁡󠁲|󠁣󠁯󠁮󠁳󠁡|󠁣󠁯󠁰󠁵󠁴|󠁣󠁯󠁱󠁵󠁩|󠁣󠁯󠁲󠁩󠁳|󠁣󠁯󠁳󠁡󠁮|󠁣󠁯󠁳󠁡󠁰|󠁣󠁯󠁳󠁵󠁣|󠁣󠁯󠁴󠁯󠁬|󠁣󠁯󠁶󠁡󠁣|󠁣󠁯󠁶󠁡󠁵|󠁣󠁯󠁶󠁩󠁤|󠁣󠁲󠁡|󠁣󠁲󠁣|󠁣󠁲󠁧󠁾󠁨|󠁣󠁲󠁬|󠁣󠁲󠁰|󠁣󠁲󠁳󠁪|󠁣󠁵󠀰󠀱|󠁣󠁵󠀰󠀳󠁾󠀹|󠁣󠁵󠀱󠀰󠁾󠀶|󠁣󠁵󠀹󠀹|󠁣󠁶󠁢|󠁣󠁶󠁢󠁲|󠁣󠁶󠁢󠁶|󠁣󠁶󠁣󠁡|󠁣󠁶󠁣󠁦|󠁣󠁶󠁣󠁲|󠁣󠁶󠁭󠁡|󠁣󠁶󠁭󠁯|󠁣󠁶󠁰󠁡|󠁣󠁶󠁰󠁮|󠁣󠁶󠁰󠁲|󠁣󠁶󠁲󠁢|󠁣󠁶󠁲󠁧|󠁣󠁶󠁲󠁳|󠁣󠁶󠁳|󠁣󠁶󠁳󠁤|󠁣󠁶󠁳󠁦|󠁣󠁶󠁳󠁬󠁾󠁭|󠁣󠁶󠁳󠁯|󠁣󠁶󠁳󠁳|󠁣󠁶󠁳󠁶|󠁣󠁶󠁴󠁡|󠁣󠁶󠁴󠁳|󠁣󠁹󠀰󠀱󠁾󠀶|󠁣󠁺󠀱󠀰|󠁣󠁺󠀲󠀰|󠁣󠁺󠀲󠀰󠀱󠁾󠀹|󠁣󠁺󠀲󠀰󠁡󠁾󠁣|󠁣󠁺󠀳󠀱|󠁣󠁺󠀳󠀱󠀱󠁾󠀷|󠁣󠁺󠀳󠀲|󠁣󠁺󠀳󠀲󠀱󠁾󠀷|󠁣󠁺󠀴󠀱|󠁣󠁺󠀴󠀱󠀱󠁾󠀳|󠁣󠁺󠀴󠀲|󠁣󠁺󠀴󠀲󠀱󠁾󠀷|󠁣󠁺󠀵󠀱|󠁣󠁺󠀵󠀱󠀱󠁾󠀴|󠁣󠁺󠀵󠀲|󠁣󠁺󠀵󠀲󠀱󠁾󠀵|󠁣󠁺󠀵󠀳|󠁣󠁺󠀵󠀳󠀱󠁾󠀴|󠁣󠁺󠀶󠀳|󠁣󠁺󠀶󠀳󠀱󠁾󠀵|󠁣󠁺󠀶󠀴|󠁣󠁺󠀶󠀴󠀱󠁾󠀷|󠁣󠁺󠀷󠀱|󠁣󠁺󠀷󠀱󠀱󠁾󠀵|󠁣󠁺󠀷󠀲|󠁣󠁺󠀷󠀲󠀱󠁾󠀴|󠁣󠁺󠀸󠀰|󠁣󠁺󠀸󠀰󠀱󠁾󠀶|󠁤󠁥󠁢󠁢|󠁤󠁥󠁢󠁥|󠁤󠁥󠁢󠁷|󠁤󠁥󠁢󠁹|󠁤󠁥󠁨󠁢|󠁤󠁥󠁨󠁥|󠁤󠁥󠁨󠁨|󠁤󠁥󠁭󠁶|󠁤󠁥󠁮󠁩|󠁤󠁥󠁮󠁷|󠁤󠁥󠁲󠁰|󠁤󠁥󠁳󠁨|󠁤󠁥󠁳󠁬|󠁤󠁥󠁳󠁮|󠁤󠁥󠁳󠁴|󠁤󠁥󠁴󠁨|󠁤󠁪󠁡󠁲󠁾󠁳|󠁤󠁪󠁤󠁩󠁾󠁪|󠁤󠁪󠁯󠁢|󠁤󠁪󠁴󠁡|󠁤󠁫󠀸󠀱󠁾󠀵|󠁤󠁭󠀰󠀲󠁾󠀹|󠁤󠁭󠀱󠀰󠁾󠀱|󠁤󠁯󠀰󠀱󠁾󠀹|󠁤󠁯󠀱󠀰󠁾󠀹|󠁤󠁯󠀲󠀰󠁾󠀹|󠁤󠁯󠀳󠀰󠁾󠀹|󠁤󠁯󠀴󠀰󠁾󠀲|󠁤󠁺󠀰󠀱󠁾󠀹|󠁤󠁺󠀱󠀰󠁾󠀹|󠁤󠁺󠀲󠀰󠁾󠀹|󠁤󠁺󠀳󠀰󠁾󠀹|󠁤󠁺󠀴󠀰󠁾󠀸|󠁥󠁣󠁡󠁾󠁩|󠁥󠁣󠁬󠁾󠁰|󠁥󠁣󠁲󠁾󠁳|󠁥󠁣󠁳󠁤󠁾󠁥|󠁥󠁣󠁴󠁾󠁵|󠁥󠁣󠁷󠁾󠁺|󠁥󠁥󠀳󠀷|󠁥󠁥󠀳󠀹|󠁥󠁥󠀴󠀴|󠁥󠁥󠀴󠀹|󠁥󠁥󠀵󠀱|󠁥󠁥󠀵󠀷|󠁥󠁥󠀵󠀹|󠁥󠁥󠀶󠀵|󠁥󠁥󠀶󠀷|󠁥󠁥󠀷󠀰|󠁥󠁥󠀷󠀴|󠁥󠁥󠀷󠀸|󠁥󠁥󠀸󠀲|󠁥󠁥󠀸󠀴|󠁥󠁥󠀸󠀶|󠁥󠁧󠁡󠁬󠁸|󠁥󠁧󠁡󠁳󠁮|󠁥󠁧󠁡󠁳󠁴|󠁥󠁧󠁢󠁡|󠁥󠁧󠁢󠁨|󠁥󠁧󠁢󠁮󠁳|󠁥󠁧󠁣|󠁥󠁧󠁤󠁫|󠁥󠁧󠁤󠁴|󠁥󠁧󠁦󠁹󠁭|󠁥󠁧󠁧󠁨|󠁥󠁧󠁧󠁺|󠁥󠁧󠁩󠁳|󠁥󠁧󠁪󠁳|󠁥󠁧󠁫󠁢|󠁥󠁧󠁫󠁦󠁳|󠁥󠁧󠁫󠁮|󠁥󠁧󠁬󠁸|󠁥󠁧󠁭󠁮|󠁥󠁧󠁭󠁮󠁦|󠁥󠁧󠁭󠁴|󠁥󠁧󠁰󠁴󠁳|󠁥󠁧󠁳󠁨󠁧|󠁥󠁧󠁳󠁨󠁲|󠁥󠁧󠁳󠁩󠁮|󠁥󠁧󠁳󠁵󠁺|󠁥󠁧󠁷󠁡󠁤|󠁥󠁲󠁡󠁮|󠁥󠁲󠁤󠁫|󠁥󠁲󠁤󠁵|󠁥󠁲󠁧󠁢|󠁥󠁲󠁭󠁡|󠁥󠁲󠁳󠁫|󠁥󠁳󠁡|󠁥󠁳󠁡󠁢|󠁥󠁳󠁡󠁬|󠁥󠁳󠁡󠁮|󠁥󠁳󠁡󠁲󠁾󠁳|󠁥󠁳󠁡󠁶|󠁥󠁳󠁢|󠁥󠁳󠁢󠁡|󠁥󠁳󠁢󠁩|󠁥󠁳󠁢󠁵|󠁥󠁳󠁣|󠁥󠁳󠁣󠁡󠁾󠁣|󠁥󠁳󠁣󠁥|󠁥󠁳󠁣󠁬󠁾󠁯|󠁥󠁳󠁣󠁲󠁾󠁵|󠁥󠁳󠁥󠁸|󠁥󠁳󠁧󠁡|󠁥󠁳󠁧󠁣|󠁥󠁳󠁧󠁩|󠁥󠁳󠁧󠁲|󠁥󠁳󠁧󠁵|󠁥󠁳󠁨|󠁥󠁳󠁨󠁵|󠁥󠁳󠁩󠁢|󠁥󠁳󠁪|󠁥󠁳󠁬|󠁥󠁳󠁬󠁥|󠁥󠁳󠁬󠁯|󠁥󠁳󠁬󠁵|󠁥󠁳󠁭|󠁥󠁳󠁭󠁡|󠁥󠁳󠁭󠁣󠁾󠁤|󠁥󠁳󠁭󠁬|󠁥󠁳󠁭󠁵|󠁥󠁳󠁮󠁡|󠁥󠁳󠁮󠁣|󠁥󠁳󠁯|󠁥󠁳󠁯󠁲|󠁥󠁳󠁰|󠁥󠁳󠁰󠁭|󠁥󠁳󠁰󠁯|󠁥󠁳󠁰󠁶|󠁥󠁳󠁲󠁩|󠁥󠁳󠁳|󠁥󠁳󠁳󠁡|󠁥󠁳󠁳󠁥|󠁥󠁳󠁳󠁧|󠁥󠁳󠁳󠁯|󠁥󠁳󠁳󠁳|󠁥󠁳󠁴|󠁥󠁳󠁴󠁥󠁾󠁦|󠁥󠁳󠁴󠁯|󠁥󠁳󠁶|󠁥󠁳󠁶󠁡|󠁥󠁳󠁶󠁣|󠁥󠁳󠁶󠁩|󠁥󠁳󠁺|󠁥󠁳󠁺󠁡|󠁥󠁴󠁡󠁡|󠁥󠁴󠁡󠁦|󠁥󠁴󠁡󠁭|󠁥󠁴󠁢󠁥|󠁥󠁴󠁤󠁤|󠁥󠁴󠁧󠁡|󠁥󠁴󠁨󠁡|󠁥󠁴󠁯󠁲|󠁥󠁴󠁳󠁮󠁾󠁯|󠁥󠁴󠁴󠁩|󠁦󠁩󠀰󠀲󠁾󠀹|󠁦󠁩󠀱󠀰󠁾󠀹|󠁦󠁪󠀰󠀱󠁾󠀹|󠁦󠁪󠀱󠀰󠁾󠀴|󠁦󠁪󠁣|󠁦󠁪󠁥|󠁦󠁪󠁮|󠁦󠁪󠁲|󠁦󠁪󠁷|󠁦󠁭󠁫󠁳󠁡|󠁦󠁭󠁰󠁮󠁩|󠁦󠁭󠁴󠁲󠁫|󠁦󠁭󠁹󠁡󠁰|󠁦󠁲󠀰󠀱󠁾󠀹|󠁦󠁲󠀱󠀰󠁾󠀹|󠁦󠁲󠀲󠀱󠁾󠀹|󠁦󠁲󠀲󠁡󠁾󠁢|󠁦󠁲󠀳󠀰󠁾󠀹|󠁦󠁲󠀴󠀰󠁾󠀹|󠁦󠁲󠀵󠀰󠁾󠀹|󠁦󠁲󠀶󠀰󠁾󠀹|󠁦󠁲󠀷󠀰󠁾󠀹|󠁦󠁲󠀸󠀰󠁾󠀹|󠁦󠁲󠀹󠀰󠁾󠀵|󠁦󠁲󠁡󠁲󠁡|󠁦󠁲󠁢󠁦󠁣|󠁦󠁲󠁢󠁲󠁥|󠁦󠁲󠁣󠁯󠁲|󠁦󠁲󠁣󠁶󠁬|󠁦󠁲󠁧󠁥󠁳|󠁦󠁲󠁧󠁵󠁡|󠁦󠁲󠁨󠁤󠁦|󠁦󠁲󠁩󠁤󠁦|󠁦󠁲󠁬󠁲󠁥|󠁦󠁲󠁭󠁡󠁹|󠁦󠁲󠁮󠁡󠁱|󠁦󠁲󠁮󠁯󠁲|󠁦󠁲󠁯󠁣󠁣|󠁦󠁲󠁰󠁡󠁣|󠁦󠁲󠁰󠁤󠁬|󠁧󠁡󠀱󠁾󠀹|󠁧󠁢󠁡󠁢󠁣󠁾󠁥|󠁧󠁢󠁡󠁧󠁢|󠁧󠁢󠁡󠁧󠁹|󠁧󠁢󠁡󠁮󠁤|󠁧󠁢󠁡󠁮󠁮|󠁧󠁢󠁡󠁮󠁳|󠁧󠁢󠁢󠁡󠁳|󠁧󠁢󠁢󠁢󠁤|󠁧󠁢󠁢󠁤󠁦󠁾󠁧|󠁧󠁢󠁢󠁥󠁮|󠁧󠁢󠁢󠁥󠁸|󠁧󠁢󠁢󠁦󠁳|󠁧󠁢󠁢󠁧󠁥|󠁧󠁢󠁢󠁧󠁷|󠁧󠁢󠁢󠁩󠁲|󠁧󠁢󠁢󠁫󠁭|󠁧󠁢󠁢󠁭󠁨|󠁧󠁢󠁢󠁮󠁥|󠁧󠁢󠁢󠁮󠁨|󠁧󠁢󠁢󠁮󠁳|󠁧󠁢󠁢󠁯󠁬|󠁧󠁢󠁢󠁰󠁬|󠁧󠁢󠁢󠁲󠁣󠁾󠁤|󠁧󠁢󠁢󠁲󠁹|󠁧󠁢󠁢󠁳󠁴|󠁧󠁢󠁢󠁵󠁲|󠁧󠁢󠁣󠁡󠁭|󠁧󠁢󠁣󠁡󠁹|󠁧󠁢󠁣󠁢󠁦|󠁧󠁢󠁣󠁣󠁧|󠁧󠁢󠁣󠁧󠁮|󠁧󠁢󠁣󠁨󠁥|󠁧󠁢󠁣󠁨󠁷|󠁧󠁢󠁣󠁬󠁤|󠁧󠁢󠁣󠁬󠁫|󠁧󠁢󠁣󠁭󠁡|󠁧󠁢󠁣󠁭󠁤|󠁧󠁢󠁣󠁭󠁮|󠁧󠁢󠁣󠁯󠁮|󠁧󠁢󠁣󠁯󠁶|󠁧󠁢󠁣󠁲󠁦|󠁧󠁢󠁣󠁲󠁹|󠁧󠁢󠁣󠁷󠁹|󠁧󠁢󠁤󠁡󠁬|󠁧󠁢󠁤󠁢󠁹|󠁧󠁢󠁤󠁥󠁮|󠁧󠁢󠁤󠁥󠁲|󠁧󠁢󠁤󠁥󠁶|󠁧󠁢󠁤󠁧󠁹|󠁧󠁢󠁤󠁮󠁣󠁾󠁤|󠁧󠁢󠁤󠁯󠁲|󠁧󠁢󠁤󠁲󠁳|󠁧󠁢󠁤󠁵󠁤|󠁧󠁢󠁤󠁵󠁲|󠁧󠁢󠁥󠁡󠁬|󠁧󠁢󠁥󠁡󠁹|󠁧󠁢󠁥󠁤󠁨|󠁧󠁢󠁥󠁤󠁵|󠁧󠁢󠁥󠁬󠁮|󠁧󠁢󠁥󠁬󠁳|󠁧󠁢󠁥󠁮󠁦|󠁧󠁢󠁥󠁲󠁷|󠁧󠁢󠁥󠁲󠁹|󠁧󠁢󠁥󠁳󠁳|󠁧󠁢󠁥󠁳󠁸|󠁧󠁢󠁦󠁡󠁬|󠁧󠁢󠁦󠁩󠁦|󠁧󠁢󠁦󠁬󠁮|󠁧󠁢󠁦󠁭󠁯|󠁧󠁢󠁧󠁡󠁴|󠁧󠁢󠁧󠁬󠁧|󠁧󠁢󠁧󠁬󠁳|󠁧󠁢󠁧󠁲󠁥|󠁧󠁢󠁧󠁷󠁮|󠁧󠁢󠁨󠁡󠁬󠁾󠁭|󠁧󠁢󠁨󠁡󠁶|󠁧󠁢󠁨󠁣󠁫|󠁧󠁢󠁨󠁥󠁦|󠁧󠁢󠁨󠁩󠁬|󠁧󠁢󠁨󠁬󠁤|󠁧󠁢󠁨󠁭󠁦|󠁧󠁢󠁨󠁮󠁳|󠁧󠁢󠁨󠁰󠁬|󠁧󠁢󠁨󠁲󠁴|󠁧󠁢󠁨󠁲󠁷|󠁧󠁢󠁨󠁲󠁹|󠁧󠁢󠁩󠁯󠁳|󠁧󠁢󠁩󠁯󠁷|󠁧󠁢󠁩󠁳󠁬|󠁧󠁢󠁩󠁶󠁣|󠁧󠁢󠁫󠁥󠁣|󠁧󠁢󠁫󠁥󠁮|󠁧󠁢󠁫󠁨󠁬|󠁧󠁢󠁫󠁩󠁲|󠁧󠁢󠁫󠁴󠁴|󠁧󠁢󠁫󠁷󠁬|󠁧󠁢󠁬󠁡󠁮|󠁧󠁢󠁬󠁢󠁣|󠁧󠁢󠁬󠁢󠁨|󠁧󠁢󠁬󠁣󠁥|󠁧󠁢󠁬󠁤󠁳|󠁧󠁢󠁬󠁥󠁣|󠁧󠁢󠁬󠁥󠁷|󠁧󠁢󠁬󠁩󠁮|󠁧󠁢󠁬󠁩󠁶|󠁧󠁢󠁬󠁮󠁤|󠁧󠁢󠁬󠁵󠁴|󠁧󠁢󠁭󠁡󠁮|󠁧󠁢󠁭󠁤󠁢|󠁧󠁢󠁭󠁤󠁷|󠁧󠁢󠁭󠁥󠁡|󠁧󠁢󠁭󠁩󠁫|󠁧󠁢󠁭󠁬󠁮|󠁧󠁢󠁭󠁯󠁮|󠁧󠁢󠁭󠁲󠁴|󠁧󠁢󠁭󠁲󠁹|󠁧󠁢󠁭󠁴󠁹|󠁧󠁢󠁭󠁵󠁬|󠁧󠁢󠁮󠁡󠁹|󠁧󠁢󠁮󠁢󠁬|󠁧󠁢󠁮󠁥󠁬|󠁧󠁢󠁮󠁥󠁴|󠁧󠁢󠁮󠁦󠁫|󠁧󠁢󠁮󠁧󠁭|󠁧󠁢󠁮󠁬󠁫|󠁧󠁢󠁮󠁬󠁮|󠁧󠁢󠁮󠁭󠁤|󠁧󠁢󠁮󠁳󠁭|󠁧󠁢󠁮󠁴󠁨|󠁧󠁢󠁮󠁴󠁬|󠁧󠁢󠁮󠁴󠁴|󠁧󠁢󠁮󠁴󠁹|󠁧󠁢󠁮󠁷󠁭|󠁧󠁢󠁮󠁷󠁰|󠁧󠁢󠁮󠁹󠁫|󠁧󠁢󠁯󠁬󠁤|󠁧󠁢󠁯󠁲󠁫|󠁧󠁢󠁯󠁸󠁦|󠁧󠁢󠁰󠁥󠁭|󠁧󠁢󠁰󠁫󠁮|󠁧󠁢󠁰󠁬󠁹|󠁧󠁢󠁰󠁯󠁬|󠁧󠁢󠁰󠁯󠁲|󠁧󠁢󠁰󠁯󠁷|󠁧󠁢󠁰󠁴󠁥|󠁧󠁢󠁲󠁣󠁣|󠁧󠁢󠁲󠁣󠁨|󠁧󠁢󠁲󠁣󠁴|󠁧󠁢󠁲󠁤󠁢|󠁧󠁢󠁲󠁤󠁧|󠁧󠁢󠁲󠁦󠁷|󠁧󠁢󠁲󠁩󠁣|󠁧󠁢󠁲󠁯󠁴|󠁧󠁢󠁲󠁵󠁴|󠁧󠁢󠁳󠁡󠁷|󠁧󠁢󠁳󠁡󠁹|󠁧󠁢󠁳󠁣󠁢|󠁧󠁢󠁳󠁦󠁫|󠁧󠁢󠁳󠁦󠁴|󠁧󠁢󠁳󠁧󠁣|󠁧󠁢󠁳󠁨󠁦|󠁧󠁢󠁳󠁨󠁮|󠁧󠁢󠁳󠁨󠁲|󠁧󠁢󠁳󠁫󠁰|󠁧󠁢󠁳󠁬󠁦󠁾󠁧|󠁧󠁢󠁳󠁬󠁫|󠁧󠁢󠁳󠁮󠁤|󠁧󠁢󠁳󠁯󠁬󠁾󠁭|󠁧󠁢󠁳󠁯󠁳|󠁧󠁢󠁳󠁲󠁹|󠁧󠁢󠁳󠁴󠁥|󠁧󠁢󠁳󠁴󠁧󠁾󠁨|󠁧󠁢󠁳󠁴󠁮|󠁧󠁢󠁳󠁴󠁳󠁾󠁴|󠁧󠁢󠁳󠁴󠁹|󠁧󠁢󠁳󠁷󠁡|󠁧󠁢󠁳󠁷󠁤|󠁧󠁢󠁳󠁷󠁫|󠁧󠁢󠁴󠁡󠁭|󠁧󠁢󠁴󠁦󠁷|󠁧󠁢󠁴󠁨󠁲|󠁧󠁢󠁴󠁯󠁢|󠁧󠁢󠁴󠁯󠁦|󠁧󠁢󠁴󠁲󠁦|󠁧󠁢󠁴󠁷󠁨|󠁧󠁢󠁶󠁧󠁬|󠁧󠁢󠁷󠁡󠁲|󠁧󠁢󠁷󠁢󠁫|󠁧󠁢󠁷󠁤󠁵|󠁧󠁢󠁷󠁦󠁴|󠁧󠁢󠁷󠁧󠁮|󠁧󠁢󠁷󠁩󠁬|󠁧󠁢󠁷󠁫󠁦|󠁧󠁢󠁷󠁬󠁬|󠁧󠁢󠁷󠁬󠁮|󠁧󠁢󠁷󠁬󠁶|󠁧󠁢󠁷󠁮󠁤|󠁧󠁢󠁷󠁮󠁭|󠁧󠁢󠁷󠁯󠁫|󠁧󠁢󠁷󠁯󠁲|󠁧󠁢󠁷󠁲󠁬|󠁧󠁢󠁷󠁲󠁴|󠁧󠁢󠁷󠁲󠁸|󠁧󠁢󠁷󠁳󠁭|󠁧󠁢󠁷󠁳󠁸|󠁧󠁢󠁹󠁯󠁲|󠁧󠁢󠁺󠁥󠁴|󠁧󠁤󠀰󠀱󠁾󠀶|󠁧󠁤󠀱󠀰|󠁧󠁥󠁡󠁢|󠁧󠁥󠁡󠁪|󠁧󠁥󠁧󠁵|󠁧󠁥󠁩󠁭|󠁧󠁥󠁫󠁡|󠁧󠁥󠁫󠁫|󠁧󠁥󠁭󠁭|󠁧󠁥󠁲󠁬|󠁧󠁥󠁳󠁪󠁾󠁫|󠁧󠁥󠁳󠁺|󠁧󠁥󠁴󠁢|󠁧󠁨󠁡󠁡|󠁧󠁨󠁡󠁦|󠁧󠁨󠁡󠁨|󠁧󠁨󠁢󠁥|󠁧󠁨󠁢󠁯|󠁧󠁨󠁣󠁰|󠁧󠁨󠁥󠁰|󠁧󠁨󠁮󠁥|󠁧󠁨󠁮󠁰|󠁧󠁨󠁯󠁴|󠁧󠁨󠁳󠁶|󠁧󠁨󠁴󠁶|󠁧󠁨󠁵󠁥|󠁧󠁨󠁵󠁷|󠁧󠁨󠁷󠁮|󠁧󠁨󠁷󠁰|󠁧󠁬󠁡󠁶|󠁧󠁬󠁫󠁵|󠁧󠁬󠁱󠁥|󠁧󠁬󠁱󠁴|󠁧󠁬󠁳󠁭|󠁧󠁭󠁢|󠁧󠁭󠁬󠁾󠁮|󠁧󠁭󠁵|󠁧󠁭󠁷|󠁧󠁮󠁢|󠁧󠁮󠁢󠁥󠁾󠁦|󠁧󠁮󠁢󠁫|󠁧󠁮󠁣|󠁧󠁮󠁣󠁯|󠁧󠁮󠁤|󠁧󠁮󠁤󠁢|󠁧󠁮󠁤󠁩|󠁧󠁮󠁤󠁬|󠁧󠁮󠁤󠁵|󠁧󠁮󠁦|󠁧󠁮󠁦󠁡|󠁧󠁮󠁦󠁯|󠁧󠁮󠁦󠁲|󠁧󠁮󠁧󠁡|󠁧󠁮󠁧󠁵|󠁧󠁮󠁫|󠁧󠁮󠁫󠁡󠁾󠁢|󠁧󠁮󠁫󠁤󠁾󠁥|󠁧󠁮󠁫󠁮󠁾󠁯|󠁧󠁮󠁫󠁳|󠁧󠁮󠁬|󠁧󠁮󠁬󠁡|󠁧󠁮󠁬󠁥|󠁧󠁮󠁬󠁯|󠁧󠁮󠁭|󠁧󠁮󠁭󠁣󠁾󠁤|󠁧󠁮󠁭󠁬󠁾󠁭|󠁧󠁮󠁮|󠁧󠁮󠁮󠁺|󠁧󠁮󠁰󠁩|󠁧󠁮󠁳󠁩|󠁧󠁮󠁴󠁥|󠁧󠁮󠁴󠁯|󠁧󠁮󠁹󠁯|󠁧󠁱󠁡󠁮|󠁧󠁱󠁢󠁮|󠁧󠁱󠁢󠁳|󠁧󠁱󠁣|󠁧󠁱󠁣󠁳|󠁧󠁱󠁩|󠁧󠁱󠁫󠁮|󠁧󠁱󠁬󠁩|󠁧󠁱󠁷󠁮|󠁧󠁲󠀶󠀹|󠁧󠁲󠁡󠁾󠁭|󠁧󠁴󠁡󠁶|󠁧󠁴󠁢󠁶|󠁧󠁴󠁣󠁭|󠁧󠁴󠁣󠁱|󠁧󠁴󠁥󠁳|󠁧󠁴󠁧󠁵|󠁧󠁴󠁨󠁵|󠁧󠁴󠁩󠁺|󠁧󠁴󠁪󠁡|󠁧󠁴󠁪󠁵|󠁧󠁴󠁰󠁥|󠁧󠁴󠁰󠁲|󠁧󠁴󠁱󠁣|󠁧󠁴󠁱󠁺|󠁧󠁴󠁲󠁥|󠁧󠁴󠁳󠁡|󠁧󠁴󠁳󠁭|󠁧󠁴󠁳󠁯|󠁧󠁴󠁳󠁲|󠁧󠁴󠁳󠁵|󠁧󠁴󠁴󠁯|󠁧󠁴󠁺󠁡|󠁧󠁷󠁢󠁡|󠁧󠁷󠁢󠁬󠁾󠁭|󠁧󠁷󠁢󠁳|󠁧󠁷󠁣󠁡|󠁧󠁷󠁧󠁡|󠁧󠁷󠁬|󠁧󠁷󠁮|󠁧󠁷󠁯󠁩|󠁧󠁷󠁱󠁵|󠁧󠁷󠁳|󠁧󠁷󠁴󠁯|󠁧󠁹󠁢󠁡|󠁧󠁹󠁣󠁵|󠁧󠁹󠁤󠁥|󠁧󠁹󠁥󠁢|󠁧󠁹󠁥󠁳|󠁧󠁹󠁭󠁡|󠁧󠁹󠁰󠁭|󠁧󠁹󠁰󠁴|󠁧󠁹󠁵󠁤|󠁧󠁹󠁵󠁴|󠁨󠁮󠁡󠁴|󠁨󠁮󠁣󠁨|󠁨󠁮󠁣󠁬󠁾󠁭|󠁨󠁮󠁣󠁰|󠁨󠁮󠁣󠁲|󠁨󠁮󠁥󠁰|󠁨󠁮󠁦󠁭|󠁨󠁮󠁧󠁤|󠁨󠁮󠁩󠁢|󠁨󠁮󠁩󠁮|󠁨󠁮󠁬󠁥|󠁨󠁮󠁬󠁰|󠁨󠁮󠁯󠁣|󠁨󠁮󠁯󠁬|󠁨󠁮󠁳󠁢|󠁨󠁮󠁶󠁡|󠁨󠁮󠁹󠁯|󠁨󠁲󠀰󠀱󠁾󠀹|󠁨󠁲󠀱󠀰󠁾󠀹|󠁨󠁲󠀲󠀰󠁾󠀱|󠁨󠁴󠁡󠁲|󠁨󠁴󠁣󠁥|󠁨󠁴󠁧󠁡|󠁨󠁴󠁮󠁤󠁾󠁥|󠁨󠁴󠁮󠁩|󠁨󠁴󠁮󠁯|󠁨󠁴󠁯󠁵|󠁨󠁴󠁳󠁤󠁾󠁥|󠁨󠁵󠁢󠁡|󠁨󠁵󠁢󠁣|󠁨󠁵󠁢󠁥|󠁨󠁵󠁢󠁫|󠁨󠁵󠁢󠁵|󠁨󠁵󠁢󠁺|󠁨󠁵󠁣󠁳|󠁨󠁵󠁤󠁥|󠁨󠁵󠁤󠁵|󠁨󠁵󠁥󠁧|󠁨󠁵󠁥󠁲|󠁨󠁵󠁦󠁥|󠁨󠁵󠁧󠁳|󠁨󠁵󠁧󠁹|󠁨󠁵󠁨󠁢|󠁨󠁵󠁨󠁥|󠁨󠁵󠁨󠁶|󠁨󠁵󠁪󠁮|󠁨󠁵󠁫󠁥|󠁨󠁵󠁫󠁭|󠁨󠁵󠁫󠁶|󠁨󠁵󠁭󠁩|󠁨󠁵󠁮󠁫|󠁨󠁵󠁮󠁯|󠁨󠁵󠁮󠁹|󠁨󠁵󠁰󠁥|󠁨󠁵󠁰󠁳|󠁨󠁵󠁳󠁤|󠁨󠁵󠁳󠁦|󠁨󠁵󠁳󠁨|󠁨󠁵󠁳󠁫|󠁨󠁵󠁳󠁮󠁾󠁯|󠁨󠁵󠁳󠁳󠁾󠁴|󠁨󠁵󠁳󠁺|󠁨󠁵󠁴󠁢|󠁨󠁵󠁴󠁯|󠁨󠁵󠁶󠁡|󠁨󠁵󠁶󠁥|󠁨󠁵󠁶󠁭|󠁨󠁵󠁺󠁡|󠁨󠁵󠁺󠁥|󠁩󠁤󠁡󠁣|󠁩󠁤󠁢󠁡󠁾󠁢|󠁩󠁤󠁢󠁥|󠁩󠁤󠁢󠁴|󠁩󠁤󠁧󠁯|󠁩󠁤󠁪󠁡󠁾󠁢|󠁩󠁤󠁪󠁩|󠁩󠁤󠁪󠁫|󠁩󠁤󠁪󠁴|󠁩󠁤󠁪󠁷|󠁩󠁤󠁫󠁡󠁾󠁢|󠁩󠁤󠁫󠁩|󠁩󠁤󠁫󠁲󠁾󠁵|󠁩󠁤󠁬󠁡|󠁩󠁤󠁭󠁡|󠁩󠁤󠁭󠁬|󠁩󠁤󠁭󠁵|󠁩󠁤󠁮󠁢|󠁩󠁤󠁮󠁴󠁾󠁵|󠁩󠁤󠁰󠁡󠁾󠁢|󠁩󠁤󠁰󠁰|󠁩󠁤󠁲󠁩|󠁩󠁤󠁳󠁡󠁾󠁢|󠁩󠁤󠁳󠁧|󠁩󠁤󠁳󠁬󠁾󠁮|󠁩󠁤󠁳󠁲󠁾󠁵|󠁩󠁤󠁹󠁯|󠁩󠁥󠁣|󠁩󠁥󠁣󠁥|󠁩󠁥󠁣󠁮󠁾󠁯|󠁩󠁥󠁣󠁷|󠁩󠁥󠁤|󠁩󠁥󠁤󠁬|󠁩󠁥󠁧|󠁩󠁥󠁫󠁥|󠁩󠁥󠁫󠁫|󠁩󠁥󠁫󠁹|󠁩󠁥󠁬|󠁩󠁥󠁬󠁤|󠁩󠁥󠁬󠁨|󠁩󠁥󠁬󠁫|󠁩󠁥󠁬󠁭|󠁩󠁥󠁬󠁳|󠁩󠁥󠁭|󠁩󠁥󠁭󠁨|󠁩󠁥󠁭󠁮󠁾󠁯|󠁩󠁥󠁯󠁹|󠁩󠁥󠁲󠁮|󠁩󠁥󠁳󠁯|󠁩󠁥󠁴󠁡|󠁩󠁥󠁵|󠁩󠁥󠁷󠁤|󠁩󠁥󠁷󠁨|󠁩󠁥󠁷󠁷󠁾󠁸|󠁩󠁬󠁤|󠁩󠁬󠁨󠁡|󠁩󠁬󠁪󠁭|󠁩󠁬󠁭|󠁩󠁬󠁴󠁡|󠁩󠁬󠁺|󠁩󠁮󠁡󠁮|󠁩󠁮󠁡󠁰|󠁩󠁮󠁡󠁲󠁾󠁳|󠁩󠁮󠁢󠁲|󠁩󠁮󠁣󠁨|󠁩󠁮󠁣󠁴|󠁩󠁮󠁤󠁤|󠁩󠁮󠁤󠁬|󠁩󠁮󠁤󠁮|󠁩󠁮󠁧󠁡|󠁩󠁮󠁧󠁪|󠁩󠁮󠁨󠁰|󠁩󠁮󠁨󠁲|󠁩󠁮󠁪󠁨|󠁩󠁮󠁪󠁫|󠁩󠁮󠁫󠁡|󠁩󠁮󠁫󠁬|󠁩󠁮󠁬󠁡|󠁩󠁮󠁬󠁤|󠁩󠁮󠁭󠁨|󠁩󠁮󠁭󠁬|󠁩󠁮󠁭󠁮|󠁩󠁮󠁭󠁰|󠁩󠁮󠁭󠁺|󠁩󠁮󠁮󠁬|󠁩󠁮󠁯󠁲|󠁩󠁮󠁰󠁢|󠁩󠁮󠁰󠁹|󠁩󠁮󠁲󠁪|󠁩󠁮󠁳󠁫|󠁩󠁮󠁴󠁧|󠁩󠁮󠁴󠁮|󠁩󠁮󠁴󠁲|󠁩󠁮󠁵󠁰|󠁩󠁮󠁵󠁴|󠁩󠁮󠁷󠁢|󠁩󠁱󠁡󠁮|󠁩󠁱󠁡󠁲|󠁩󠁱󠁢󠁡󠁾󠁢|󠁩󠁱󠁢󠁧|󠁩󠁱󠁤󠁡|󠁩󠁱󠁤󠁩|󠁩󠁱󠁤󠁱|󠁩󠁱󠁫󠁡|󠁩󠁱󠁫󠁩|󠁩󠁱󠁭󠁡|󠁩󠁱󠁭󠁵|󠁩󠁱󠁮󠁡|󠁩󠁱󠁮󠁩|󠁩󠁱󠁱󠁡|󠁩󠁱󠁳󠁤|󠁩󠁱󠁳󠁵|󠁩󠁱󠁷󠁡|󠁩󠁲󠀰󠀱󠁾󠀸|󠁩󠁲󠀱󠀰󠁾󠀹|󠁩󠁲󠀲󠀰󠁾󠀹|󠁩󠁲󠀳󠀰󠁾󠀲|󠁩󠁳󠀱󠁾󠀸|󠁩󠁴󠀲󠀱|󠁩󠁴󠀲󠀳|󠁩󠁴󠀲󠀵|󠁩󠁴󠀳󠀲|󠁩󠁴󠀳󠀴|󠁩󠁴󠀳󠀶|󠁩󠁴󠀴󠀲|󠁩󠁴󠀴󠀵|󠁩󠁴󠀵󠀲|󠁩󠁴󠀵󠀵|󠁩󠁴󠀵󠀷|󠁩󠁴󠀶󠀲|󠁩󠁴󠀶󠀵|󠁩󠁴󠀶󠀷|󠁩󠁴󠀷󠀲|󠁩󠁴󠀷󠀵|󠁩󠁴󠀷󠀷󠁾󠀸|󠁩󠁴󠀸󠀲|󠁩󠁴󠀸󠀸|󠁩󠁴󠁡󠁧|󠁩󠁴󠁡󠁬|󠁩󠁴󠁡󠁮|󠁩󠁴󠁡󠁰󠁾󠁲|󠁩󠁴󠁡󠁴|󠁩󠁴󠁡󠁶|󠁩󠁴󠁢󠁡|󠁩󠁴󠁢󠁧|󠁩󠁴󠁢󠁩|󠁩󠁴󠁢󠁬|󠁩󠁴󠁢󠁮󠁾󠁯|󠁩󠁴󠁢󠁲󠁾󠁴|󠁩󠁴󠁢󠁺|󠁩󠁴󠁣󠁡󠁾󠁢|󠁩󠁴󠁣󠁥|󠁩󠁴󠁣󠁨|󠁩󠁴󠁣󠁬|󠁩󠁴󠁣󠁮󠁾󠁯|󠁩󠁴󠁣󠁲󠁾󠁴|󠁩󠁴󠁣󠁺|󠁩󠁴󠁥󠁮|󠁩󠁴󠁦󠁣|󠁩󠁴󠁦󠁥|󠁩󠁴󠁦󠁧|󠁩󠁴󠁦󠁩|󠁩󠁴󠁦󠁭|󠁩󠁴󠁦󠁲|󠁩󠁴󠁧󠁥|󠁩󠁴󠁧󠁲|󠁩󠁴󠁩󠁭|󠁩󠁴󠁩󠁳|󠁩󠁴󠁫󠁲|󠁩󠁴󠁬󠁣|󠁩󠁴󠁬󠁥|󠁩󠁴󠁬󠁩|󠁩󠁴󠁬󠁯|󠁩󠁴󠁬󠁴󠁾󠁵|󠁩󠁴󠁭󠁢󠁾󠁣|󠁩󠁴󠁭󠁥|󠁩󠁴󠁭󠁩|󠁩󠁴󠁭󠁮󠁾󠁯|󠁩󠁴󠁭󠁳󠁾󠁴|󠁩󠁴󠁮󠁡|󠁩󠁴󠁮󠁯|󠁩󠁴󠁮󠁵|󠁩󠁴󠁯󠁲|󠁩󠁴󠁰󠁡|󠁩󠁴󠁰󠁣󠁾󠁥|󠁩󠁴󠁰󠁧|󠁩󠁴󠁰󠁩|󠁩󠁴󠁰󠁯|󠁩󠁴󠁰󠁲|󠁩󠁴󠁰󠁴󠁾󠁶|󠁩󠁴󠁰󠁺|󠁩󠁴󠁲󠁡|󠁩󠁴󠁲󠁣|󠁩󠁴󠁲󠁥|󠁩󠁴󠁲󠁧|󠁩󠁴󠁲󠁩|󠁩󠁴󠁲󠁭󠁾󠁯|󠁩󠁴󠁳󠁡|󠁩󠁴󠁳󠁤|󠁩󠁴󠁳󠁩|󠁩󠁴󠁳󠁯󠁾󠁰|󠁩󠁴󠁳󠁲󠁾󠁳|󠁩󠁴󠁳󠁶|󠁩󠁴󠁴󠁡|󠁩󠁴󠁴󠁥|󠁩󠁴󠁴󠁮󠁾󠁰|󠁩󠁴󠁴󠁲|󠁩󠁴󠁴󠁶|󠁩󠁴󠁶󠁡󠁾󠁣|󠁩󠁴󠁶󠁥|󠁩󠁴󠁶󠁩|󠁩󠁴󠁶󠁲|󠁩󠁴󠁶󠁴|󠁩󠁴󠁶󠁶|󠁪󠁭󠀰󠀱󠁾󠀹|󠁪󠁭󠀱󠀰󠁾󠀴|󠁪󠁯󠁡󠁪|󠁪󠁯󠁡󠁭|󠁪󠁯󠁡󠁱|󠁪󠁯󠁡󠁴|󠁪󠁯󠁡󠁺|󠁪󠁯󠁢󠁡|󠁪󠁯󠁩󠁲|󠁪󠁯󠁪󠁡|󠁪󠁯󠁫󠁡|󠁪󠁯󠁭󠁡|󠁪󠁯󠁭󠁤|󠁪󠁯󠁭󠁮|󠁪󠁰󠀰󠀱󠁾󠀹|󠁪󠁰󠀱󠀰󠁾󠀹|󠁪󠁰󠀲󠀰󠁾󠀹|󠁪󠁰󠀳󠀰󠁾󠀹|󠁪󠁰󠀴󠀰󠁾󠀷|󠁫󠁥󠀰󠀱󠁾󠀹|󠁫󠁥󠀱󠀰󠁾󠀹|󠁫󠁥󠀲󠀰󠁾󠀹|󠁫󠁥󠀳󠀰󠁾󠀹|󠁫󠁥󠀴󠀰󠁾󠀷|󠁫󠁧󠁢󠁾󠁣|󠁫󠁧󠁧󠁢|󠁫󠁧󠁧󠁯|󠁫󠁧󠁪|󠁫󠁧󠁮󠁾󠁯|󠁫󠁧󠁴|󠁫󠁧󠁹|󠁫󠁨󠀱|󠁫󠁨󠀱󠀰󠁾󠀹|󠁫󠁨󠀲|󠁫󠁨󠀲󠀰󠁾󠀵|󠁫󠁨󠀳󠁾󠀹|󠁫󠁩󠁧|󠁫󠁩󠁬|󠁫󠁩󠁰|󠁫󠁭󠁡|󠁫󠁭󠁧|󠁫󠁭󠁭|󠁫󠁮󠀰󠀱󠁾󠀹|󠁫󠁮󠀱󠀰󠁾󠀳|󠁫󠁮󠀱󠀵|󠁫󠁮󠁫|󠁫󠁮󠁮|󠁫󠁰󠀰󠀱󠁾󠀹|󠁫󠁰󠀱󠀰|󠁫󠁰󠀱󠀳󠁾󠀴|󠁫󠁲󠀱󠀱|󠁫󠁲󠀲󠀶󠁾󠀹|󠁫󠁲󠀳󠀰󠁾󠀱|󠁫󠁲󠀴󠀱󠁾󠀹|󠁫󠁲󠀵󠀰|󠁫󠁷󠁡󠁨|󠁫󠁷󠁦󠁡|󠁫󠁷󠁨󠁡|󠁫󠁷󠁪󠁡|󠁫󠁷󠁫󠁵|󠁫󠁷󠁭󠁵|󠁫󠁺󠁡󠁫󠁭|󠁫󠁺󠁡󠁫󠁴|󠁫󠁺󠁡󠁬󠁡|󠁫󠁺󠁡󠁬󠁭|󠁫󠁺󠁡󠁳󠁴|󠁫󠁺󠁡󠁴󠁹|󠁫󠁺󠁢󠁡󠁹|󠁫󠁺󠁫󠁡󠁲|󠁫󠁺󠁫󠁵󠁳|󠁫󠁺󠁫󠁺󠁹|󠁫󠁺󠁭󠁡󠁮|󠁫󠁺󠁰󠁡󠁶|󠁫󠁺󠁳󠁥󠁶|󠁫󠁺󠁳󠁨󠁹|󠁫󠁺󠁶󠁯󠁳|󠁫󠁺󠁹󠁵󠁺|󠁫󠁺󠁺󠁡󠁰|󠁫󠁺󠁺󠁨󠁡|󠁬󠁡󠁡󠁴|󠁬󠁡󠁢󠁫󠁾󠁬|󠁬󠁡󠁣󠁨|󠁬󠁡󠁨󠁯|󠁬󠁡󠁫󠁨|󠁬󠁡󠁬󠁭|󠁬󠁡󠁬󠁰|󠁬󠁡󠁯󠁵|󠁬󠁡󠁰󠁨|󠁬󠁡󠁳󠁬|󠁬󠁡󠁳󠁶|󠁬󠁡󠁶󠁩|󠁬󠁡󠁶󠁴|󠁬󠁡󠁸󠁡|󠁬󠁡󠁸󠁥|󠁬󠁡󠁸󠁩|󠁬󠁡󠁸󠁳|󠁬󠁢󠁡󠁫|󠁬󠁢󠁡󠁳|󠁬󠁢󠁢󠁡|󠁬󠁢󠁢󠁨󠁾󠁩|󠁬󠁢󠁪󠁡|󠁬󠁢󠁪󠁬|󠁬󠁢󠁮󠁡|󠁬󠁣󠀰󠀱󠁾󠀳|󠁬󠁣󠀰󠀵󠁾󠀸|󠁬󠁣󠀱󠀰󠁾󠀲|󠁬󠁩󠀰󠀱󠁾󠀹|󠁬󠁩󠀱󠀰󠁾󠀱|󠁬󠁫󠀱|󠁬󠁫󠀱󠀱󠁾󠀳|󠁬󠁫󠀲|󠁬󠁫󠀲󠀱󠁾󠀳|󠁬󠁫󠀳|󠁬󠁫󠀳󠀱󠁾󠀳|󠁬󠁫󠀴|󠁬󠁫󠀴󠀱󠁾󠀵|󠁬󠁫󠀵|󠁬󠁫󠀵󠀱󠁾󠀳|󠁬󠁫󠀶|󠁬󠁫󠀶󠀱󠁾󠀲|󠁬󠁫󠀷|󠁬󠁫󠀷󠀱󠁾󠀲|󠁬󠁫󠀸|󠁬󠁫󠀸󠀱󠁾󠀲|󠁬󠁫󠀹|󠁬󠁫󠀹󠀱󠁾󠀲|󠁬󠁲󠁢󠁧|󠁬󠁲󠁢󠁭|󠁬󠁲󠁣󠁭|󠁬󠁲󠁧󠁢|󠁬󠁲󠁧󠁧|󠁬󠁲󠁧󠁫|󠁬󠁲󠁧󠁰|󠁬󠁲󠁬󠁯|󠁬󠁲󠁭󠁧|󠁬󠁲󠁭󠁯|󠁬󠁲󠁭󠁹|󠁬󠁲󠁮󠁩|󠁬󠁲󠁲󠁧|󠁬󠁲󠁲󠁩|󠁬󠁲󠁳󠁩|󠁬󠁳󠁡󠁾󠁨|󠁬󠁳󠁪󠁾󠁫|󠁬󠁴󠀰󠀱󠁾󠀹|󠁬󠁴󠀱󠀰󠁾󠀹|󠁬󠁴󠀲󠀰󠁾󠀹|󠁬󠁴󠀳󠀰󠁾󠀹|󠁬󠁴󠀴󠀰󠁾󠀹|󠁬󠁴󠀵󠀰󠁾󠀹|󠁬󠁴󠀶󠀰|󠁬󠁴󠁡󠁬|󠁬󠁴󠁫󠁬|󠁬󠁴󠁫󠁵|󠁬󠁴󠁭󠁲|󠁬󠁴󠁰󠁮|󠁬󠁴󠁳󠁡|󠁬󠁴󠁴󠁡|󠁬󠁴󠁴󠁥|󠁬󠁴󠁵󠁴|󠁬󠁴󠁶󠁬|󠁬󠁵󠁣󠁡|󠁬󠁵󠁣󠁬|󠁬󠁵󠁤󠁩|󠁬󠁵󠁥󠁣|󠁬󠁵󠁥󠁳|󠁬󠁵󠁧󠁲|󠁬󠁵󠁬󠁵|󠁬󠁵󠁭󠁥|󠁬󠁵󠁲󠁤|󠁬󠁵󠁲󠁭|󠁬󠁵󠁶󠁤|󠁬󠁵󠁷󠁩|󠁬󠁶󠀰󠀰󠀱󠁾󠀹|󠁬󠁶󠀰󠀱󠀰󠁾󠀹|󠁬󠁶󠀰󠀲󠀰󠁾󠀹|󠁬󠁶󠀰󠀳󠀰󠁾󠀹|󠁬󠁶󠀰󠀴󠀰󠁾󠀹|󠁬󠁶󠀰󠀵󠀰󠁾󠀹|󠁬󠁶󠀰󠀶󠀰󠁾󠀹|󠁬󠁶󠀰󠀷󠀰󠁾󠀹|󠁬󠁶󠀰󠀸󠀰󠁾󠀹|󠁬󠁶󠀰󠀹󠀰󠁾󠀹|󠁬󠁶󠀱󠀰󠀰󠁾󠀹|󠁬󠁶󠀱󠀱󠀰|󠁬󠁶󠁤󠁧󠁶|󠁬󠁶󠁪󠁥󠁬|󠁬󠁶󠁪󠁫󠁢|󠁬󠁶󠁪󠁵󠁲|󠁬󠁶󠁬󠁰󠁸|󠁬󠁶󠁲󠁥󠁺|󠁬󠁶󠁲󠁩󠁸|󠁬󠁶󠁶󠁥󠁮|󠁬󠁶󠁶󠁭󠁲|󠁬󠁹󠁢󠁡|󠁬󠁹󠁢󠁵|󠁬󠁹󠁤󠁲|󠁬󠁹󠁧󠁴|󠁬󠁹󠁪󠁡|󠁬󠁹󠁪󠁧|󠁬󠁹󠁪󠁩|󠁬󠁹󠁪󠁵|󠁬󠁹󠁫󠁦|󠁬󠁹󠁭󠁢|󠁬󠁹󠁭󠁩󠁾󠁪|󠁬󠁹󠁭󠁱|󠁬󠁹󠁮󠁬|󠁬󠁹󠁮󠁱|󠁬󠁹󠁳󠁢|󠁬󠁹󠁳󠁲|󠁬󠁹󠁴󠁢|󠁬󠁹󠁷󠁡|󠁬󠁹󠁷󠁤|󠁬󠁹󠁷󠁳|󠁬󠁹󠁺󠁡|󠁭󠁡󠀰󠀱󠁾󠀹|󠁭󠁡󠀱󠀰󠁾󠀲|󠁭󠁡󠁡󠁧󠁤|󠁭󠁡󠁡󠁯󠁵|󠁭󠁡󠁡󠁳󠁺|󠁭󠁡󠁡󠁺󠁩|󠁭󠁡󠁢󠁥󠁭|󠁭󠁡󠁢󠁥󠁲󠁾󠁳|󠁭󠁡󠁢󠁯󠁤|󠁭󠁡󠁢󠁯󠁭|󠁭󠁡󠁢󠁲󠁲|󠁭󠁡󠁣󠁡󠁳|󠁭󠁡󠁣󠁨󠁥|󠁭󠁡󠁣󠁨󠁩|󠁭󠁡󠁣󠁨󠁴|󠁭󠁡󠁤󠁲󠁩|󠁭󠁡󠁥󠁲󠁲|󠁭󠁡󠁥󠁳󠁩|󠁭󠁡󠁥󠁳󠁭|󠁭󠁡󠁦󠁡󠁨|󠁭󠁡󠁦󠁥󠁳|󠁭󠁡󠁦󠁩󠁧|󠁭󠁡󠁦󠁱󠁨|󠁭󠁡󠁧󠁵󠁥󠁾󠁦|󠁭󠁡󠁨󠁡󠁪|󠁭󠁡󠁨󠁡󠁯|󠁭󠁡󠁨󠁯󠁣|󠁭󠁡󠁩󠁦󠁲|󠁭󠁡󠁩󠁮󠁥|󠁭󠁡󠁪󠁤󠁩|󠁭󠁡󠁪󠁲󠁡|󠁭󠁡󠁫󠁥󠁮|󠁭󠁡󠁫󠁥󠁳|󠁭󠁡󠁫󠁨󠁥|󠁭󠁡󠁫󠁨󠁮󠁾󠁯|󠁭󠁡󠁬󠁡󠁡|󠁭󠁡󠁬󠁡󠁲|󠁭󠁡󠁭󠁡󠁲|󠁭󠁡󠁭󠁤󠁦|󠁭󠁡󠁭󠁥󠁤|󠁭󠁡󠁭󠁥󠁫|󠁭󠁡󠁭󠁩󠁤|󠁭󠁡󠁭󠁯󠁨|󠁭󠁡󠁭󠁯󠁵|󠁭󠁡󠁮󠁡󠁤|󠁭󠁡󠁮󠁯󠁵|󠁭󠁡󠁯󠁵󠁡|󠁭󠁡󠁯󠁵󠁤|󠁭󠁡󠁯󠁵󠁪|󠁭󠁡󠁯󠁵󠁺|󠁭󠁡󠁲󠁡󠁢|󠁭󠁡󠁲󠁥󠁨|󠁭󠁡󠁳󠁡󠁦|󠁭󠁡󠁳󠁡󠁬|󠁭󠁡󠁳󠁥󠁦|󠁭󠁡󠁳󠁥󠁴|󠁭󠁡󠁳󠁩󠁢|󠁭󠁡󠁳󠁩󠁦|󠁭󠁡󠁳󠁩󠁫󠁾󠁬|󠁭󠁡󠁳󠁫󠁨|󠁭󠁡󠁴󠁡󠁦|󠁭󠁡󠁴󠁡󠁩|󠁭󠁡󠁴󠁡󠁯|󠁭󠁡󠁴󠁡󠁲|󠁭󠁡󠁴󠁡󠁴|󠁭󠁡󠁴󠁡󠁺|󠁭󠁡󠁴󠁥󠁴|󠁭󠁡󠁴󠁩󠁮|󠁭󠁡󠁴󠁩󠁺|󠁭󠁡󠁴󠁮󠁧|󠁭󠁡󠁴󠁮󠁴|󠁭󠁡󠁹󠁵󠁳|󠁭󠁡󠁺󠁡󠁧|󠁭󠁣󠁣󠁬|󠁭󠁣󠁣󠁯|󠁭󠁣󠁦󠁯|󠁭󠁣󠁧󠁡|󠁭󠁣󠁪󠁥|󠁭󠁣󠁬󠁡|󠁭󠁣󠁭󠁡|󠁭󠁣󠁭󠁣|󠁭󠁣󠁭󠁧|󠁭󠁣󠁭󠁯|󠁭󠁣󠁭󠁵|󠁭󠁣󠁰󠁨|󠁭󠁣󠁳󠁤|󠁭󠁣󠁳󠁯󠁾󠁰|󠁭󠁣󠁳󠁲|󠁭󠁣󠁶󠁲|󠁭󠁤󠁡󠁮|󠁭󠁤󠁢󠁡|󠁭󠁤󠁢󠁤|󠁭󠁤󠁢󠁲󠁾󠁳|󠁭󠁤󠁣󠁡|󠁭󠁤󠁣󠁬󠁾󠁭|󠁭󠁤󠁣󠁲󠁾󠁵|󠁭󠁤󠁤󠁯|󠁭󠁤󠁤󠁲|󠁭󠁤󠁤󠁵|󠁭󠁤󠁥󠁤|󠁭󠁤󠁦󠁡|󠁭󠁤󠁦󠁬|󠁭󠁤󠁧󠁡|󠁭󠁤󠁧󠁬|󠁭󠁤󠁨󠁩|󠁭󠁤󠁩󠁡|󠁭󠁤󠁬󠁥|󠁭󠁤󠁮󠁩|󠁭󠁤󠁯󠁣|󠁭󠁤󠁯󠁲|󠁭󠁤󠁲󠁥|󠁭󠁤󠁲󠁩|󠁭󠁤󠁳󠁤|󠁭󠁤󠁳󠁩|󠁭󠁤󠁳󠁮󠁾󠁯|󠁭󠁤󠁳󠁴|󠁭󠁤󠁳󠁶|󠁭󠁤󠁴󠁡|󠁭󠁤󠁴󠁥|󠁭󠁤󠁵󠁮|󠁭󠁥󠀰󠀱󠁾󠀹|󠁭󠁥󠀱󠀰󠁾󠀹|󠁭󠁥󠀲󠀰󠁾󠀴|󠁭󠁧󠁡|󠁭󠁧󠁤|󠁭󠁧󠁦|󠁭󠁧󠁭|󠁭󠁧󠁴󠁾󠁵|󠁭󠁨󠁡󠁬󠁫󠁾󠁬|󠁭󠁨󠁡󠁲󠁮|󠁭󠁨󠁡󠁵󠁲|󠁭󠁨󠁥󠁢󠁯|󠁭󠁨󠁥󠁮󠁩|󠁭󠁨󠁪󠁡󠁢|󠁭󠁨󠁪󠁡󠁬|󠁭󠁨󠁫󠁩󠁬|󠁭󠁨󠁫󠁷󠁡|󠁭󠁨󠁬|󠁭󠁨󠁬󠁡󠁥|󠁭󠁨󠁬󠁩󠁢|󠁭󠁨󠁬󠁩󠁫|󠁭󠁨󠁭󠁡󠁪|󠁭󠁨󠁭󠁡󠁬|󠁭󠁨󠁭󠁥󠁪|󠁭󠁨󠁭󠁩󠁬|󠁭󠁨󠁮󠁭󠁫|󠁭󠁨󠁮󠁭󠁵|󠁭󠁨󠁲󠁯󠁮|󠁭󠁨󠁴|󠁭󠁨󠁵󠁪󠁡|󠁭󠁨󠁵󠁴󠁩|󠁭󠁨󠁷󠁴󠁨|󠁭󠁨󠁷󠁴󠁪|󠁭󠁫󠀱󠀰󠀱󠁾󠀹|󠁭󠁫󠀲󠀰󠀱󠁾󠀹|󠁭󠁫󠀲󠀱󠀰󠁾󠀱|󠁭󠁫󠀳󠀰󠀱|󠁭󠁫󠀳󠀰󠀳󠁾󠀴|󠁭󠁫󠀳󠀰󠀷󠁾󠀸|󠁭󠁫󠀳󠀱󠀰󠁾󠀳|󠁭󠁫󠀴󠀰󠀱󠁾󠀹|󠁭󠁫󠀴󠀱󠀰|󠁭󠁫󠀵󠀰󠀱󠁾󠀹|󠁭󠁫󠀶󠀰󠀱󠁾󠀹|󠁭󠁫󠀷󠀰󠀱󠁾󠀶|󠁭󠁫󠀸󠀰󠀱󠁾󠀹|󠁭󠁫󠀸󠀱󠀰󠁾󠀷|󠁭󠁬󠀱|󠁭󠁬󠀱󠀰|󠁭󠁬󠀲󠁾󠀹|󠁭󠁬󠁢󠁫󠁯|󠁭󠁭󠀰󠀱󠁾󠀷|󠁭󠁭󠀱󠀱󠁾󠀸|󠁭󠁮󠀰󠀳󠀵|󠁭󠁮󠀰󠀳󠀷|󠁭󠁮󠀰󠀳󠀹|󠁭󠁮󠀰󠀴󠀱|󠁭󠁮󠀰󠀴󠀳|󠁭󠁮󠀰󠀴󠀶󠁾󠀷|󠁭󠁮󠀰󠀴󠀹|󠁭󠁮󠀰󠀵󠀱|󠁭󠁮󠀰󠀵󠀳|󠁭󠁮󠀰󠀵󠀵|󠁭󠁮󠀰󠀵󠀷|󠁭󠁮󠀰󠀵󠀹|󠁭󠁮󠀰󠀶󠀱|󠁭󠁮󠀰󠀶󠀳󠁾󠀵|󠁭󠁮󠀰󠀶󠀷|󠁭󠁮󠀰󠀶󠀹|󠁭󠁮󠀰󠀷󠀱|󠁭󠁮󠀰󠀷󠀳|󠁭󠁮󠀱|󠁭󠁲󠀰󠀱󠁾󠀹|󠁭󠁲󠀱󠀰󠁾󠀵|󠁭󠁴󠀰󠀱󠁾󠀹|󠁭󠁴󠀱󠀰󠁾󠀹|󠁭󠁴󠀲󠀰󠁾󠀹|󠁭󠁴󠀳󠀰󠁾󠀹|󠁭󠁴󠀴󠀰󠁾󠀹|󠁭󠁴󠀵󠀰󠁾󠀹|󠁭󠁴󠀶󠀰󠁾󠀸|󠁭󠁵󠁡󠁧|󠁭󠁵󠁢󠁬|󠁭󠁵󠁢󠁲|󠁭󠁵󠁣󠁣|󠁭󠁵󠁣󠁵|󠁭󠁵󠁦󠁬|󠁭󠁵󠁧󠁰|󠁭󠁵󠁭󠁯|󠁭󠁵󠁰󠁡|󠁭󠁵󠁰󠁬|󠁭󠁵󠁰󠁵|󠁭󠁵󠁰󠁷|󠁭󠁵󠁱󠁢|󠁭󠁵󠁲󠁯|󠁭󠁵󠁲󠁲|󠁭󠁵󠁳󠁡|󠁭󠁵󠁶󠁰|󠁭󠁶󠀰󠀰󠁾󠀵|󠁭󠁶󠀰󠀷󠁾󠀸|󠁭󠁶󠀱󠀲󠁾󠀴|󠁭󠁶󠀱󠀷|󠁭󠁶󠀲󠀰|󠁭󠁶󠀲󠀳󠁾󠀹|󠁭󠁶󠁭󠁬󠁥|󠁭󠁷󠁢󠁡|󠁭󠁷󠁢󠁬|󠁭󠁷󠁣|󠁭󠁷󠁣󠁫|󠁭󠁷󠁣󠁲|󠁭󠁷󠁣󠁴|󠁭󠁷󠁤󠁥|󠁭󠁷󠁤󠁯|󠁭󠁷󠁫󠁲󠁾󠁳|󠁭󠁷󠁬󠁩|󠁭󠁷󠁬󠁫|󠁭󠁷󠁭󠁣|󠁭󠁷󠁭󠁧󠁾󠁨|󠁭󠁷󠁭󠁵|󠁭󠁷󠁭󠁷|󠁭󠁷󠁭󠁺|󠁭󠁷󠁮|󠁭󠁷󠁮󠁢|󠁭󠁷󠁮󠁥|󠁭󠁷󠁮󠁩|󠁭󠁷󠁮󠁫|󠁭󠁷󠁮󠁳|󠁭󠁷󠁮󠁵|󠁭󠁷󠁰󠁨|󠁭󠁷󠁲󠁵|󠁭󠁷󠁳|󠁭󠁷󠁳󠁡|󠁭󠁷󠁴󠁨|󠁭󠁷󠁺󠁯|󠁭󠁸󠁡󠁧󠁵|󠁭󠁸󠁢󠁣󠁮|󠁭󠁸󠁢󠁣󠁳|󠁭󠁸󠁣󠁡󠁭|󠁭󠁸󠁣󠁨󠁨|󠁭󠁸󠁣󠁨󠁰|󠁭󠁸󠁣󠁭󠁸|󠁭󠁸󠁣󠁯󠁡|󠁭󠁸󠁣󠁯󠁬|󠁭󠁸󠁤󠁵󠁲|󠁭󠁸󠁧󠁲󠁯|󠁭󠁸󠁧󠁵󠁡|󠁭󠁸󠁨󠁩󠁤|󠁭󠁸󠁪󠁡󠁬|󠁭󠁸󠁭󠁥󠁸|󠁭󠁸󠁭󠁩󠁣|󠁭󠁸󠁭󠁯󠁲|󠁭󠁸󠁮󠁡󠁹|󠁭󠁸󠁮󠁬󠁥|󠁭󠁸󠁯󠁡󠁸|󠁭󠁸󠁰󠁵󠁥|󠁭󠁸󠁱󠁵󠁥|󠁭󠁸󠁲󠁯󠁯|󠁭󠁸󠁳󠁩󠁮|󠁭󠁸󠁳󠁬󠁰|󠁭󠁸󠁳󠁯󠁮|󠁭󠁸󠁴󠁡󠁢|󠁭󠁸󠁴󠁡󠁭|󠁭󠁸󠁴󠁬󠁡|󠁭󠁸󠁶󠁥󠁲|󠁭󠁸󠁹󠁵󠁣|󠁭󠁸󠁺󠁡󠁣|󠁭󠁹󠀰󠀱󠁾󠀹|󠁭󠁹󠀱󠀰󠁾󠀶|󠁭󠁺󠁡󠁾󠁢|󠁭󠁺󠁧|󠁭󠁺󠁩|󠁭󠁺󠁬|󠁭󠁺󠁭󠁰󠁭|󠁭󠁺󠁮|󠁭󠁺󠁰󠁾󠁱|󠁭󠁺󠁳󠁾󠁴|󠁮󠁡󠁣󠁡|󠁮󠁡󠁥󠁲|󠁮󠁡󠁨󠁡|󠁮󠁡󠁫󠁡|󠁮󠁡󠁫󠁥|󠁮󠁡󠁫󠁨|󠁮󠁡󠁫󠁵|󠁮󠁡󠁫󠁷|󠁮󠁡󠁯󠁤|󠁮󠁡󠁯󠁨|󠁮󠁡󠁯󠁮|󠁮󠁡󠁯󠁳󠁾󠁴|󠁮󠁡󠁯󠁷|󠁮󠁥󠀱󠁾󠀸|󠁮󠁧󠁡󠁢|󠁮󠁧󠁡󠁤|󠁮󠁧󠁡󠁫|󠁮󠁧󠁡󠁮|󠁮󠁧󠁢󠁡|󠁮󠁧󠁢󠁥|󠁮󠁧󠁢󠁯|󠁮󠁧󠁢󠁹|󠁮󠁧󠁣󠁲|󠁮󠁧󠁤󠁥|󠁮󠁧󠁥󠁢|󠁮󠁧󠁥󠁤|󠁮󠁧󠁥󠁫|󠁮󠁧󠁥󠁮|󠁮󠁧󠁦󠁣|󠁮󠁧󠁧󠁯|󠁮󠁧󠁩󠁭|󠁮󠁧󠁪󠁩|󠁮󠁧󠁫󠁤󠁾󠁥|󠁮󠁧󠁫󠁮󠁾󠁯|󠁮󠁧󠁫󠁴|󠁮󠁧󠁫󠁷|󠁮󠁧󠁬󠁡|󠁮󠁧󠁮󠁡|󠁮󠁧󠁮󠁩|󠁮󠁧󠁯󠁧|󠁮󠁧󠁯󠁮|󠁮󠁧󠁯󠁳|󠁮󠁧󠁯󠁹|󠁮󠁧󠁰󠁬|󠁮󠁧󠁲󠁩|󠁮󠁧󠁳󠁯|󠁮󠁧󠁴󠁡|󠁮󠁧󠁹󠁯|󠁮󠁧󠁺󠁡|󠁮󠁩󠁡󠁮|󠁮󠁩󠁡󠁳|󠁮󠁩󠁢󠁯|󠁮󠁩󠁣󠁡|󠁮󠁩󠁣󠁩|󠁮󠁩󠁣󠁯|󠁮󠁩󠁥󠁳|󠁮󠁩󠁧󠁲|󠁮󠁩󠁪󠁩|󠁮󠁩󠁬󠁥|󠁮󠁩󠁭󠁤|󠁮󠁩󠁭󠁮|󠁮󠁩󠁭󠁳󠁾󠁴|󠁮󠁩󠁮󠁳|󠁮󠁩󠁲󠁩|󠁮󠁩󠁳󠁪|󠁮󠁬󠁢󠁱󠀱󠁾󠀳|󠁮󠁬󠁤󠁲|󠁮󠁬󠁦󠁬|󠁮󠁬󠁦󠁲|󠁮󠁬󠁧󠁥|󠁮󠁬󠁧󠁲|󠁮󠁬󠁬󠁩|󠁮󠁬󠁮󠁢|󠁮󠁬󠁮󠁨|󠁮󠁬󠁯󠁶|󠁮󠁬󠁵󠁴|󠁮󠁬󠁺󠁥|󠁮󠁬󠁺󠁨|󠁮󠁯󠀰󠀱󠁾󠀹|󠁮󠁯󠀱󠀰󠁾󠀲|󠁮󠁯󠀱󠀴󠁾󠀵|󠁮󠁯󠀱󠀸󠁾󠀹|󠁮󠁯󠀲󠀰󠁾󠀲|󠁮󠁯󠀵󠀰|󠁮󠁰󠀱󠁾󠀵|󠁮󠁰󠁢󠁡|󠁮󠁰󠁢󠁨|󠁮󠁰󠁤󠁨|󠁮󠁰󠁧󠁡|󠁮󠁰󠁪󠁡|󠁮󠁰󠁫󠁡|󠁮󠁰󠁫󠁯|󠁮󠁰󠁬󠁵|󠁮󠁰󠁭󠁡|󠁮󠁰󠁭󠁥|󠁮󠁰󠁮󠁡|󠁮󠁰󠁰󠀱󠁾󠀷|󠁮󠁰󠁲󠁡|󠁮󠁰󠁳󠁡|󠁮󠁰󠁳󠁥|󠁮󠁲󠀰󠀱󠁾󠀹|󠁮󠁲󠀱󠀰󠁾󠀴|󠁮󠁺󠁡󠁵󠁫|󠁮󠁺󠁢󠁯󠁰|󠁮󠁺󠁣󠁡󠁮|󠁮󠁺󠁣󠁩󠁴|󠁮󠁺󠁧󠁩󠁳|󠁮󠁺󠁨󠁫󠁢|󠁮󠁺󠁭󠁢󠁨|󠁮󠁺󠁭󠁷󠁴|󠁮󠁺󠁮󠁳󠁮|󠁮󠁺󠁮󠁴󠁬|󠁮󠁺󠁯󠁴󠁡|󠁮󠁺󠁳󠁴󠁬|󠁮󠁺󠁴󠁡󠁳|󠁮󠁺󠁴󠁫󠁩|󠁮󠁺󠁷󠁧󠁮|󠁮󠁺󠁷󠁫󠁯|󠁮󠁺󠁷󠁴󠁣|󠁯󠁭󠁢󠁪|󠁯󠁭󠁢󠁳|󠁯󠁭󠁢󠁵|󠁯󠁭󠁤󠁡|󠁯󠁭󠁭󠁡|󠁯󠁭󠁭󠁵|󠁯󠁭󠁳󠁪|󠁯󠁭󠁳󠁳|󠁯󠁭󠁷󠁵|󠁯󠁭󠁺󠁡|󠁯󠁭󠁺󠁵|󠁰󠁡󠀱|󠁰󠁡󠀱󠀰|󠁰󠁡󠀲󠁾󠀹|󠁰󠁡󠁥󠁭|󠁰󠁡󠁫󠁹|󠁰󠁡󠁮󠁢|󠁰󠁥󠁡󠁭󠁡|󠁰󠁥󠁡󠁮󠁣|󠁰󠁥󠁡󠁰󠁵|󠁰󠁥󠁡󠁲󠁥|󠁰󠁥󠁡󠁹󠁡|󠁰󠁥󠁣󠁡󠁪|󠁰󠁥󠁣󠁡󠁬|󠁰󠁥󠁣󠁵󠁳|󠁰󠁥󠁨󠁵󠁣|󠁰󠁥󠁨󠁵󠁶|󠁰󠁥󠁩󠁣󠁡|󠁰󠁥󠁪󠁵󠁮|󠁰󠁥󠁬󠁡󠁬󠁾󠁭|󠁰󠁥󠁬󠁩󠁭|󠁰󠁥󠁬󠁭󠁡|󠁰󠁥󠁬󠁯󠁲|󠁰󠁥󠁭󠁤󠁤|󠁰󠁥󠁭󠁯󠁱|󠁰󠁥󠁰󠁡󠁳|󠁰󠁥󠁰󠁩󠁵|󠁰󠁥󠁰󠁵󠁮|󠁰󠁥󠁳󠁡󠁭|󠁰󠁥󠁴󠁡󠁣|󠁰󠁥󠁴󠁵󠁭|󠁰󠁥󠁵󠁣󠁡|󠁰󠁧󠁣󠁰󠁫|󠁰󠁧󠁣󠁰󠁭|󠁰󠁧󠁥󠁢󠁲|󠁰󠁧󠁥󠁨󠁧|󠁰󠁧󠁥󠁰󠁷|󠁰󠁧󠁥󠁳󠁷|󠁰󠁧󠁧󠁰󠁫|󠁰󠁧󠁨󠁬󠁡|󠁰󠁧󠁪󠁷󠁫|󠁰󠁧󠁭󠁢󠁡|󠁰󠁧󠁭󠁰󠁬󠁾󠁭|󠁰󠁧󠁭󠁲󠁬|󠁰󠁧󠁮󠁣󠁤|󠁰󠁧󠁮󠁩󠁫|󠁰󠁧󠁮󠁰󠁰|󠁰󠁧󠁮󠁳󠁢|󠁰󠁧󠁳󠁡󠁮|󠁰󠁧󠁳󠁨󠁭|󠁰󠁧󠁷󠁢󠁫|󠁰󠁧󠁷󠁨󠁭|󠁰󠁧󠁷󠁰󠁤|󠁰󠁨󠀰󠀰󠁾󠀳|󠁰󠁨󠀰󠀵󠁾󠀹|󠁰󠁨󠀱󠀰󠁾󠀵|󠁰󠁨󠀴󠀰󠁾󠀱|󠁰󠁨󠁡󠁢󠁲|󠁰󠁨󠁡󠁧󠁮|󠁰󠁨󠁡󠁧󠁳|󠁰󠁨󠁡󠁫󠁬|󠁰󠁨󠁡󠁬󠁢|󠁰󠁨󠁡󠁮󠁴|󠁰󠁨󠁡󠁰󠁡|󠁰󠁨󠁡󠁵󠁲|󠁰󠁨󠁢󠁡󠁮|󠁰󠁨󠁢󠁡󠁳|󠁰󠁨󠁢󠁥󠁮|󠁰󠁨󠁢󠁩󠁬|󠁰󠁨󠁢󠁯󠁨|󠁰󠁨󠁢󠁴󠁧|󠁰󠁨󠁢󠁴󠁮|󠁰󠁨󠁢󠁵󠁫󠁾󠁬|󠁰󠁨󠁣󠁡󠁧|󠁰󠁨󠁣󠁡󠁭󠁾󠁮|󠁰󠁨󠁣󠁡󠁰|󠁰󠁨󠁣󠁡󠁳󠁾󠁴|󠁰󠁨󠁣󠁡󠁶|󠁰󠁨󠁣󠁥󠁢|󠁰󠁨󠁣󠁯󠁭|󠁰󠁨󠁤󠁡󠁯|󠁰󠁨󠁤󠁡󠁳|󠁰󠁨󠁤󠁡󠁶|󠁰󠁨󠁤󠁩󠁮|󠁰󠁨󠁤󠁶󠁯|󠁰󠁨󠁥󠁡󠁳|󠁰󠁨󠁧󠁵󠁩|󠁰󠁨󠁩󠁦󠁵|󠁰󠁨󠁩󠁬󠁩|󠁰󠁨󠁩󠁬󠁮|󠁰󠁨󠁩󠁬󠁳|󠁰󠁨󠁩󠁳󠁡|󠁰󠁨󠁫󠁡󠁬|󠁰󠁨󠁬󠁡󠁧|󠁰󠁨󠁬󠁡󠁮|󠁰󠁨󠁬󠁡󠁳|󠁰󠁨󠁬󠁥󠁹|󠁰󠁨󠁬󠁵󠁮|󠁰󠁨󠁭󠁡󠁤|󠁰󠁨󠁭󠁡󠁧|󠁰󠁨󠁭󠁡󠁳|󠁰󠁨󠁭󠁤󠁣|󠁰󠁨󠁭󠁤󠁲|󠁰󠁨󠁭󠁯󠁵|󠁰󠁨󠁭󠁳󠁣|󠁰󠁨󠁭󠁳󠁲|󠁰󠁨󠁮󠁣󠁯|󠁰󠁨󠁮󠁥󠁣|󠁰󠁨󠁮󠁥󠁲|󠁰󠁨󠁮󠁳󠁡|󠁰󠁨󠁮󠁵󠁥|󠁰󠁨󠁮󠁵󠁶|󠁰󠁨󠁰󠁡󠁭󠁾󠁮|󠁰󠁨󠁰󠁬󠁷|󠁰󠁨󠁱󠁵󠁥|󠁰󠁨󠁱󠁵󠁩|󠁰󠁨󠁲󠁩󠁺|󠁰󠁨󠁲󠁯󠁭|󠁰󠁨󠁳󠁡󠁲|󠁰󠁨󠁳󠁣󠁯|󠁰󠁨󠁳󠁩󠁧|󠁰󠁨󠁳󠁬󠁥|󠁰󠁨󠁳󠁬󠁵|󠁰󠁨󠁳󠁯󠁲|󠁰󠁨󠁳󠁵󠁫|󠁰󠁨󠁳󠁵󠁮|󠁰󠁨󠁳󠁵󠁲|󠁰󠁨󠁴󠁡󠁲|󠁰󠁨󠁴󠁡󠁷|󠁰󠁨󠁷󠁳󠁡|󠁰󠁨󠁺󠁡󠁮|󠁰󠁨󠁺󠁡󠁳|󠁰󠁨󠁺󠁭󠁢|󠁰󠁨󠁺󠁳󠁩|󠁰󠁫󠁢󠁡|󠁰󠁫󠁧󠁢|󠁰󠁫󠁩󠁳|󠁰󠁫󠁪󠁫|󠁰󠁫󠁫󠁰|󠁰󠁫󠁰󠁢|󠁰󠁫󠁳󠁤|󠁰󠁬󠀰󠀲|󠁰󠁬󠀰󠀴|󠁰󠁬󠀰󠀶|󠁰󠁬󠀰󠀸|󠁰󠁬󠀱󠀰|󠁰󠁬󠀱󠀲|󠁰󠁬󠀱󠀴|󠁰󠁬󠀱󠀶|󠁰󠁬󠀱󠀸|󠁰󠁬󠀲󠀰|󠁰󠁬󠀲󠀲|󠁰󠁬󠀲󠀴|󠁰󠁬󠀲󠀶|󠁰󠁬󠀲󠀸|󠁰󠁬󠀳󠀰|󠁰󠁬󠀳󠀲|󠁰󠁳󠁢󠁴󠁨|󠁰󠁳󠁤󠁥󠁢|󠁰󠁳󠁧󠁺󠁡|󠁰󠁳󠁨󠁢󠁮|󠁰󠁳󠁪󠁥󠁭󠁾󠁮|󠁰󠁳󠁪󠁲󠁨|󠁰󠁳󠁫󠁹󠁳|󠁰󠁳󠁮󠁢󠁳|󠁰󠁳󠁮󠁧󠁺|󠁰󠁳󠁱󠁱󠁡|󠁰󠁳󠁲󠁢󠁨|󠁰󠁳󠁲󠁦󠁨|󠁰󠁳󠁳󠁬󠁴|󠁰󠁳󠁴󠁢󠁳|󠁰󠁳󠁴󠁫󠁭|󠁰󠁴󠀰󠀱󠁾󠀹|󠁰󠁴󠀱󠀰󠁾󠀸|󠁰󠁴󠀲󠀰|󠁰󠁴󠀳󠀰|󠁰󠁷󠀰󠀰󠀲|󠁰󠁷󠀰󠀰󠀴|󠁰󠁷󠀰󠀱󠀰|󠁰󠁷󠀰󠀵󠀰|󠁰󠁷󠀱󠀰󠀰|󠁰󠁷󠀱󠀵󠀰|󠁰󠁷󠀲󠀱󠀲|󠁰󠁷󠀲󠀱󠀴|󠁰󠁷󠀲󠀱󠀸|󠁰󠁷󠀲󠀲󠀲|󠁰󠁷󠀲󠀲󠀴|󠁰󠁷󠀲󠀲󠀶󠁾󠀸|󠁰󠁷󠀳󠀵󠀰|󠁰󠁷󠀳󠀷󠀰|󠁰󠁹󠀱|󠁰󠁹󠀱󠀰󠁾󠀶|󠁰󠁹󠀱󠀹|󠁰󠁹󠀲󠁾󠀹|󠁰󠁹󠁡󠁳󠁵|󠁱󠁡󠁤󠁡|󠁱󠁡󠁫󠁨|󠁱󠁡󠁭󠁳|󠁱󠁡󠁲󠁡|󠁱󠁡󠁳󠁨|󠁱󠁡󠁵󠁳|󠁱󠁡󠁷󠁡|󠁱󠁡󠁺󠁡|󠁲󠁯󠁡󠁢|󠁲󠁯󠁡󠁧|󠁲󠁯󠁡󠁲|󠁲󠁯󠁢|󠁲󠁯󠁢󠁣|󠁲󠁯󠁢󠁨|󠁲󠁯󠁢󠁮|󠁲󠁯󠁢󠁲|󠁲󠁯󠁢󠁴|󠁲󠁯󠁢󠁶|󠁲󠁯󠁢󠁺|󠁲󠁯󠁣󠁪|󠁲󠁯󠁣󠁬|󠁲󠁯󠁣󠁳󠁾󠁴|󠁲󠁯󠁣󠁶|󠁲󠁯󠁤󠁢|󠁲󠁯󠁤󠁪|󠁲󠁯󠁧󠁪|󠁲󠁯󠁧󠁬|󠁲󠁯󠁧󠁲|󠁲󠁯󠁨󠁤|󠁲󠁯󠁨󠁲|󠁲󠁯󠁩󠁦|󠁲󠁯󠁩󠁬|󠁲󠁯󠁩󠁳|󠁲󠁯󠁭󠁨|󠁲󠁯󠁭󠁭|󠁲󠁯󠁭󠁳|󠁲󠁯󠁮󠁴|󠁲󠁯󠁯󠁴|󠁲󠁯󠁰󠁨|󠁲󠁯󠁳󠁢|󠁲󠁯󠁳󠁪|󠁲󠁯󠁳󠁭|󠁲󠁯󠁳󠁶|󠁲󠁯󠁴󠁬󠁾󠁭|󠁲󠁯󠁴󠁲|󠁲󠁯󠁶󠁬|󠁲󠁯󠁶󠁮|󠁲󠁯󠁶󠁳|󠁲󠁳󠀰󠀰󠁾󠀹|󠁲󠁳󠀱󠀰󠁾󠀹|󠁲󠁳󠀲󠀰󠁾󠀹|󠁲󠁳󠁫󠁭|󠁲󠁳󠁶󠁯|󠁲󠁵󠁡󠁤|󠁲󠁵󠁡󠁬|󠁲󠁵󠁡󠁬󠁴|󠁲󠁵󠁡󠁭󠁵|󠁲󠁵󠁡󠁲󠁫|󠁲󠁵󠁡󠁳󠁴|󠁲󠁵󠁢󠁡|󠁲󠁵󠁢󠁥󠁬|󠁲󠁵󠁢󠁲󠁹|󠁲󠁵󠁢󠁵|󠁲󠁵󠁣󠁥|󠁲󠁵󠁣󠁨󠁥|󠁲󠁵󠁣󠁨󠁵|󠁲󠁵󠁣󠁵|󠁲󠁵󠁤󠁡|󠁲󠁵󠁩󠁮|󠁲󠁵󠁩󠁲󠁫|󠁲󠁵󠁩󠁶󠁡|󠁲󠁵󠁫󠁡󠁭|󠁲󠁵󠁫󠁢󠁾󠁣|󠁲󠁵󠁫󠁤󠁡|󠁲󠁵󠁫󠁥󠁭|󠁲󠁵󠁫󠁧󠁤|󠁲󠁵󠁫󠁧󠁮|󠁲󠁵󠁫󠁨󠁡|󠁲󠁵󠁫󠁨󠁭|󠁲󠁵󠁫󠁩󠁲|󠁲󠁵󠁫󠁫󠁾󠁬|󠁲󠁵󠁫󠁬󠁵|󠁲󠁵󠁫󠁯|󠁲󠁵󠁫󠁯󠁳|󠁲󠁵󠁫󠁲|󠁲󠁵󠁫󠁲󠁳|󠁲󠁵󠁫󠁹󠁡|󠁲󠁵󠁬󠁥󠁮|󠁲󠁵󠁬󠁩󠁰|󠁲󠁵󠁭󠁡󠁧|󠁲󠁵󠁭󠁥|󠁲󠁵󠁭󠁯|󠁲󠁵󠁭󠁯󠁳|󠁲󠁵󠁭󠁯󠁷|󠁲󠁵󠁭󠁵󠁲|󠁲󠁵󠁮󠁥󠁮|󠁲󠁵󠁮󠁧󠁲|󠁲󠁵󠁮󠁩󠁺|󠁲󠁵󠁮󠁶󠁳|󠁲󠁵󠁯󠁭󠁳|󠁲󠁵󠁯󠁲󠁥|󠁲󠁵󠁯󠁲󠁬|󠁲󠁵󠁰󠁥󠁲|󠁲󠁵󠁰󠁮󠁺|󠁲󠁵󠁰󠁲󠁩|󠁲󠁵󠁰󠁳󠁫|󠁲󠁵󠁲󠁯󠁳|󠁲󠁵󠁲󠁹󠁡|󠁲󠁵󠁳󠁡|󠁲󠁵󠁳󠁡󠁫|󠁲󠁵󠁳󠁡󠁭|󠁲󠁵󠁳󠁡󠁲|󠁲󠁵󠁳󠁥|󠁲󠁵󠁳󠁭󠁯|󠁲󠁵󠁳󠁰󠁥|󠁲󠁵󠁳󠁴󠁡|󠁲󠁵󠁳󠁶󠁥|󠁲󠁵󠁴󠁡|󠁲󠁵󠁴󠁡󠁭|󠁲󠁵󠁴󠁯󠁭|󠁲󠁵󠁴󠁵󠁬|󠁲󠁵󠁴󠁶󠁥|󠁲󠁵󠁴󠁹|󠁲󠁵󠁴󠁹󠁵|󠁲󠁵󠁵󠁤|󠁲󠁵󠁵󠁬󠁹|󠁲󠁵󠁶󠁧󠁧|󠁲󠁵󠁶󠁬󠁡|󠁲󠁵󠁶󠁬󠁧|󠁲󠁵󠁶󠁯󠁲|󠁲󠁵󠁹󠁡󠁮|󠁲󠁵󠁹󠁡󠁲|󠁲󠁵󠁹󠁥󠁶|󠁲󠁵󠁺󠁡󠁢|󠁲󠁷󠀰󠀱󠁾󠀵|󠁳󠁡󠀰󠀱󠁾󠀹|󠁳󠁡󠀱󠀰󠁾󠀲|󠁳󠁡󠀱󠀴|󠁳󠁢󠁣󠁥|󠁳󠁢󠁣󠁨|󠁳󠁢󠁣󠁴|󠁳󠁢󠁧󠁵|󠁳󠁢󠁩󠁳|󠁳󠁢󠁭󠁫󠁾󠁬|󠁳󠁢󠁲󠁢|󠁳󠁢󠁴󠁥|󠁳󠁢󠁷󠁥|󠁳󠁣󠀰󠀱󠁾󠀹|󠁳󠁣󠀱󠀰󠁾󠀹|󠁳󠁣󠀲󠀰󠁾󠀵|󠁳󠁤󠁤󠁣|󠁳󠁤󠁤󠁥|󠁳󠁤󠁤󠁮|󠁳󠁤󠁤󠁳|󠁳󠁤󠁤󠁷|󠁳󠁤󠁧󠁤|󠁳󠁤󠁧󠁫|󠁳󠁤󠁧󠁺|󠁳󠁤󠁫󠁡|󠁳󠁤󠁫󠁨|󠁳󠁤󠁫󠁮|󠁳󠁤󠁫󠁳|󠁳󠁤󠁮󠁢|󠁳󠁤󠁮󠁯|󠁳󠁤󠁮󠁲|󠁳󠁤󠁮󠁷|󠁳󠁤󠁲󠁳|󠁳󠁤󠁳󠁩|󠁳󠁥󠁡󠁢󠁾󠁣|󠁳󠁥󠁢󠁤|󠁳󠁥󠁣󠁾󠁩|󠁳󠁥󠁫|󠁳󠁥󠁭󠁾󠁯|󠁳󠁥󠁳󠁾󠁵|󠁳󠁥󠁷󠁾󠁺|󠁳󠁧󠀰󠀱󠁾󠀵|󠁳󠁨󠁡󠁣|󠁳󠁨󠁨󠁬|󠁳󠁩󠀰󠀰󠀱󠁾󠀹|󠁳󠁩󠀰󠀱󠀰󠁾󠀹|󠁳󠁩󠀰󠀲󠀰󠁾󠀹|󠁳󠁩󠀰󠀳󠀰󠁾󠀹|󠁳󠁩󠀰󠀴󠀰󠁾󠀹|󠁳󠁩󠀰󠀵󠀰󠁾󠀹|󠁳󠁩󠀰󠀶󠀰󠁾󠀹|󠁳󠁩󠀰󠀷󠀰󠁾󠀹|󠁳󠁩󠀰󠀸󠀰󠁾󠀹|󠁳󠁩󠀰󠀹󠀰󠁾󠀹|󠁳󠁩󠀱󠀰󠀰󠁾󠀹|󠁳󠁩󠀱󠀱󠀰󠁾󠀹|󠁳󠁩󠀱󠀲󠀰󠁾󠀹|󠁳󠁩󠀱󠀳󠀰󠁾󠀹|󠁳󠁩󠀱󠀴󠀰󠁾󠀴|󠁳󠁩󠀱󠀴󠀶󠁾󠀹|󠁳󠁩󠀱󠀵󠀰󠁾󠀹|󠁳󠁩󠀱󠀶󠀰󠁾󠀹|󠁳󠁩󠀱󠀷󠀰󠁾󠀹|󠁳󠁩󠀱󠀸󠀰󠁾󠀹|󠁳󠁩󠀱󠀹󠀰󠁾󠀹|󠁳󠁩󠀲󠀰󠀰󠁾󠀹|󠁳󠁩󠀲󠀱󠀰󠁾󠀳|󠁳󠁫󠁢󠁣|󠁳󠁫󠁢󠁬|󠁳󠁫󠁫󠁩|󠁳󠁫󠁮󠁩|󠁳󠁫󠁰󠁶|󠁳󠁫󠁴󠁡|󠁳󠁫󠁴󠁣|󠁳󠁫󠁺󠁩|󠁳󠁬󠁥|󠁳󠁬󠁮|󠁳󠁬󠁮󠁷|󠁳󠁬󠁳|󠁳󠁬󠁷|󠁳󠁭󠀰󠀱󠁾󠀹|󠁳󠁮󠁤󠁢|󠁳󠁮󠁤󠁫|󠁳󠁮󠁦󠁫|󠁳󠁮󠁫󠁡|󠁳󠁮󠁫󠁤󠁾󠁥|󠁳󠁮󠁫󠁬|󠁳󠁮󠁬󠁧|󠁳󠁮󠁭󠁴|󠁳󠁮󠁳󠁥|󠁳󠁮󠁳󠁬|󠁳󠁮󠁴󠁣|󠁳󠁮󠁴󠁨|󠁳󠁮󠁺󠁧|󠁳󠁯󠁡󠁷|󠁳󠁯󠁢󠁫|󠁳󠁯󠁢󠁮|󠁳󠁯󠁢󠁲|󠁳󠁯󠁢󠁹|󠁳󠁯󠁧󠁡|󠁳󠁯󠁧󠁥|󠁳󠁯󠁨󠁩|󠁳󠁯󠁪󠁤|󠁳󠁯󠁪󠁨|󠁳󠁯󠁭󠁵|󠁳󠁯󠁮󠁵|󠁳󠁯󠁳󠁡|󠁳󠁯󠁳󠁤|󠁳󠁯󠁳󠁨|󠁳󠁯󠁳󠁯|󠁳󠁯󠁴󠁯|󠁳󠁯󠁷󠁯|󠁳󠁲󠁢󠁲|󠁳󠁲󠁣󠁭|󠁳󠁲󠁣󠁲|󠁳󠁲󠁭󠁡|󠁳󠁲󠁮󠁩|󠁳󠁲󠁰󠁭|󠁳󠁲󠁰󠁲|󠁳󠁲󠁳󠁡|󠁳󠁲󠁳󠁩|󠁳󠁲󠁷󠁡|󠁳󠁳󠁢󠁮|󠁳󠁳󠁢󠁷|󠁳󠁳󠁥󠁣|󠁳󠁳󠁥󠁥|󠁳󠁳󠁥󠁷|󠁳󠁳󠁪󠁧|󠁳󠁳󠁬󠁫|󠁳󠁳󠁮󠁵|󠁳󠁳󠁵󠁹|󠁳󠁳󠁷󠁲|󠁳󠁴󠁰|󠁳󠁴󠁳|󠁳󠁶󠁡󠁨|󠁳󠁶󠁣󠁡|󠁳󠁶󠁣󠁨|󠁳󠁶󠁣󠁵|󠁳󠁶󠁬󠁩|󠁳󠁶󠁭󠁯|󠁳󠁶󠁰󠁡|󠁳󠁶󠁳󠁡|󠁳󠁶󠁳󠁭|󠁳󠁶󠁳󠁯|󠁳󠁶󠁳󠁳|󠁳󠁶󠁳󠁶|󠁳󠁶󠁵󠁮|󠁳󠁶󠁵󠁳|󠁳󠁹󠁤󠁩|󠁳󠁹󠁤󠁲|󠁳󠁹󠁤󠁹|󠁳󠁹󠁨󠁡|󠁳󠁹󠁨󠁩|󠁳󠁹󠁨󠁬󠁾󠁭|󠁳󠁹󠁩󠁤|󠁳󠁹󠁬󠁡|󠁳󠁹󠁱󠁵|󠁳󠁹󠁲󠁡|󠁳󠁹󠁲󠁤|󠁳󠁹󠁳󠁵|󠁳󠁹󠁴󠁡|󠁳󠁺󠁨󠁨|󠁳󠁺󠁬󠁵|󠁳󠁺󠁭󠁡|󠁳󠁺󠁳󠁨|󠁴󠁤󠁢󠁡|󠁴󠁤󠁢󠁧|󠁴󠁤󠁢󠁯|󠁴󠁤󠁣󠁢|󠁴󠁤󠁥󠁥|󠁴󠁤󠁥󠁯|󠁴󠁤󠁧󠁲|󠁴󠁤󠁨󠁬|󠁴󠁤󠁫󠁡|󠁴󠁤󠁬󠁣|󠁴󠁤󠁬󠁯|󠁴󠁤󠁬󠁲|󠁴󠁤󠁭󠁡|󠁴󠁤󠁭󠁣|󠁴󠁤󠁭󠁥|󠁴󠁤󠁭󠁯|󠁴󠁤󠁮󠁤|󠁴󠁤󠁯󠁤|󠁴󠁤󠁳󠁡|󠁴󠁤󠁳󠁩|󠁴󠁤󠁴󠁡|󠁴󠁤󠁴󠁩|󠁴󠁤󠁷󠁦|󠁴󠁧󠁣|󠁴󠁧󠁫|󠁴󠁧󠁭|󠁴󠁧󠁰|󠁴󠁧󠁳|󠁴󠁨󠀱󠀰󠁾󠀹|󠁴󠁨󠀲󠀰󠁾󠀷|󠁴󠁨󠀳󠀰󠁾󠀹|󠁴󠁨󠀴󠀰󠁾󠀹|󠁴󠁨󠀵󠀰󠁾󠀸|󠁴󠁨󠀶󠀰󠁾󠀷|󠁴󠁨󠀷󠀰󠁾󠀷|󠁴󠁨󠀸󠀰󠁾󠀶|󠁴󠁨󠀹󠀰󠁾󠀶|󠁴󠁨󠁳|󠁴󠁪󠁤󠁵|󠁴󠁪󠁧󠁢|󠁴󠁪󠁫󠁴|󠁴󠁪󠁲󠁡|󠁴󠁪󠁳󠁵|󠁴󠁬󠁡󠁬|󠁴󠁬󠁡󠁮|󠁴󠁬󠁢󠁡|󠁴󠁬󠁢󠁯|󠁴󠁬󠁣󠁯|󠁴󠁬󠁤󠁩|󠁴󠁬󠁥󠁲|󠁴󠁬󠁬󠁡|󠁴󠁬󠁬󠁩|󠁴󠁬󠁭󠁦|󠁴󠁬󠁭󠁴|󠁴󠁬󠁯󠁥|󠁴󠁬󠁶󠁩|󠁴󠁭󠁡󠁾󠁢|󠁴󠁭󠁤|󠁴󠁭󠁬󠁾󠁭|󠁴󠁭󠁳|󠁴󠁮󠀱󠀱󠁾󠀴|󠁴󠁮󠀲󠀱󠁾󠀳|󠁴󠁮󠀳󠀱󠁾󠀴|󠁴󠁮󠀴󠀱󠁾󠀳|󠁴󠁮󠀵󠀱󠁾󠀳|󠁴󠁮󠀶󠀱|󠁴󠁮󠀷󠀱󠁾󠀳|󠁴󠁮󠀸󠀱󠁾󠀳|󠁴󠁯󠀰󠀱󠁾󠀵|󠁴󠁲󠀰󠀱󠁾󠀹|󠁴󠁲󠀱󠀰󠁾󠀹|󠁴󠁲󠀲󠀰󠁾󠀹|󠁴󠁲󠀳󠀰󠁾󠀹|󠁴󠁲󠀴󠀰󠁾󠀹|󠁴󠁲󠀵󠀰󠁾󠀹|󠁴󠁲󠀶󠀰󠁾󠀹|󠁴󠁲󠀷󠀰󠁾󠀹|󠁴󠁲󠀸󠀰󠁾󠀱|󠁴󠁴󠁡󠁲󠁩|󠁴󠁴󠁣󠁨󠁡|󠁴󠁴󠁣󠁴󠁴|󠁴󠁴󠁤󠁭󠁮|󠁴󠁴󠁭󠁲󠁣|󠁴󠁴󠁰󠁥󠁤|󠁴󠁴󠁰󠁯󠁳|󠁴󠁴󠁰󠁲󠁴|󠁴󠁴󠁰󠁴󠁦|󠁴󠁴󠁳󠁦󠁯|󠁴󠁴󠁳󠁧󠁥|󠁴󠁴󠁳󠁩󠁰|󠁴󠁴󠁳󠁪󠁬|󠁴󠁴󠁴󠁯󠁢|󠁴󠁴󠁴󠁵󠁰|󠁴󠁶󠁦󠁵󠁮|󠁴󠁶󠁮󠁩󠁴|󠁴󠁶󠁮󠁫󠁦|󠁴󠁶󠁮󠁫󠁬|󠁴󠁶󠁮󠁭󠁡|󠁴󠁶󠁮󠁭󠁧|󠁴󠁶󠁮󠁵󠁩|󠁴󠁶󠁶󠁡󠁩|󠁴󠁷󠁣󠁨󠁡|󠁴󠁷󠁣󠁹󠁩|󠁴󠁷󠁣󠁹󠁱|󠁴󠁷󠁨󠁳󠁱|󠁴󠁷󠁨󠁳󠁺|󠁴󠁷󠁨󠁵󠁡|󠁴󠁷󠁩󠁬󠁡|󠁴󠁷󠁫󠁥󠁥|󠁴󠁷󠁫󠁨󠁨|󠁴󠁷󠁫󠁩󠁮|󠁴󠁷󠁬󠁩󠁥|󠁴󠁷󠁭󠁩󠁡|󠁴󠁷󠁮󠁡󠁮|󠁴󠁷󠁮󠁷󠁴|󠁴󠁷󠁰󠁥󠁮|󠁴󠁷󠁰󠁩󠁦|󠁴󠁷󠁴󠁡󠁯|󠁴󠁷󠁴󠁮󠁮|󠁴󠁷󠁴󠁰󠁥|󠁴󠁷󠁴󠁴󠁴|󠁴󠁷󠁴󠁸󠁧|󠁴󠁷󠁹󠁵󠁮|󠁴󠁺󠀰󠀱󠁾󠀹|󠁴󠁺󠀱󠀰󠁾󠀹|󠁴󠁺󠀲󠀰󠁾󠀹|󠁴󠁺󠀳󠀰󠁾󠀱|󠁵󠁡󠀰󠀵|󠁵󠁡󠀰󠀷|󠁵󠁡󠀰󠀹|󠁵󠁡󠀱󠀲|󠁵󠁡󠀱󠀴|󠁵󠁡󠀱󠀸|󠁵󠁡󠀲󠀱|󠁵󠁡󠀲󠀳|󠁵󠁡󠀲󠀶|󠁵󠁡󠀳󠀰|󠁵󠁡󠀳󠀲|󠁵󠁡󠀳󠀵|󠁵󠁡󠀴󠀰|󠁵󠁡󠀴󠀳|󠁵󠁡󠀴󠀶|󠁵󠁡󠀴󠀸|󠁵󠁡󠀵󠀱|󠁵󠁡󠀵󠀳|󠁵󠁡󠀵󠀶|󠁵󠁡󠀵󠀹|󠁵󠁡󠀶󠀱|󠁵󠁡󠀶󠀳|󠁵󠁡󠀶󠀵|󠁵󠁡󠀶󠀸|󠁵󠁡󠀷󠀱|󠁵󠁡󠀷󠀴|󠁵󠁡󠀷󠀷|󠁵󠁧󠀱󠀰󠀱󠁾󠀹|󠁵󠁧󠀱󠀱󠀰󠁾󠀹|󠁵󠁧󠀱󠀲󠀰󠁾󠀶|󠁵󠁧󠀲󠀰󠀱󠁾󠀹|󠁵󠁧󠀲󠀱󠀰󠁾󠀹|󠁵󠁧󠀲󠀲󠀰󠁾󠀹|󠁵󠁧󠀲󠀳󠀰󠁾󠀶|󠁵󠁧󠀳󠀰󠀱󠁾󠀹|󠁵󠁧󠀳󠀱󠀰󠁾󠀹|󠁵󠁧󠀳󠀲󠀰󠁾󠀹|󠁵󠁧󠀳󠀳󠀰󠁾󠀴|󠁵󠁧󠀴󠀰󠀱󠁾󠀹|󠁵󠁧󠀴󠀱󠀰󠁾󠀹|󠁵󠁧󠀴󠀲󠀰󠁾󠀹|󠁵󠁧󠀴󠀳󠀰󠁾󠀲|󠁵󠁧󠁣|󠁵󠁧󠁥|󠁵󠁧󠁮|󠁵󠁧󠁷|󠁵󠁭󠀶󠀷|󠁵󠁭󠀷󠀱|󠁵󠁭󠀷󠀶|󠁵󠁭󠀷󠀹|󠁵󠁭󠀸󠀱|󠁵󠁭󠀸󠀴|󠁵󠁭󠀸󠀶|󠁵󠁭󠀸󠀹|󠁵󠁭󠀹󠀵|󠁵󠁳󠁡󠁫󠁾󠁬|󠁵󠁳󠁡󠁲|󠁵󠁳󠁡󠁺|󠁵󠁳󠁣󠁡|󠁵󠁳󠁣󠁯|󠁵󠁳󠁣󠁴|󠁵󠁳󠁤󠁣|󠁵󠁳󠁤󠁥|󠁵󠁳󠁦󠁬|󠁵󠁳󠁧󠁡|󠁵󠁳󠁨󠁩|󠁵󠁳󠁩󠁡|󠁵󠁳󠁩󠁤|󠁵󠁳󠁩󠁬|󠁵󠁳󠁩󠁮|󠁵󠁳󠁫󠁳|󠁵󠁳󠁫󠁹|󠁵󠁳󠁬󠁡|󠁵󠁳󠁭󠁡|󠁵󠁳󠁭󠁤󠁾󠁥|󠁵󠁳󠁭󠁩|󠁵󠁳󠁭󠁮󠁾󠁯|󠁵󠁳󠁭󠁳󠁾󠁴|󠁵󠁳󠁮󠁣󠁾󠁥|󠁵󠁳󠁮󠁨|󠁵󠁳󠁮󠁪|󠁵󠁳󠁮󠁭|󠁵󠁳󠁮󠁶|󠁵󠁳󠁮󠁹|󠁵󠁳󠁯󠁨|󠁵󠁳󠁯󠁫|󠁵󠁳󠁯󠁲|󠁵󠁳󠁰󠁡|󠁵󠁳󠁲󠁩|󠁵󠁳󠁳󠁣󠁾󠁤|󠁵󠁳󠁴󠁮|󠁵󠁳󠁴󠁸|󠁵󠁳󠁵󠁴|󠁵󠁳󠁶󠁡|󠁵󠁳󠁶󠁴|󠁵󠁳󠁷󠁡|󠁵󠁳󠁷󠁩|󠁵󠁳󠁷󠁶|󠁵󠁳󠁷󠁹|󠁵󠁹󠁡󠁲|󠁵󠁹󠁣󠁡|󠁵󠁹󠁣󠁬|󠁵󠁹󠁣󠁯|󠁵󠁹󠁤󠁵|󠁵󠁹󠁦󠁤|󠁵󠁹󠁦󠁳|󠁵󠁹󠁬󠁡|󠁵󠁹󠁭󠁡|󠁵󠁹󠁭󠁯|󠁵󠁹󠁰󠁡|󠁵󠁹󠁲󠁮󠁾󠁯|󠁵󠁹󠁲󠁶|󠁵󠁹󠁳󠁡|󠁵󠁹󠁳󠁪|󠁵󠁹󠁳󠁯|󠁵󠁹󠁴󠁡|󠁵󠁹󠁴󠁴|󠁵󠁺󠁡󠁮|󠁵󠁺󠁢󠁵|󠁵󠁺󠁦󠁡|󠁵󠁺󠁪󠁩|󠁵󠁺󠁮󠁧|󠁵󠁺󠁮󠁷|󠁵󠁺󠁱󠁡|󠁵󠁺󠁱󠁲|󠁵󠁺󠁳󠁡|󠁵󠁺󠁳󠁩|󠁵󠁺󠁳󠁵|󠁵󠁺󠁴󠁫|󠁵󠁺󠁴󠁯|󠁵󠁺󠁸󠁯|󠁶󠁣󠀰󠀱󠁾󠀶|󠁶󠁥󠁡󠁾󠁰|󠁶󠁥󠁲󠁾󠁺|󠁶󠁮󠀰󠀱󠁾󠀷|󠁶󠁮󠀰󠀹|󠁶󠁮󠀱󠀳󠁾󠀴|󠁶󠁮󠀱󠀸|󠁶󠁮󠀲󠀰󠁾󠀹|󠁶󠁮󠀳󠀰󠁾󠀷|󠁶󠁮󠀳󠀹|󠁶󠁮󠀴󠀰󠁾󠀱|󠁶󠁮󠀴󠀳󠁾󠀷|󠁶󠁮󠀴󠀹|󠁶󠁮󠀵󠀰󠁾󠀹|󠁶󠁮󠀶󠀱|󠁶󠁮󠀶󠀳|󠁶󠁮󠀶󠀶󠁾󠀹|󠁶󠁮󠀷󠀰󠁾󠀳|󠁶󠁮󠁣󠁴|󠁶󠁮󠁤󠁮|󠁶󠁮󠁨󠁮|󠁶󠁮󠁨󠁰|󠁶󠁮󠁳󠁧|󠁶󠁵󠁭󠁡󠁰|󠁶󠁵󠁰󠁡󠁭|󠁶󠁵󠁳󠁡󠁭|󠁶󠁵󠁳󠁥󠁥|󠁶󠁵󠁴󠁡󠁥|󠁶󠁵󠁴󠁯󠁢|󠁷󠁦󠁡󠁬|󠁷󠁦󠁳󠁧|󠁷󠁦󠁵󠁶|󠁷󠁳󠁡󠁡|󠁷󠁳󠁡󠁬|󠁷󠁳󠁡󠁴|󠁷󠁳󠁦󠁡|󠁷󠁳󠁧󠁥|󠁷󠁳󠁧󠁩|󠁷󠁳󠁰󠁡|󠁷󠁳󠁳󠁡|󠁷󠁳󠁴󠁵|󠁷󠁳󠁶󠁦|󠁷󠁳󠁶󠁳|󠁹󠁥󠁡󠁢|󠁹󠁥󠁡󠁤|󠁹󠁥󠁡󠁭|󠁹󠁥󠁢󠁡|󠁹󠁥󠁤󠁡|󠁹󠁥󠁤󠁨|󠁹󠁥󠁨󠁤|󠁹󠁥󠁨󠁪|󠁹󠁥󠁨󠁵|󠁹󠁥󠁩󠁢|󠁹󠁥󠁪󠁡|󠁹󠁥󠁬󠁡|󠁹󠁥󠁭󠁡|󠁹󠁥󠁭󠁲|󠁹󠁥󠁭󠁷|󠁹󠁥󠁲󠁡|󠁹󠁥󠁳󠁡|󠁹󠁥󠁳󠁤|󠁹󠁥󠁳󠁨|󠁹󠁥󠁳󠁮|󠁹󠁥󠁳󠁵|󠁹󠁥󠁴󠁡|󠁺󠁡󠁥󠁣|󠁺󠁡󠁦󠁳|󠁺󠁡󠁧󠁰|󠁺󠁡󠁫󠁺󠁮|󠁺󠁡󠁬󠁰|󠁺󠁡󠁭󠁰|󠁺󠁡󠁮󠁣|󠁺󠁡󠁮󠁷|󠁺󠁡󠁷󠁣|󠁺󠁭󠀰󠀱󠁾󠀹|󠁺󠁭󠀱󠀰|󠁺󠁷󠁢󠁵|󠁺󠁷󠁨󠁡|󠁺󠁷󠁭󠁡|󠁺󠁷󠁭󠁣|󠁺󠁷󠁭󠁥|󠁺󠁷󠁭󠁩|󠁺󠁷󠁭󠁮|󠁺󠁷󠁭󠁳|󠁺󠁷󠁭󠁶󠁾󠁷|󠁡󠁬󠁢󠁲|󠁡󠁬󠁢󠁵|󠁡󠁬󠁤󠁩|󠁡󠁬󠁤󠁬|󠁡󠁬󠁤󠁲|󠁡󠁬󠁤󠁶|󠁡󠁬󠁥󠁬|󠁡󠁬󠁥󠁲|󠁡󠁬󠁦󠁲|󠁡󠁬󠁧󠁪|󠁡󠁬󠁧󠁲|󠁡󠁬󠁨󠁡|󠁡󠁬󠁫󠁡󠁾󠁣|󠁡󠁬󠁫󠁯|󠁡󠁬󠁫󠁲|󠁡󠁬󠁫󠁵|󠁡󠁬󠁬󠁢|󠁡󠁬󠁬󠁥|󠁡󠁬󠁬󠁵|󠁡󠁬󠁭󠁫|󠁡󠁬󠁭󠁭|󠁡󠁬󠁭󠁲|󠁡󠁬󠁭󠁴|󠁡󠁬󠁰󠁧|󠁡󠁬󠁰󠁱󠁾󠁲|󠁡󠁬󠁰󠁵|󠁡󠁬󠁳󠁨|󠁡󠁬󠁳󠁫|󠁡󠁬󠁳󠁲|󠁡󠁬󠁴󠁥|󠁡󠁬󠁴󠁰|󠁡󠁬󠁴󠁲|󠁡󠁬󠁶󠁬|󠁢󠁡󠀰󠀱󠁾󠀹|󠁢󠁡󠀱󠀰|󠁢󠁨󠀱󠀶|󠁣󠁤󠁢󠁮|󠁣󠁤󠁫󠁡|󠁣󠁤󠁫󠁷|󠁣󠁤󠁯󠁲|󠁣󠁩󠀰󠀱󠁾󠀹|󠁣󠁩󠀱󠀰󠁾󠀹|󠁣󠁮󠀱󠀱󠁾󠀵|󠁣󠁮󠀲󠀱󠁾󠀳|󠁣󠁮󠀳󠀱󠁾󠀷|󠁣󠁮󠀴󠀱󠁾󠀶|󠁣󠁮󠀵󠀰󠁾󠀴|󠁣󠁮󠀶󠀱󠁾󠀵|󠁣󠁮󠀷󠀱|󠁣󠁮󠀹󠀱󠁾󠀲|󠁣󠁺󠀱󠀰󠀱󠁾󠀹|󠁣󠁺󠀱󠀰󠁡󠁾󠁦|󠁣󠁺󠀱󠀱󠀰󠁾󠀹|󠁣󠁺󠀱󠀲󠀰󠁾󠀲|󠁣󠁺󠀶󠀱󠀱󠁾󠀵|󠁣󠁺󠀶󠀲󠀱󠁾󠀷|󠁣󠁺󠁪󠁣|󠁣󠁺󠁪󠁭|󠁣󠁺󠁫󠁡|󠁣󠁺󠁫󠁲|󠁣󠁺󠁬󠁩|󠁣󠁺󠁭󠁯|󠁣󠁺󠁯󠁬|󠁣󠁺󠁰󠁡|󠁣󠁺󠁰󠁬|󠁣󠁺󠁰󠁲|󠁣󠁺󠁳󠁴|󠁣󠁺󠁵󠁳|󠁣󠁺󠁶󠁹|󠁣󠁺󠁺󠁬|󠁦󠁩󠀰󠀱|󠁦󠁲󠁡󠁾󠁢|󠁦󠁲󠁢󠁬|󠁦󠁲󠁣|󠁦󠁲󠁣󠁰|󠁦󠁲󠁤󠁾󠁧|󠁦󠁲󠁧󠁦|󠁦󠁲󠁧󠁰|󠁦󠁲󠁨󠁾󠁭|󠁦󠁲󠁭󠁦|󠁦󠁲󠁭󠁱|󠁦󠁲󠁮|󠁦󠁲󠁮󠁣|󠁦󠁲󠁯󠁾󠁰|󠁦󠁲󠁰󠁦|󠁦󠁲󠁰󠁭|󠁦󠁲󠁱󠁾󠁲|󠁦󠁲󠁲󠁥|󠁦󠁲󠁳󠁾󠁴|󠁦󠁲󠁴󠁦|󠁦󠁲󠁵󠁾󠁶|󠁦󠁲󠁷󠁦|󠁦󠁲󠁹󠁴|󠁧󠁢󠁡󠁮󠁴|󠁧󠁢󠁡󠁲󠁤|󠁧󠁢󠁡󠁲󠁭|󠁧󠁢󠁢󠁬󠁡|󠁧󠁢󠁢󠁬󠁹|󠁧󠁢󠁢󠁮󠁢|󠁧󠁢󠁣󠁧󠁶|󠁧󠁢󠁣󠁫󠁦|󠁧󠁢󠁣󠁫󠁴|󠁧󠁢󠁣󠁬󠁲|󠁧󠁢󠁣󠁳󠁲|󠁧󠁢󠁤󠁧󠁮|󠁧󠁢󠁤󠁯󠁷|󠁧󠁢󠁤󠁲󠁹|󠁧󠁢󠁥󠁡󠁷|󠁧󠁢󠁥󠁮󠁧|󠁧󠁢󠁦󠁥󠁲|󠁧󠁢󠁧󠁢󠁮|󠁧󠁢󠁬󠁭󠁶|󠁧󠁢󠁬󠁲󠁮|󠁧󠁢󠁬󠁳󠁢|󠁧󠁢󠁭󠁦󠁴|󠁧󠁢󠁭󠁹󠁬|󠁧󠁢󠁮󠁤󠁮|󠁧󠁢󠁮󠁩󠁲|󠁧󠁢󠁮󠁴󠁡|󠁧󠁢󠁮󠁹󠁭|󠁧󠁢󠁯󠁭󠁨|󠁧󠁢󠁳󠁣󠁴|󠁧󠁢󠁳󠁴󠁢|󠁧󠁢󠁵󠁫󠁭|󠁧󠁢󠁷󠁬󠁳|󠁧󠁨󠁢󠁡|󠁧󠁬󠁱󠁡|󠁧󠁲󠀰󠀱|󠁧󠁲󠀰󠀳󠁾󠀷|󠁧󠁲󠀱󠀱󠁾󠀷|󠁧󠁲󠀲󠀱󠁾󠀴|󠁧󠁲󠀳󠀱󠁾󠀴|󠁧󠁲󠀴󠀱󠁾󠀴|󠁧󠁲󠀵󠀱󠁾󠀹|󠁧󠁲󠀶󠀱󠁾󠀴|󠁧󠁲󠀷󠀱󠁾󠀳|󠁧󠁲󠀸󠀱󠁾󠀵|󠁧󠁲󠀹󠀱󠁾󠀴|󠁧󠁲󠁡󠀱|󠁩󠁳󠀰|󠁩󠁴󠁡󠁯|󠁩󠁴󠁣󠁩|󠁩󠁴󠁧󠁯|󠁩󠁴󠁯󠁧|󠁩󠁴󠁯󠁴|󠁩󠁴󠁰󠁮|󠁩󠁴󠁴󠁳|󠁩󠁴󠁵󠁤|󠁩󠁴󠁶󠁳|󠁬󠁡󠁸󠁮|󠁬󠁵󠁤|󠁬󠁵󠁧|󠁬󠁵󠁬|󠁭󠁡󠀱󠀳󠁾󠀶|󠁭󠁡󠁭󠁭󠁤|󠁭󠁡󠁭󠁭󠁮|󠁭󠁡󠁳󠁹󠁢|󠁭󠁫󠀰󠀱󠁾󠀹|󠁭󠁫󠀱󠀰󠁾󠀹|󠁭󠁫󠀲󠀰󠁾󠀹|󠁭󠁫󠀳󠀰󠁾󠀹|󠁭󠁫󠀴󠀰󠁾󠀹|󠁭󠁫󠀵󠀰󠁾󠀹|󠁭󠁫󠀶󠀰󠁾󠀹|󠁭󠁫󠀷󠀰󠁾󠀹|󠁭󠁫󠀸󠀰󠁾󠀵|󠁭󠁲󠁮󠁫󠁣|󠁭󠁶󠁣󠁥|󠁭󠁶󠁮󠁣|󠁭󠁶󠁮󠁯|󠁭󠁶󠁳󠁣|󠁭󠁶󠁳󠁵|󠁭󠁶󠁵󠁮|󠁭󠁶󠁵󠁳|󠁭󠁸󠁤󠁩󠁦|󠁮󠁬󠁡󠁷|󠁮󠁬󠁣󠁷|󠁮󠁬󠁳󠁸|󠁮󠁯󠀱󠀶󠁾󠀷|󠁮󠁯󠀲󠀳|󠁮󠁺󠁮|󠁮󠁺󠁳|󠁯󠁭󠁢󠁡|󠁯󠁭󠁳󠁨|󠁰󠁫󠁴󠁡|󠁰󠁬󠁤󠁳|󠁰󠁬󠁫󠁰|󠁰󠁬󠁬󠁢|󠁰󠁬󠁬󠁤|󠁰󠁬󠁬󠁵|󠁰󠁬󠁭󠁡|󠁰󠁬󠁭󠁺|󠁰󠁬󠁯󠁰|󠁰󠁬󠁰󠁤|󠁰󠁬󠁰󠁫|󠁰󠁬󠁰󠁭|󠁰󠁬󠁳󠁫󠁾󠁬|󠁰󠁬󠁷󠁮|󠁰󠁬󠁷󠁰|󠁰󠁬󠁺󠁰|󠁳󠁨󠁴󠁡|󠁴󠁴󠁥󠁴󠁯|󠁴󠁴󠁲󠁣󠁭|󠁴󠁴󠁷󠁴󠁯|󠁴󠁷󠁫󠁨󠁱|󠁴󠁷󠁴󠁮󠁱|󠁴󠁷󠁴󠁰󠁱|󠁴󠁷󠁴󠁸󠁱|󠁵󠁳󠁡󠁳|󠁵󠁳󠁧󠁵|󠁵󠁳󠁭󠁰|󠁵󠁳󠁰󠁲|󠁵󠁳󠁵󠁭|󠁵󠁳󠁶󠁩|󠁺󠁡󠁧󠁴|󠁺󠁡󠁮󠁬)\\udb40\\udc7f)|(?:(?:\\#|\\*|0|1|2|3|4|5|6|7|8|9)️⃣|(?:☝|⛹|✊|✋|✌|✍|\\ud83c\\udf85|\\ud83c\\udfc2|\\ud83c\\udfc3|\\ud83c\\udfc4|\\ud83c\\udfc7|\\ud83c\\udfca|\\ud83c\\udfcb|\\ud83c\\udfcc|\\ud83d\\udc42|\\ud83d\\udc43|\\ud83d\\udc46|\\ud83d\\udc47|\\ud83d\\udc48|\\ud83d\\udc49|\\ud83d\\udc4a|\\ud83d\\udc4b|\\ud83d\\udc4c|\\ud83d\\udc4d|\\ud83d\\udc4e|\\ud83d\\udc4f|\\ud83d\\udc50|\\ud83d\\udc66|\\ud83d\\udc67|\\ud83d\\udc68|\\ud83d\\udc69|\\ud83d\\udc6a|\\ud83d\\udc6b|\\ud83d\\udc6c|\\ud83d\\udc6d|\\ud83d\\udc6e|\\ud83d\\udc6f|\\ud83d\\udc70|\\ud83d\\udc71|\\ud83d\\udc72|\\ud83d\\udc73|\\ud83d\\udc74|\\ud83d\\udc75|\\ud83d\\udc76|\\ud83d\\udc77|\\ud83d\\udc78|\\ud83d\\udc7c|\\ud83d\\udc81|\\ud83d\\udc82|\\ud83d\\udc83|\\ud83d\\udc85|\\ud83d\\udc86|\\ud83d\\udc87|\\ud83d\\udc8f|\\ud83d\\udc91|\\ud83d\\udcaa|\\ud83d\\udd74|\\ud83d\\udd75|\\ud83d\\udd7a|\\ud83d\\udd90|\\ud83d\\udd95|\\ud83d\\udd96|\\ud83d\\ude45|\\ud83d\\ude46|\\ud83d\\ude47|\\ud83d\\ude4b|\\ud83d\\ude4c|\\ud83d\\ude4d|\\ud83d\\ude4e|\\ud83d\\ude4f|\\ud83d\\udea3|\\ud83d\\udeb4|\\ud83d\\udeb5|\\ud83d\\udeb6|\\ud83d\\udec0|\\ud83d\\udecc|\\ud83e\\udd0c|\\ud83e\\udd0f|\\ud83e\\udd18|\\ud83e\\udd19|\\ud83e\\udd1a|\\ud83e\\udd1b|\\ud83e\\udd1c|\\ud83e\\udd1d|\\ud83e\\udd1e|\\ud83e\\udd1f|\\ud83e\\udd26|\\ud83e\\udd30|\\ud83e\\udd31|\\ud83e\\udd32|\\ud83e\\udd33|\\ud83e\\udd34|\\ud83e\\udd35|\\ud83e\\udd36|\\ud83e\\udd37|\\ud83e\\udd38|\\ud83e\\udd39|\\ud83e\\udd3c|\\ud83e\\udd3d|\\ud83e\\udd3e|\\ud83e\\udd77|\\ud83e\\uddb5|\\ud83e\\uddb6|\\ud83e\\uddb8|\\ud83e\\uddb9|\\ud83e\\uddbb|\\ud83e\\uddcd|\\ud83e\\uddce|\\ud83e\\uddcf|\\ud83e\\uddd1|\\ud83e\\uddd2|\\ud83e\\uddd3|\\ud83e\\uddd4|\\ud83e\\uddd5|\\ud83e\\uddd6|\\ud83e\\uddd7|\\ud83e\\uddd8|\\ud83e\\uddd9|\\ud83e\\uddda|\\ud83e\\udddb|\\ud83e\\udddc|\\ud83e\\udddd|\\ud83e\\udec3|\\ud83e\\udec4|\\ud83e\\udec5|\\ud83e\\udef0|\\ud83e\\udef1|\\ud83e\\udef2|\\ud83e\\udef3|\\ud83e\\udef4|\\ud83e\\udef5|\\ud83e\\udef6)(?:\\ud83c\\udffb|\\ud83c\\udffc|\\ud83c\\udffd|\\ud83c\\udffe|\\ud83c\\udfff)|(?!(?:\\#|\\*|0|1|2|3|4|5|6|7|8|9|\\ud83c\\udde6|\\ud83c\\udde7|\\ud83c\\udde8|\\ud83c\\udde9|\\ud83c\\uddea|\\ud83c\\uddeb|\\ud83c\\uddec|\\ud83c\\udded|\\ud83c\\uddee|\\ud83c\\uddef|\\ud83c\\uddf0|\\ud83c\\uddf1|\\ud83c\\uddf2|\\ud83c\\uddf3|\\ud83c\\uddf4|\\ud83c\\uddf5|\\ud83c\\uddf6|\\ud83c\\uddf7|\\ud83c\\uddf8|\\ud83c\\uddf9|\\ud83c\\uddfa|\\ud83c\\uddfb|\\ud83c\\uddfc|\\ud83c\\uddfd|\\ud83c\\uddfe|\\ud83c\\uddff|\\ud83c\\udffb|\\ud83c\\udffc|\\ud83c\\udffd|\\ud83c\\udffe|\\ud83c\\udfff|\\ud83e\\uddb0|\\ud83e\\uddb1|\\ud83e\\uddb2|\\ud83e\\uddb3|‍|⃣|️|\\udb40\\udc20|\\udb40\\udc21|\\udb40\\udc22|\\udb40\\udc23|\\udb40\\udc24|\\udb40\\udc25|\\udb40\\udc26|\\udb40\\udc27|\\udb40\\udc28|\\udb40\\udc29|\\udb40\\udc2a|\\udb40\\udc2b|\\udb40\\udc2c|\\udb40\\udc2d|\\udb40\\udc2e|\\udb40\\udc2f|\\udb40\\udc30|\\udb40\\udc31|\\udb40\\udc32|\\udb40\\udc33|\\udb40\\udc34|\\udb40\\udc35|\\udb40\\udc36|\\udb40\\udc37|\\udb40\\udc38|\\udb40\\udc39|\\udb40\\udc3a|\\udb40\\udc3b|\\udb40\\udc3c|\\udb40\\udc3d|\\udb40\\udc3e|\\udb40\\udc3f|\\udb40\\udc40|\\udb40\\udc41|\\udb40\\udc42|\\udb40\\udc43|\\udb40\\udc44|\\udb40\\udc45|\\udb40\\udc46|\\udb40\\udc47|\\udb40\\udc48|\\udb40\\udc49|\\udb40\\udc4a|\\udb40\\udc4b|\\udb40\\udc4c|\\udb40\\udc4d|\\udb40\\udc4e|\\udb40\\udc4f|\\udb40\\udc50|\\udb40\\udc51|\\udb40\\udc52|\\udb40\\udc53|\\udb40\\udc54|\\udb40\\udc55|\\udb40\\udc56|\\udb40\\udc57|\\udb40\\udc58|\\udb40\\udc59|\\udb40\\udc5a|\\udb40\\udc5b|\\udb40\\udc5c|\\udb40\\udc5d|\\udb40\\udc5e|\\udb40\\udc5f|\\udb40\\udc60|\\udb40\\udc61|\\udb40\\udc62|\\udb40\\udc63|\\udb40\\udc64|\\udb40\\udc65|\\udb40\\udc66|\\udb40\\udc67|\\udb40\\udc68|\\udb40\\udc69|\\udb40\\udc6a|\\udb40\\udc6b|\\udb40\\udc6c|\\udb40\\udc6d|\\udb40\\udc6e|\\udb40\\udc6f|\\udb40\\udc70|\\udb40\\udc71|\\udb40\\udc72|\\udb40\\udc73|\\udb40\\udc74|\\udb40\\udc75|\\udb40\\udc76|\\udb40\\udc77|\\udb40\\udc78|\\udb40\\udc79|\\udb40\\udc7a|\\udb40\\udc7b|\\udb40\\udc7c|\\udb40\\udc7d|\\udb40\\udc7e|\\udb40\\udc7f))(?:(?:\\#|\\*|0|1|2|3|4|5|6|7|8|9|©|®|‼|⁉|™|ℹ|↔|↕|↖|↗|↘|↙|↩|↪|⌨|⏏|⏭|⏮|⏯|⏱|⏲|⏸|⏹|⏺|Ⓜ|▪|▫|▶|◀|◻|◼|☀|☁|☂|☃|☄|☎|☑|☘|☝|☠|☢|☣|☦|☪|☮|☯|☸|☹|☺|♀|♂|♟|♠|♣|♥|♦|♨|♻|♾|⚒|⚔|⚕|⚖|⚗|⚙|⚛|⚜|⚠|⚧|⚰|⚱|⛈|⛏|⛑|⛓|⛩|⛰|⛱|⛴|⛷|⛸|⛹|✂|✈|✉|✌|✍|✏|✒|✔|✖|✝|✡|✳|✴|❄|❇|❣|❤|➡|⤴|⤵|⬅|⬆|⬇|〰|〽|㊗|㊙|\\ud83c\\udd70|\\ud83c\\udd71|\\ud83c\\udd7e|\\ud83c\\udd7f|\\ud83c\\ude02|\\ud83c\\ude37|\\ud83c\\udf21|\\ud83c\\udf24|\\ud83c\\udf25|\\ud83c\\udf26|\\ud83c\\udf27|\\ud83c\\udf28|\\ud83c\\udf29|\\ud83c\\udf2a|\\ud83c\\udf2b|\\ud83c\\udf2c|\\ud83c\\udf36|\\ud83c\\udf7d|\\ud83c\\udf96|\\ud83c\\udf97|\\ud83c\\udf99|\\ud83c\\udf9a|\\ud83c\\udf9b|\\ud83c\\udf9e|\\ud83c\\udf9f|\\ud83c\\udfcb|\\ud83c\\udfcc|\\ud83c\\udfcd|\\ud83c\\udfce|\\ud83c\\udfd4|\\ud83c\\udfd5|\\ud83c\\udfd6|\\ud83c\\udfd7|\\ud83c\\udfd8|\\ud83c\\udfd9|\\ud83c\\udfda|\\ud83c\\udfdb|\\ud83c\\udfdc|\\ud83c\\udfdd|\\ud83c\\udfde|\\ud83c\\udfdf|\\ud83c\\udff3|\\ud83c\\udff5|\\ud83c\\udff7|\\ud83d\\udc3f|\\ud83d\\udc41|\\ud83d\\udcfd|\\ud83d\\udd49|\\ud83d\\udd4a|\\ud83d\\udd6f|\\ud83d\\udd70|\\ud83d\\udd73|\\ud83d\\udd74|\\ud83d\\udd75|\\ud83d\\udd76|\\ud83d\\udd77|\\ud83d\\udd78|\\ud83d\\udd79|\\ud83d\\udd87|\\ud83d\\udd8a|\\ud83d\\udd8b|\\ud83d\\udd8c|\\ud83d\\udd8d|\\ud83d\\udd90|\\ud83d\\udda5|\\ud83d\\udda8|\\ud83d\\uddb1|\\ud83d\\uddb2|\\ud83d\\uddbc|\\ud83d\\uddc2|\\ud83d\\uddc3|\\ud83d\\uddc4|\\ud83d\\uddd1|\\ud83d\\uddd2|\\ud83d\\uddd3|\\ud83d\\udddc|\\ud83d\\udddd|\\ud83d\\uddde|\\ud83d\\udde1|\\ud83d\\udde3|\\ud83d\\udde8|\\ud83d\\uddef|\\ud83d\\uddf3|\\ud83d\\uddfa|\\ud83d\\udecb|\\ud83d\\udecd|\\ud83d\\udece|\\ud83d\\udecf|\\ud83d\\udee0|\\ud83d\\udee1|\\ud83d\\udee2|\\ud83d\\udee3|\\ud83d\\udee4|\\ud83d\\udee5|\\ud83d\\udee9|\\ud83d\\udef0|\\ud83d\\udef3)️|(?:⌚|⌛|⏩|⏪|⏫|⏬|⏰|⏳|◽|◾|☔|☕|♈|♉|♊|♋|♌|♍|♎|♏|♐|♑|♒|♓|♿|⚓|⚡|⚪|⚫|⚽|⚾|⛄|⛅|⛎|⛔|⛪|⛲|⛳|⛵|⛺|⛽|✅|✊|✋|✨|❌|❎|❓|❔|❕|❗|➕|➖|➗|➰|➿|⬛|⬜|⭐|⭕|\\ud83c\\udc04|\\ud83c\\udccf|\\ud83c\\udd8e|\\ud83c\\udd91|\\ud83c\\udd92|\\ud83c\\udd93|\\ud83c\\udd94|\\ud83c\\udd95|\\ud83c\\udd96|\\ud83c\\udd97|\\ud83c\\udd98|\\ud83c\\udd99|\\ud83c\\udd9a|\\ud83c\\udde6|\\ud83c\\udde7|\\ud83c\\udde8|\\ud83c\\udde9|\\ud83c\\uddea|\\ud83c\\uddeb|\\ud83c\\uddec|\\ud83c\\udded|\\ud83c\\uddee|\\ud83c\\uddef|\\ud83c\\uddf0|\\ud83c\\uddf1|\\ud83c\\uddf2|\\ud83c\\uddf3|\\ud83c\\uddf4|\\ud83c\\uddf5|\\ud83c\\uddf6|\\ud83c\\uddf7|\\ud83c\\uddf8|\\ud83c\\uddf9|\\ud83c\\uddfa|\\ud83c\\uddfb|\\ud83c\\uddfc|\\ud83c\\uddfd|\\ud83c\\uddfe|\\ud83c\\uddff|\\ud83c\\ude01|\\ud83c\\ude1a|\\ud83c\\ude2f|\\ud83c\\ude32|\\ud83c\\ude33|\\ud83c\\ude34|\\ud83c\\ude35|\\ud83c\\ude36|\\ud83c\\ude38|\\ud83c\\ude39|\\ud83c\\ude3a|\\ud83c\\ude50|\\ud83c\\ude51|\\ud83c\\udf00|\\ud83c\\udf01|\\ud83c\\udf02|\\ud83c\\udf03|\\ud83c\\udf04|\\ud83c\\udf05|\\ud83c\\udf06|\\ud83c\\udf07|\\ud83c\\udf08|\\ud83c\\udf09|\\ud83c\\udf0a|\\ud83c\\udf0b|\\ud83c\\udf0c|\\ud83c\\udf0d|\\ud83c\\udf0e|\\ud83c\\udf0f|\\ud83c\\udf10|\\ud83c\\udf11|\\ud83c\\udf12|\\ud83c\\udf13|\\ud83c\\udf14|\\ud83c\\udf15|\\ud83c\\udf16|\\ud83c\\udf17|\\ud83c\\udf18|\\ud83c\\udf19|\\ud83c\\udf1a|\\ud83c\\udf1b|\\ud83c\\udf1c|\\ud83c\\udf1d|\\ud83c\\udf1e|\\ud83c\\udf1f|\\ud83c\\udf20|\\ud83c\\udf2d|\\ud83c\\udf2e|\\ud83c\\udf2f|\\ud83c\\udf30|\\ud83c\\udf31|\\ud83c\\udf32|\\ud83c\\udf33|\\ud83c\\udf34|\\ud83c\\udf35|\\ud83c\\udf37|\\ud83c\\udf38|\\ud83c\\udf39|\\ud83c\\udf3a|\\ud83c\\udf3b|\\ud83c\\udf3c|\\ud83c\\udf3d|\\ud83c\\udf3e|\\ud83c\\udf3f|\\ud83c\\udf40|\\ud83c\\udf41|\\ud83c\\udf42|\\ud83c\\udf43|\\ud83c\\udf44|\\ud83c\\udf45|\\ud83c\\udf46|\\ud83c\\udf47|\\ud83c\\udf48|\\ud83c\\udf49|\\ud83c\\udf4a|\\ud83c\\udf4b|\\ud83c\\udf4c|\\ud83c\\udf4d|\\ud83c\\udf4e|\\ud83c\\udf4f|\\ud83c\\udf50|\\ud83c\\udf51|\\ud83c\\udf52|\\ud83c\\udf53|\\ud83c\\udf54|\\ud83c\\udf55|\\ud83c\\udf56|\\ud83c\\udf57|\\ud83c\\udf58|\\ud83c\\udf59|\\ud83c\\udf5a|\\ud83c\\udf5b|\\ud83c\\udf5c|\\ud83c\\udf5d|\\ud83c\\udf5e|\\ud83c\\udf5f|\\ud83c\\udf60|\\ud83c\\udf61|\\ud83c\\udf62|\\ud83c\\udf63|\\ud83c\\udf64|\\ud83c\\udf65|\\ud83c\\udf66|\\ud83c\\udf67|\\ud83c\\udf68|\\ud83c\\udf69|\\ud83c\\udf6a|\\ud83c\\udf6b|\\ud83c\\udf6c|\\ud83c\\udf6d|\\ud83c\\udf6e|\\ud83c\\udf6f|\\ud83c\\udf70|\\ud83c\\udf71|\\ud83c\\udf72|\\ud83c\\udf73|\\ud83c\\udf74|\\ud83c\\udf75|\\ud83c\\udf76|\\ud83c\\udf77|\\ud83c\\udf78|\\ud83c\\udf79|\\ud83c\\udf7a|\\ud83c\\udf7b|\\ud83c\\udf7c|\\ud83c\\udf7e|\\ud83c\\udf7f|\\ud83c\\udf80|\\ud83c\\udf81|\\ud83c\\udf82|\\ud83c\\udf83|\\ud83c\\udf84|\\ud83c\\udf85|\\ud83c\\udf86|\\ud83c\\udf87|\\ud83c\\udf88|\\ud83c\\udf89|\\ud83c\\udf8a|\\ud83c\\udf8b|\\ud83c\\udf8c|\\ud83c\\udf8d|\\ud83c\\udf8e|\\ud83c\\udf8f|\\ud83c\\udf90|\\ud83c\\udf91|\\ud83c\\udf92|\\ud83c\\udf93|\\ud83c\\udfa0|\\ud83c\\udfa1|\\ud83c\\udfa2|\\ud83c\\udfa3|\\ud83c\\udfa4|\\ud83c\\udfa5|\\ud83c\\udfa6|\\ud83c\\udfa7|\\ud83c\\udfa8|\\ud83c\\udfa9|\\ud83c\\udfaa|\\ud83c\\udfab|\\ud83c\\udfac|\\ud83c\\udfad|\\ud83c\\udfae|\\ud83c\\udfaf|\\ud83c\\udfb0|\\ud83c\\udfb1|\\ud83c\\udfb2|\\ud83c\\udfb3|\\ud83c\\udfb4|\\ud83c\\udfb5|\\ud83c\\udfb6|\\ud83c\\udfb7|\\ud83c\\udfb8|\\ud83c\\udfb9|\\ud83c\\udfba|\\ud83c\\udfbb|\\ud83c\\udfbc|\\ud83c\\udfbd|\\ud83c\\udfbe|\\ud83c\\udfbf|\\ud83c\\udfc0|\\ud83c\\udfc1|\\ud83c\\udfc2|\\ud83c\\udfc3|\\ud83c\\udfc4|\\ud83c\\udfc5|\\ud83c\\udfc6|\\ud83c\\udfc7|\\ud83c\\udfc8|\\ud83c\\udfc9|\\ud83c\\udfca|\\ud83c\\udfcf|\\ud83c\\udfd0|\\ud83c\\udfd1|\\ud83c\\udfd2|\\ud83c\\udfd3|\\ud83c\\udfe0|\\ud83c\\udfe1|\\ud83c\\udfe2|\\ud83c\\udfe3|\\ud83c\\udfe4|\\ud83c\\udfe5|\\ud83c\\udfe6|\\ud83c\\udfe7|\\ud83c\\udfe8|\\ud83c\\udfe9|\\ud83c\\udfea|\\ud83c\\udfeb|\\ud83c\\udfec|\\ud83c\\udfed|\\ud83c\\udfee|\\ud83c\\udfef|\\ud83c\\udff0|\\ud83c\\udff4|\\ud83c\\udff8|\\ud83c\\udff9|\\ud83c\\udffa|\\ud83c\\udffb|\\ud83c\\udffc|\\ud83c\\udffd|\\ud83c\\udffe|\\ud83c\\udfff|\\ud83d\\udc00|\\ud83d\\udc01|\\ud83d\\udc02|\\ud83d\\udc03|\\ud83d\\udc04|\\ud83d\\udc05|\\ud83d\\udc06|\\ud83d\\udc07|\\ud83d\\udc08|\\ud83d\\udc09|\\ud83d\\udc0a|\\ud83d\\udc0b|\\ud83d\\udc0c|\\ud83d\\udc0d|\\ud83d\\udc0e|\\ud83d\\udc0f|\\ud83d\\udc10|\\ud83d\\udc11|\\ud83d\\udc12|\\ud83d\\udc13|\\ud83d\\udc14|\\ud83d\\udc15|\\ud83d\\udc16|\\ud83d\\udc17|\\ud83d\\udc18|\\ud83d\\udc19|\\ud83d\\udc1a|\\ud83d\\udc1b|\\ud83d\\udc1c|\\ud83d\\udc1d|\\ud83d\\udc1e|\\ud83d\\udc1f|\\ud83d\\udc20|\\ud83d\\udc21|\\ud83d\\udc22|\\ud83d\\udc23|\\ud83d\\udc24|\\ud83d\\udc25|\\ud83d\\udc26|\\ud83d\\udc27|\\ud83d\\udc28|\\ud83d\\udc29|\\ud83d\\udc2a|\\ud83d\\udc2b|\\ud83d\\udc2c|\\ud83d\\udc2d|\\ud83d\\udc2e|\\ud83d\\udc2f|\\ud83d\\udc30|\\ud83d\\udc31|\\ud83d\\udc32|\\ud83d\\udc33|\\ud83d\\udc34|\\ud83d\\udc35|\\ud83d\\udc36|\\ud83d\\udc37|\\ud83d\\udc38|\\ud83d\\udc39|\\ud83d\\udc3a|\\ud83d\\udc3b|\\ud83d\\udc3c|\\ud83d\\udc3d|\\ud83d\\udc3e|\\ud83d\\udc40|\\ud83d\\udc42|\\ud83d\\udc43|\\ud83d\\udc44|\\ud83d\\udc45|\\ud83d\\udc46|\\ud83d\\udc47|\\ud83d\\udc48|\\ud83d\\udc49|\\ud83d\\udc4a|\\ud83d\\udc4b|\\ud83d\\udc4c|\\ud83d\\udc4d|\\ud83d\\udc4e|\\ud83d\\udc4f|\\ud83d\\udc50|\\ud83d\\udc51|\\ud83d\\udc52|\\ud83d\\udc53|\\ud83d\\udc54|\\ud83d\\udc55|\\ud83d\\udc56|\\ud83d\\udc57|\\ud83d\\udc58|\\ud83d\\udc59|\\ud83d\\udc5a|\\ud83d\\udc5b|\\ud83d\\udc5c|\\ud83d\\udc5d|\\ud83d\\udc5e|\\ud83d\\udc5f|\\ud83d\\udc60|\\ud83d\\udc61|\\ud83d\\udc62|\\ud83d\\udc63|\\ud83d\\udc64|\\ud83d\\udc65|\\ud83d\\udc66|\\ud83d\\udc67|\\ud83d\\udc68|\\ud83d\\udc69|\\ud83d\\udc6a|\\ud83d\\udc6b|\\ud83d\\udc6c|\\ud83d\\udc6d|\\ud83d\\udc6e|\\ud83d\\udc6f|\\ud83d\\udc70|\\ud83d\\udc71|\\ud83d\\udc72|\\ud83d\\udc73|\\ud83d\\udc74|\\ud83d\\udc75|\\ud83d\\udc76|\\ud83d\\udc77|\\ud83d\\udc78|\\ud83d\\udc79|\\ud83d\\udc7a|\\ud83d\\udc7b|\\ud83d\\udc7c|\\ud83d\\udc7d|\\ud83d\\udc7e|\\ud83d\\udc7f|\\ud83d\\udc80|\\ud83d\\udc81|\\ud83d\\udc82|\\ud83d\\udc83|\\ud83d\\udc84|\\ud83d\\udc85|\\ud83d\\udc86|\\ud83d\\udc87|\\ud83d\\udc88|\\ud83d\\udc89|\\ud83d\\udc8a|\\ud83d\\udc8b|\\ud83d\\udc8c|\\ud83d\\udc8d|\\ud83d\\udc8e|\\ud83d\\udc8f|\\ud83d\\udc90|\\ud83d\\udc91|\\ud83d\\udc92|\\ud83d\\udc93|\\ud83d\\udc94|\\ud83d\\udc95|\\ud83d\\udc96|\\ud83d\\udc97|\\ud83d\\udc98|\\ud83d\\udc99|\\ud83d\\udc9a|\\ud83d\\udc9b|\\ud83d\\udc9c|\\ud83d\\udc9d|\\ud83d\\udc9e|\\ud83d\\udc9f|\\ud83d\\udca0|\\ud83d\\udca1|\\ud83d\\udca2|\\ud83d\\udca3|\\ud83d\\udca4|\\ud83d\\udca5|\\ud83d\\udca6|\\ud83d\\udca7|\\ud83d\\udca8|\\ud83d\\udca9|\\ud83d\\udcaa|\\ud83d\\udcab|\\ud83d\\udcac|\\ud83d\\udcad|\\ud83d\\udcae|\\ud83d\\udcaf|\\ud83d\\udcb0|\\ud83d\\udcb1|\\ud83d\\udcb2|\\ud83d\\udcb3|\\ud83d\\udcb4|\\ud83d\\udcb5|\\ud83d\\udcb6|\\ud83d\\udcb7|\\ud83d\\udcb8|\\ud83d\\udcb9|\\ud83d\\udcba|\\ud83d\\udcbb|\\ud83d\\udcbc|\\ud83d\\udcbd|\\ud83d\\udcbe|\\ud83d\\udcbf|\\ud83d\\udcc0|\\ud83d\\udcc1|\\ud83d\\udcc2|\\ud83d\\udcc3|\\ud83d\\udcc4|\\ud83d\\udcc5|\\ud83d\\udcc6|\\ud83d\\udcc7|\\ud83d\\udcc8|\\ud83d\\udcc9|\\ud83d\\udcca|\\ud83d\\udccb|\\ud83d\\udccc|\\ud83d\\udccd|\\ud83d\\udcce|\\ud83d\\udccf|\\ud83d\\udcd0|\\ud83d\\udcd1|\\ud83d\\udcd2|\\ud83d\\udcd3|\\ud83d\\udcd4|\\ud83d\\udcd5|\\ud83d\\udcd6|\\ud83d\\udcd7|\\ud83d\\udcd8|\\ud83d\\udcd9|\\ud83d\\udcda|\\ud83d\\udcdb|\\ud83d\\udcdc|\\ud83d\\udcdd|\\ud83d\\udcde|\\ud83d\\udcdf|\\ud83d\\udce0|\\ud83d\\udce1|\\ud83d\\udce2|\\ud83d\\udce3|\\ud83d\\udce4|\\ud83d\\udce5|\\ud83d\\udce6|\\ud83d\\udce7|\\ud83d\\udce8|\\ud83d\\udce9|\\ud83d\\udcea|\\ud83d\\udceb|\\ud83d\\udcec|\\ud83d\\udced|\\ud83d\\udcee|\\ud83d\\udcef|\\ud83d\\udcf0|\\ud83d\\udcf1|\\ud83d\\udcf2|\\ud83d\\udcf3|\\ud83d\\udcf4|\\ud83d\\udcf5|\\ud83d\\udcf6|\\ud83d\\udcf7|\\ud83d\\udcf8|\\ud83d\\udcf9|\\ud83d\\udcfa|\\ud83d\\udcfb|\\ud83d\\udcfc|\\ud83d\\udcff|\\ud83d\\udd00|\\ud83d\\udd01|\\ud83d\\udd02|\\ud83d\\udd03|\\ud83d\\udd04|\\ud83d\\udd05|\\ud83d\\udd06|\\ud83d\\udd07|\\ud83d\\udd08|\\ud83d\\udd09|\\ud83d\\udd0a|\\ud83d\\udd0b|\\ud83d\\udd0c|\\ud83d\\udd0d|\\ud83d\\udd0e|\\ud83d\\udd0f|\\ud83d\\udd10|\\ud83d\\udd11|\\ud83d\\udd12|\\ud83d\\udd13|\\ud83d\\udd14|\\ud83d\\udd15|\\ud83d\\udd16|\\ud83d\\udd17|\\ud83d\\udd18|\\ud83d\\udd19|\\ud83d\\udd1a|\\ud83d\\udd1b|\\ud83d\\udd1c|\\ud83d\\udd1d|\\ud83d\\udd1e|\\ud83d\\udd1f|\\ud83d\\udd20|\\ud83d\\udd21|\\ud83d\\udd22|\\ud83d\\udd23|\\ud83d\\udd24|\\ud83d\\udd25|\\ud83d\\udd26|\\ud83d\\udd27|\\ud83d\\udd28|\\ud83d\\udd29|\\ud83d\\udd2a|\\ud83d\\udd2b|\\ud83d\\udd2c|\\ud83d\\udd2d|\\ud83d\\udd2e|\\ud83d\\udd2f|\\ud83d\\udd30|\\ud83d\\udd31|\\ud83d\\udd32|\\ud83d\\udd33|\\ud83d\\udd34|\\ud83d\\udd35|\\ud83d\\udd36|\\ud83d\\udd37|\\ud83d\\udd38|\\ud83d\\udd39|\\ud83d\\udd3a|\\ud83d\\udd3b|\\ud83d\\udd3c|\\ud83d\\udd3d|\\ud83d\\udd4b|\\ud83d\\udd4c|\\ud83d\\udd4d|\\ud83d\\udd4e|\\ud83d\\udd50|\\ud83d\\udd51|\\ud83d\\udd52|\\ud83d\\udd53|\\ud83d\\udd54|\\ud83d\\udd55|\\ud83d\\udd56|\\ud83d\\udd57|\\ud83d\\udd58|\\ud83d\\udd59|\\ud83d\\udd5a|\\ud83d\\udd5b|\\ud83d\\udd5c|\\ud83d\\udd5d|\\ud83d\\udd5e|\\ud83d\\udd5f|\\ud83d\\udd60|\\ud83d\\udd61|\\ud83d\\udd62|\\ud83d\\udd63|\\ud83d\\udd64|\\ud83d\\udd65|\\ud83d\\udd66|\\ud83d\\udd67|\\ud83d\\udd7a|\\ud83d\\udd95|\\ud83d\\udd96|\\ud83d\\udda4|\\ud83d\\uddfb|\\ud83d\\uddfc|\\ud83d\\uddfd|\\ud83d\\uddfe|\\ud83d\\uddff|\\ud83d\\ude00|\\ud83d\\ude01|\\ud83d\\ude02|\\ud83d\\ude03|\\ud83d\\ude04|\\ud83d\\ude05|\\ud83d\\ude06|\\ud83d\\ude07|\\ud83d\\ude08|\\ud83d\\ude09|\\ud83d\\ude0a|\\ud83d\\ude0b|\\ud83d\\ude0c|\\ud83d\\ude0d|\\ud83d\\ude0e|\\ud83d\\ude0f|\\ud83d\\ude10|\\ud83d\\ude11|\\ud83d\\ude12|\\ud83d\\ude13|\\ud83d\\ude14|\\ud83d\\ude15|\\ud83d\\ude16|\\ud83d\\ude17|\\ud83d\\ude18|\\ud83d\\ude19|\\ud83d\\ude1a|\\ud83d\\ude1b|\\ud83d\\ude1c|\\ud83d\\ude1d|\\ud83d\\ude1e|\\ud83d\\ude1f|\\ud83d\\ude20|\\ud83d\\ude21|\\ud83d\\ude22|\\ud83d\\ude23|\\ud83d\\ude24|\\ud83d\\ude25|\\ud83d\\ude26|\\ud83d\\ude27|\\ud83d\\ude28|\\ud83d\\ude29|\\ud83d\\ude2a|\\ud83d\\ude2b|\\ud83d\\ude2c|\\ud83d\\ude2d|\\ud83d\\ude2e|\\ud83d\\ude2f|\\ud83d\\ude30|\\ud83d\\ude31|\\ud83d\\ude32|\\ud83d\\ude33|\\ud83d\\ude34|\\ud83d\\ude35|\\ud83d\\ude36|\\ud83d\\ude37|\\ud83d\\ude38|\\ud83d\\ude39|\\ud83d\\ude3a|\\ud83d\\ude3b|\\ud83d\\ude3c|\\ud83d\\ude3d|\\ud83d\\ude3e|\\ud83d\\ude3f|\\ud83d\\ude40|\\ud83d\\ude41|\\ud83d\\ude42|\\ud83d\\ude43|\\ud83d\\ude44|\\ud83d\\ude45|\\ud83d\\ude46|\\ud83d\\ude47|\\ud83d\\ude48|\\ud83d\\ude49|\\ud83d\\ude4a|\\ud83d\\ude4b|\\ud83d\\ude4c|\\ud83d\\ude4d|\\ud83d\\ude4e|\\ud83d\\ude4f|\\ud83d\\ude80|\\ud83d\\ude81|\\ud83d\\ude82|\\ud83d\\ude83|\\ud83d\\ude84|\\ud83d\\ude85|\\ud83d\\ude86|\\ud83d\\ude87|\\ud83d\\ude88|\\ud83d\\ude89|\\ud83d\\ude8a|\\ud83d\\ude8b|\\ud83d\\ude8c|\\ud83d\\ude8d|\\ud83d\\ude8e|\\ud83d\\ude8f|\\ud83d\\ude90|\\ud83d\\ude91|\\ud83d\\ude92|\\ud83d\\ude93|\\ud83d\\ude94|\\ud83d\\ude95|\\ud83d\\ude96|\\ud83d\\ude97|\\ud83d\\ude98|\\ud83d\\ude99|\\ud83d\\ude9a|\\ud83d\\ude9b|\\ud83d\\ude9c|\\ud83d\\ude9d|\\ud83d\\ude9e|\\ud83d\\ude9f|\\ud83d\\udea0|\\ud83d\\udea1|\\ud83d\\udea2|\\ud83d\\udea3|\\ud83d\\udea4|\\ud83d\\udea5|\\ud83d\\udea6|\\ud83d\\udea7|\\ud83d\\udea8|\\ud83d\\udea9|\\ud83d\\udeaa|\\ud83d\\udeab|\\ud83d\\udeac|\\ud83d\\udead|\\ud83d\\udeae|\\ud83d\\udeaf|\\ud83d\\udeb0|\\ud83d\\udeb1|\\ud83d\\udeb2|\\ud83d\\udeb3|\\ud83d\\udeb4|\\ud83d\\udeb5|\\ud83d\\udeb6|\\ud83d\\udeb7|\\ud83d\\udeb8|\\ud83d\\udeb9|\\ud83d\\udeba|\\ud83d\\udebb|\\ud83d\\udebc|\\ud83d\\udebd|\\ud83d\\udebe|\\ud83d\\udebf|\\ud83d\\udec0|\\ud83d\\udec1|\\ud83d\\udec2|\\ud83d\\udec3|\\ud83d\\udec4|\\ud83d\\udec5|\\ud83d\\udecc|\\ud83d\\uded0|\\ud83d\\uded1|\\ud83d\\uded2|\\ud83d\\uded5|\\ud83d\\uded6|\\ud83d\\uded7|\\ud83d\\udedd|\\ud83d\\udede|\\ud83d\\udedf|\\ud83d\\udeeb|\\ud83d\\udeec|\\ud83d\\udef4|\\ud83d\\udef5|\\ud83d\\udef6|\\ud83d\\udef7|\\ud83d\\udef8|\\ud83d\\udef9|\\ud83d\\udefa|\\ud83d\\udefb|\\ud83d\\udefc|\\ud83d\\udfe0|\\ud83d\\udfe1|\\ud83d\\udfe2|\\ud83d\\udfe3|\\ud83d\\udfe4|\\ud83d\\udfe5|\\ud83d\\udfe6|\\ud83d\\udfe7|\\ud83d\\udfe8|\\ud83d\\udfe9|\\ud83d\\udfea|\\ud83d\\udfeb|\\ud83d\\udff0|\\ud83e\\udd0c|\\ud83e\\udd0d|\\ud83e\\udd0e|\\ud83e\\udd0f|\\ud83e\\udd10|\\ud83e\\udd11|\\ud83e\\udd12|\\ud83e\\udd13|\\ud83e\\udd14|\\ud83e\\udd15|\\ud83e\\udd16|\\ud83e\\udd17|\\ud83e\\udd18|\\ud83e\\udd19|\\ud83e\\udd1a|\\ud83e\\udd1b|\\ud83e\\udd1c|\\ud83e\\udd1d|\\ud83e\\udd1e|\\ud83e\\udd1f|\\ud83e\\udd20|\\ud83e\\udd21|\\ud83e\\udd22|\\ud83e\\udd23|\\ud83e\\udd24|\\ud83e\\udd25|\\ud83e\\udd26|\\ud83e\\udd27|\\ud83e\\udd28|\\ud83e\\udd29|\\ud83e\\udd2a|\\ud83e\\udd2b|\\ud83e\\udd2c|\\ud83e\\udd2d|\\ud83e\\udd2e|\\ud83e\\udd2f|\\ud83e\\udd30|\\ud83e\\udd31|\\ud83e\\udd32|\\ud83e\\udd33|\\ud83e\\udd34|\\ud83e\\udd35|\\ud83e\\udd36|\\ud83e\\udd37|\\ud83e\\udd38|\\ud83e\\udd39|\\ud83e\\udd3a|\\ud83e\\udd3c|\\ud83e\\udd3d|\\ud83e\\udd3e|\\ud83e\\udd3f|\\ud83e\\udd40|\\ud83e\\udd41|\\ud83e\\udd42|\\ud83e\\udd43|\\ud83e\\udd44|\\ud83e\\udd45|\\ud83e\\udd47|\\ud83e\\udd48|\\ud83e\\udd49|\\ud83e\\udd4a|\\ud83e\\udd4b|\\ud83e\\udd4c|\\ud83e\\udd4d|\\ud83e\\udd4e|\\ud83e\\udd4f|\\ud83e\\udd50|\\ud83e\\udd51|\\ud83e\\udd52|\\ud83e\\udd53|\\ud83e\\udd54|\\ud83e\\udd55|\\ud83e\\udd56|\\ud83e\\udd57|\\ud83e\\udd58|\\ud83e\\udd59|\\ud83e\\udd5a|\\ud83e\\udd5b|\\ud83e\\udd5c|\\ud83e\\udd5d|\\ud83e\\udd5e|\\ud83e\\udd5f|\\ud83e\\udd60|\\ud83e\\udd61|\\ud83e\\udd62|\\ud83e\\udd63|\\ud83e\\udd64|\\ud83e\\udd65|\\ud83e\\udd66|\\ud83e\\udd67|\\ud83e\\udd68|\\ud83e\\udd69|\\ud83e\\udd6a|\\ud83e\\udd6b|\\ud83e\\udd6c|\\ud83e\\udd6d|\\ud83e\\udd6e|\\ud83e\\udd6f|\\ud83e\\udd70|\\ud83e\\udd71|\\ud83e\\udd72|\\ud83e\\udd73|\\ud83e\\udd74|\\ud83e\\udd75|\\ud83e\\udd76|\\ud83e\\udd77|\\ud83e\\udd78|\\ud83e\\udd79|\\ud83e\\udd7a|\\ud83e\\udd7b|\\ud83e\\udd7c|\\ud83e\\udd7d|\\ud83e\\udd7e|\\ud83e\\udd7f|\\ud83e\\udd80|\\ud83e\\udd81|\\ud83e\\udd82|\\ud83e\\udd83|\\ud83e\\udd84|\\ud83e\\udd85|\\ud83e\\udd86|\\ud83e\\udd87|\\ud83e\\udd88|\\ud83e\\udd89|\\ud83e\\udd8a|\\ud83e\\udd8b|\\ud83e\\udd8c|\\ud83e\\udd8d|\\ud83e\\udd8e|\\ud83e\\udd8f|\\ud83e\\udd90|\\ud83e\\udd91|\\ud83e\\udd92|\\ud83e\\udd93|\\ud83e\\udd94|\\ud83e\\udd95|\\ud83e\\udd96|\\ud83e\\udd97|\\ud83e\\udd98|\\ud83e\\udd99|\\ud83e\\udd9a|\\ud83e\\udd9b|\\ud83e\\udd9c|\\ud83e\\udd9d|\\ud83e\\udd9e|\\ud83e\\udd9f|\\ud83e\\udda0|\\ud83e\\udda1|\\ud83e\\udda2|\\ud83e\\udda3|\\ud83e\\udda4|\\ud83e\\udda5|\\ud83e\\udda6|\\ud83e\\udda7|\\ud83e\\udda8|\\ud83e\\udda9|\\ud83e\\uddaa|\\ud83e\\uddab|\\ud83e\\uddac|\\ud83e\\uddad|\\ud83e\\uddae|\\ud83e\\uddaf|\\ud83e\\uddb0|\\ud83e\\uddb1|\\ud83e\\uddb2|\\ud83e\\uddb3|\\ud83e\\uddb4|\\ud83e\\uddb5|\\ud83e\\uddb6|\\ud83e\\uddb7|\\ud83e\\uddb8|\\ud83e\\uddb9|\\ud83e\\uddba|\\ud83e\\uddbb|\\ud83e\\uddbc|\\ud83e\\uddbd|\\ud83e\\uddbe|\\ud83e\\uddbf|\\ud83e\\uddc0|\\ud83e\\uddc1|\\ud83e\\uddc2|\\ud83e\\uddc3|\\ud83e\\uddc4|\\ud83e\\uddc5|\\ud83e\\uddc6|\\ud83e\\uddc7|\\ud83e\\uddc8|\\ud83e\\uddc9|\\ud83e\\uddca|\\ud83e\\uddcb|\\ud83e\\uddcc|\\ud83e\\uddcd|\\ud83e\\uddce|\\ud83e\\uddcf|\\ud83e\\uddd0|\\ud83e\\uddd1|\\ud83e\\uddd2|\\ud83e\\uddd3|\\ud83e\\uddd4|\\ud83e\\uddd5|\\ud83e\\uddd6|\\ud83e\\uddd7|\\ud83e\\uddd8|\\ud83e\\uddd9|\\ud83e\\uddda|\\ud83e\\udddb|\\ud83e\\udddc|\\ud83e\\udddd|\\ud83e\\uddde|\\ud83e\\udddf|\\ud83e\\udde0|\\ud83e\\udde1|\\ud83e\\udde2|\\ud83e\\udde3|\\ud83e\\udde4|\\ud83e\\udde5|\\ud83e\\udde6|\\ud83e\\udde7|\\ud83e\\udde8|\\ud83e\\udde9|\\ud83e\\uddea|\\ud83e\\uddeb|\\ud83e\\uddec|\\ud83e\\udded|\\ud83e\\uddee|\\ud83e\\uddef|\\ud83e\\uddf0|\\ud83e\\uddf1|\\ud83e\\uddf2|\\ud83e\\uddf3|\\ud83e\\uddf4|\\ud83e\\uddf5|\\ud83e\\uddf6|\\ud83e\\uddf7|\\ud83e\\uddf8|\\ud83e\\uddf9|\\ud83e\\uddfa|\\ud83e\\uddfb|\\ud83e\\uddfc|\\ud83e\\uddfd|\\ud83e\\uddfe|\\ud83e\\uddff|\\ud83e\\ude70|\\ud83e\\ude71|\\ud83e\\ude72|\\ud83e\\ude73|\\ud83e\\ude74|\\ud83e\\ude78|\\ud83e\\ude79|\\ud83e\\ude7a|\\ud83e\\ude7b|\\ud83e\\ude7c|\\ud83e\\ude80|\\ud83e\\ude81|\\ud83e\\ude82|\\ud83e\\ude83|\\ud83e\\ude84|\\ud83e\\ude85|\\ud83e\\ude86|\\ud83e\\ude90|\\ud83e\\ude91|\\ud83e\\ude92|\\ud83e\\ude93|\\ud83e\\ude94|\\ud83e\\ude95|\\ud83e\\ude96|\\ud83e\\ude97|\\ud83e\\ude98|\\ud83e\\ude99|\\ud83e\\ude9a|\\ud83e\\ude9b|\\ud83e\\ude9c|\\ud83e\\ude9d|\\ud83e\\ude9e|\\ud83e\\ude9f|\\ud83e\\udea0|\\ud83e\\udea1|\\ud83e\\udea2|\\ud83e\\udea3|\\ud83e\\udea4|\\ud83e\\udea5|\\ud83e\\udea6|\\ud83e\\udea7|\\ud83e\\udea8|\\ud83e\\udea9|\\ud83e\\udeaa|\\ud83e\\udeab|\\ud83e\\udeac|\\ud83e\\udeb0|\\ud83e\\udeb1|\\ud83e\\udeb2|\\ud83e\\udeb3|\\ud83e\\udeb4|\\ud83e\\udeb5|\\ud83e\\udeb6|\\ud83e\\udeb7|\\ud83e\\udeb8|\\ud83e\\udeb9|\\ud83e\\udeba|\\ud83e\\udec0|\\ud83e\\udec1|\\ud83e\\udec2|\\ud83e\\udec3|\\ud83e\\udec4|\\ud83e\\udec5|\\ud83e\\uded0|\\ud83e\\uded1|\\ud83e\\uded2|\\ud83e\\uded3|\\ud83e\\uded4|\\ud83e\\uded5|\\ud83e\\uded6|\\ud83e\\uded7|\\ud83e\\uded8|\\ud83e\\uded9|\\ud83e\\udee0|\\ud83e\\udee1|\\ud83e\\udee2|\\ud83e\\udee3|\\ud83e\\udee4|\\ud83e\\udee5|\\ud83e\\udee6|\\ud83e\\udee7|\\ud83e\\udef0|\\ud83e\\udef1|\\ud83e\\udef2|\\ud83e\\udef3|\\ud83e\\udef4|\\ud83e\\udef5|\\ud83e\\udef6)(?!︎)️?)|(?:🇦🇨|🇦🇩|🇦🇪|🇦🇫|🇦🇬|🇦🇮|🇦🇱|🇦🇲|🇦🇴|🇦🇶|🇦🇷|🇦🇸|🇦🇹|🇦🇺|🇦🇼|🇦🇽|🇦🇿|🇧🇦|🇧🇧|🇧🇩|🇧🇪|🇧🇫|🇧🇬|🇧🇭|🇧🇮|🇧🇯|🇧🇱|🇧🇲|🇧🇳|🇧🇴|🇧🇶|🇧🇷|🇧🇸|🇧🇹|🇧🇻|🇧🇼|🇧🇾|🇧🇿|🇨🇦|🇨🇨|🇨🇩|🇨🇫|🇨🇬|🇨🇭|🇨🇮|🇨🇰|🇨🇱|🇨🇲|🇨🇳|🇨🇴|🇨🇵|🇨🇷|🇨🇺|🇨🇻|🇨🇼|🇨🇽|🇨🇾|🇨🇿|🇩🇪|🇩🇬|🇩🇯|🇩🇰|🇩🇲|🇩🇴|🇩🇿|🇪🇦|🇪🇨|🇪🇪|🇪🇬|🇪🇭|🇪🇷|🇪🇸|🇪🇹|🇪🇺|🇫🇮|🇫🇯|🇫🇰|🇫🇲|🇫🇴|🇫🇷|🇬🇦|🇬🇧|🇬🇩|🇬🇪|🇬🇫|🇬🇬|🇬🇭|🇬🇮|🇬🇱|🇬🇲|🇬🇳|🇬🇵|🇬🇶|🇬🇷|🇬🇸|🇬🇹|🇬🇺|🇬🇼|🇬🇾|🇭🇰|🇭🇲|🇭🇳|🇭🇷|🇭🇹|🇭🇺|🇮🇨|🇮🇩|🇮🇪|🇮🇱|🇮🇲|🇮🇳|🇮🇴|🇮🇶|🇮🇷|🇮🇸|🇮🇹|🇯🇪|🇯🇲|🇯🇴|🇯🇵|🇰🇪|🇰🇬|🇰🇭|🇰🇮|🇰🇲|🇰🇳|🇰🇵|🇰🇷|🇰🇼|🇰🇾|🇰🇿|🇱🇦|🇱🇧|🇱🇨|🇱🇮|🇱🇰|🇱🇷|🇱🇸|🇱🇹|🇱🇺|🇱🇻|🇱🇾|🇲🇦|🇲🇨|🇲🇩|🇲🇪|🇲🇫|🇲🇬|🇲🇭|🇲🇰|🇲🇱|🇲🇲|🇲🇳|🇲🇴|🇲🇵|🇲🇶|🇲🇷|🇲🇸|🇲🇹|🇲🇺|🇲🇻|🇲🇼|🇲🇽|🇲🇾|🇲🇿|🇳🇦|🇳🇨|🇳🇪|🇳🇫|🇳🇬|🇳🇮|🇳🇱|🇳🇴|🇳🇵|🇳🇷|🇳🇺|🇳🇿|🇴🇲|🇵🇦|🇵🇪|🇵🇫|🇵🇬|🇵🇭|🇵🇰|🇵🇱|🇵🇲|🇵🇳|🇵🇷|🇵🇸|🇵🇹|🇵🇼|🇵🇾|🇶🇦|🇷🇪|🇷🇴|🇷🇸|🇷🇺|🇷🇼|🇸🇦|🇸🇧|🇸🇨|🇸🇩|🇸🇪|🇸🇬|🇸🇭|🇸🇮|🇸🇯|🇸🇰|🇸🇱|🇸🇲|🇸🇳|🇸🇴|🇸🇷|🇸🇸|🇸🇹|🇸🇻|🇸🇽|🇸🇾|🇸🇿|🇹🇦|🇹🇨|🇹🇩|🇹🇫|🇹🇬|🇹🇭|🇹🇯|🇹🇰|🇹🇱|🇹🇲|🇹🇳|🇹🇴|🇹🇷|🇹🇹|🇹🇻|🇹🇼|🇹🇿|🇺🇦|🇺🇬|🇺🇲|🇺🇳|🇺🇸|🇺🇾|🇺🇿|🇻🇦|🇻🇨|🇻🇪|🇻🇬|🇻🇮|🇻🇳|🇻🇺|🇼🇫|🇼🇸|🇽🇰|🇾🇪|🇾🇹|🇿🇦|🇿🇲|🇿🇼)))&quot;,&quot;options&quot;:&quot;g&quot;},&quot;all_merchandise_categories&quot;:[{&quot;id&quot;:1,&quot;name&quot;:&quot;BASE CARE&quot;,&quot;ancestry&quot;:null},{&quot;id&quot;:2,&quot;name&quot;:&quot;DAILY CARE&quot;,&quot;ancestry&quot;:null},{&quot;id&quot;:3,&quot;name&quot;:&quot;SPECIAL CARE&quot;,&quot;ancestry&quot;:null},{&quot;id&quot;:4,&quot;name&quot;:&quot;MAKE UP CARE&quot;,&quot;ancestry&quot;:null}],&quot;landing_page_order_params&quot;:null,&quot;temona_ga_track&quot;:{&quot;ga4_code&quot;:&quot;G-R92PQV2BT4&quot;,&quot;ua_code&quot;:&quot;UA-152786089-3&quot;,&quot;on&quot;:true,&quot;user_signed_in&quot;:false},&quot;contact_input_field_config&quot;:{&quot;id&quot;:1,&quot;shop_id&quot;:1,&quot;contact_subject&quot;:3,&quot;contact_category&quot;:3,&quot;contact_choose_file&quot;:3,&quot;created_at&quot;:&quot;2024-05-01T21:41:32.088+09:00&quot;,&quot;updated_at&quot;:&quot;2024-07-08T08:28:57.166+09:00&quot;},&quot;register_field_config&quot;:[{&quot;id&quot;:1,&quot;shop_id&quot;:1,&quot;name&quot;:&quot;お客様情報&quot;,&quot;field&quot;:&quot;sign_up&quot;,&quot;position&quot;:1,&quot;created_at&quot;:&quot;2024-05-01T21:41:32.124+09:00&quot;,&quot;updated_at&quot;:&quot;2024-07-10T17:21:17.709+09:00&quot;},{&quot;id&quot;:2,&quot;shop_id&quot;:1,&quot;name&quot;:&quot;お届け日設定&quot;,&quot;field&quot;:&quot;shipments&quot;,&quot;position&quot;:2,&quot;created_at&quot;:&quot;2024-05-01T21:41:32.127+09:00&quot;,&quot;updated_at&quot;:&quot;2024-07-10T17:21:17.713+09:00&quot;},{&quot;id&quot;:3,&quot;shop_id&quot;:1,&quot;name&quot;:&quot;2回目以降のお届け日設定(定期・頒布会コース)&quot;,&quot;field&quot;:&quot;frequency&quot;,&quot;position&quot;:3,&quot;created_at&quot;:&quot;2024-05-01T21:41:32.129+09:00&quot;,&quot;updated_at&quot;:&quot;2024-07-10T17:21:17.716+09:00&quot;},{&quot;id&quot;:4,&quot;shop_id&quot;:1,&quot;name&quot;:&quot;お支払い方法&quot;,&quot;field&quot;:&quot;payment_method_shop&quot;,&quot;position&quot;:4,&quot;created_at&quot;:&quot;2024-05-01T21:41:32.131+09:00&quot;,&quot;updated_at&quot;:&quot;2024-07-10T17:21:17.719+09:00&quot;},{&quot;id&quot;:6,&quot;shop_id&quot;:1,&quot;name&quot;:&quot;住所情報&quot;,&quot;field&quot;:&quot;address_information&quot;,&quot;position&quot;:5,&quot;created_at&quot;:&quot;2024-05-01T21:41:32.135+09:00&quot;,&quot;updated_at&quot;:&quot;2024-07-10T17:21:17.722+09:00&quot;},{&quot;id&quot;:5,&quot;shop_id&quot;:1,&quot;name&quot;:&quot;通信欄&quot;,&quot;field&quot;:&quot;request_memo&quot;,&quot;position&quot;:6,&quot;created_at&quot;:&quot;2024-05-01T21:41:32.133+09:00&quot;,&quot;updated_at&quot;:&quot;2024-07-10T17:21:17.725+09:00&quot;}],&quot;referrer_url&quot;:null,&quot;referral_url_config&quot;:{&quot;is_use_referral&quot;:false,&quot;is_use_twitter&quot;:true,&quot;is_use_facebook&quot;:true,&quot;is_use_line&quot;:true,&quot;description_twitter&quot;:&quot;最近使用しているスキンケアブランド「ALICE BELLE」。\r\n肌の内側から整えるような使用感と、毎日のケアが楽しみになるような心地よさが魅力です。\r\n\r\n現在、紹介キャンペーンを実施中！\r\n下記リンクからの購入で特典を受けられます。\r\n※有効期限は14日&quot;,&quot;description_line&quot;:&quot;最近使用しているスキンケアブランド「ALICE BELLE」。\r\n肌の内側から整えるような使用感と、毎日のケアが楽しみになるような心地よさが魅力です。\r\n\r\n現在、紹介キャンペーンを実施しており、下記リンクからの登録で特典を受けられるようです。\r\n関心があれば、ご覧になってみてください。\r\n※有効期限は14日です。&quot;,&quot;is_referral_overwrite&quot;:false,&quot;referral_keeping_days&quot;:14},&quot;vacation_configs_caution&quot;:&quot;&quot;}"></div>