/* The Human Remedy - site chrome. Lives here rather than the Elementor kit because the kit stylesheet is only enqueued on Elementor-built pages, so Cart, Checkout and My Account never got it. */ /* HR-CHROME-START header + footer chrome */ /* Astra option keys would not apply on this build; nav sat at 1.55:1. */ .ast-primary-header-bar,#ast-desktop-header .ast-primary-header-bar{background-color:#0e2619} .ast-primary-header-bar .main-header-menu>li>a,.ast-primary-header-bar #ast-hf-menu-1>li>a{color:#f4efe3} .ast-primary-header-bar .main-header-menu>li>a:hover,.ast-primary-header-bar #ast-hf-menu-1>li>a:hover, .ast-primary-header-bar .current-menu-item>a,.ast-primary-header-bar .current-menu-ancestor>a{color:#e8a33d} .ast-primary-header-bar .site-title a{color:#f4efe3}.ast-primary-header-bar .site-title a:hover{color:#e8a33d} .ast-primary-header-bar .sub-menu,#ast-hf-menu-1 .sub-menu,.main-header-menu .sub-menu{background-color:#102b1b;border:0;box-shadow:0 10px 30px rgba(0,0,0,.35)} .ast-primary-header-bar .sub-menu li>a,#ast-hf-menu-1 .sub-menu li>a{color:#f4efe3;background-color:transparent} .ast-primary-header-bar .sub-menu li>a:hover,#ast-hf-menu-1 .sub-menu li>a:hover{color:#e8a33d;background-color:#173a25} .ast-primary-header-bar .sub-menu .current-menu-item>a{color:#e8a33d} .hr-nav-cta>a{background-color:#a8410a!important;color:#ffffff!important;border-radius:999px; padding:9px 18px!important;margin-left:10px;font-weight:700;line-height:1.2; transition:transform .2s ease,background-color .2s ease;display:inline-block} .hr-nav-cta>a:hover{background-color:#a53f06!important;color:#ffffff!important;transform:translateY(-2px)} .hr-nav-cta>a:active{transform:translateY(1px)} .hr-nav-cta .sub-arrow{display:none} #ast-mobile-header .ast-mobile-header-wrap,#ast-mobile-header .main-header-bar{background-color:#0e2619} #ast-mobile-header .menu-item>a,.ast-mobile-popup-drawer .menu-item>a{color:#f4efe3} .ast-mobile-popup-drawer .ast-mobile-popup-inner{background-color:#0e2619} .ast-mobile-menu-trigger-fill,.ast-mobile-menu-trigger-minimal,.ast-button-wrap .menu-toggle{color:#f4efe3;background-color:transparent} .site-footer,.ast-small-footer,.site-below-footer-wrap,.site-primary-footer-wrap{background-color:#0b2115;color:#f4efe3} .site-footer a,.ast-small-footer a,.site-below-footer-wrap a{color:#9db396} .site-footer a:hover,.ast-small-footer a:hover,.site-below-footer-wrap a:hover{color:#e8a33d} .site-below-footer-wrap{background-color:#081a10;border-top:1px solid #17311f} .site-footer .widget-title,.site-footer h2,.site-footer h3{color:#f4efe3} /* HR-CHROME-END */ /* HR-MOBNAV-START mobile menu + every submenu level */ #ast-hf-mobile-menu,#ast-hf-mobile-menu .sub-menu, .ast-mobile-header-content,.ast-mobile-header-content .main-header-menu, .ast-mobile-header-content .sub-menu,.ast-mobile-popup-drawer .ast-mobile-popup-inner, .ast-mobile-popup-content,.ast-mobile-popup-content .main-header-menu, .ast-mobile-popup-content .sub-menu,#ast-mobile-header .main-header-menu, #ast-mobile-header .sub-menu{background-color:#0e2619!important} #ast-hf-mobile-menu .sub-menu,.ast-mobile-header-content .sub-menu, .ast-mobile-popup-content .sub-menu,#ast-mobile-header .sub-menu{background-color:#102b1b!important} #ast-hf-mobile-menu li>a,.ast-mobile-header-content li>a,.ast-mobile-popup-content li>a, #ast-mobile-header li>a{color:#f4efe3!important;border-color:#1d3f2b} #ast-hf-mobile-menu li>a:hover,.ast-mobile-header-content li>a:hover, .ast-mobile-popup-content li>a:hover,#ast-mobile-header li>a:hover{color:#e8a33d!important} #ast-hf-mobile-menu .ast-menu-toggle,.ast-mobile-header-content .ast-menu-toggle{color:#f4efe3!important} .ast-mobile-popup-drawer .ast-mobile-popup-header{background-color:#0e2619} .ast-mobile-popup-drawer .menu-toggle-close{color:#f4efe3} .hr-nav-cta>a{color:#ffffff!important} /* HR-MOBNAV-END */ /* HR-MOBNAV2-START */ #ast-hf-mobile-menu .menu-link,.ast-mobile-header-content .menu-link, .ast-mobile-popup-content .menu-link,#ast-mobile-header .menu-link{background-color:transparent!important;color:#f4efe3!important} #ast-hf-mobile-menu .menu-link:hover,.ast-mobile-header-content .menu-link:hover, .ast-mobile-popup-content .menu-link:hover{color:#e8a33d!important} #ast-hf-mobile-menu .sub-menu .menu-link{background-color:transparent!important} /* HR-MOBNAV2-END */ /* woo page grounds */ .woocommerce-cart,.woocommerce-checkout,.woocommerce-account{background-color:#f4efe3} .woocommerce-cart #content,.woocommerce-checkout #content,.woocommerce-account #content, .woocommerce-cart .site-content,.woocommerce-checkout .site-content,.woocommerce-account .site-content, .woocommerce-cart .ast-container,.woocommerce-checkout .ast-container,.woocommerce-account .ast-container{background-color:#f4efe3} /* HR-GROUND-START */ html body{background-color:#0b2115!important} /* HR-GROUND-END */ /* HR-STICKY-START solid chrome: the bar was 86% opaque over a 14px backdrop blur, so page content showed through it as you scrolled. Solid now, and the blur goes with it — there is nothing behind a solid bar to blur. */ .ast-primary-header-bar,#ast-mobile-header .ast-mobile-header-wrap{ background-color:#0b2115!important; border-bottom:1px solid rgba(148,175,150,.30);box-shadow:none} .ast-sticky-active .ast-primary-header-bar{border-bottom-color:rgba(148,175,150,.42)} /* HR-STICKY-END */ /* HR-COMMERCE-START cart / checkout / account One border per component, one padding scale, one vertical rhythm. */ /* 1. ground */ html body.woocommerce-cart,html body.woocommerce-checkout,html body.woocommerce-account{background-color:#0e2619!important} .woocommerce-cart #content,.woocommerce-checkout #content,.woocommerce-account #content{background-color:#0e2619} .woocommerce-page .entry-content,.woocommerce-page article,.woocommerce-page .ast-article-single, .woocommerce-page .woocommerce,.woocommerce-page .ast-container,.woocommerce-page #primary, form.checkout,form.woocommerce-checkout,form.woocommerce-cart-form,.woocommerce-cart form{background-color:transparent!important;border:0!important} /* 2. reset every border Woo and the theme draw, then add them back deliberately */ .woocommerce-page table.shop_table,.woocommerce-page table.shop_table *, .woocommerce-checkout-review-order-table,.woocommerce-checkout-review-order-table *{border:0!important} /* 3. one surface, one border, one radius per component */ .woocommerce table.shop_table,.woocommerce-checkout-review-order-table, .woocommerce .cart_totals,.woocommerce-checkout #order_review,.woocommerce-billing-fields, .woocommerce-additional-fields,.woocommerce-shipping-fields,.woocommerce-form-login, .woocommerce-form-coupon,.woocommerce-MyAccount-content,.woocommerce-MyAccount-navigation, .woocommerce-order,.woocommerce-customer-details,.woocommerce-checkout #payment{ background-color:#102B1B!important;color:#f4efe3!important; border:1px solid #2A4433!important;border-radius:16px!important; overflow:hidden;box-shadow:none!important;margin-bottom:20px} .woocommerce table.shop_table,.woocommerce-checkout-review-order-table{border-collapse:separate!important;border-spacing:0} .woocommerce .cart_totals,.woocommerce-checkout #order_review,.woocommerce-billing-fields, .woocommerce-additional-fields,.woocommerce-shipping-fields,.woocommerce-form-login, .woocommerce-form-coupon,.woocommerce-MyAccount-content,.woocommerce-MyAccount-navigation{padding:22px} /* 4. separators live on cells only, never on the row and the table as well */ .woocommerce table.shop_table th,.woocommerce-checkout-review-order-table th{ background-color:#356b45!important;color:#f4efe3!important;padding:14px 16px!important} .woocommerce table.shop_table td,.woocommerce-checkout-review-order-table td{ padding:14px 16px!important;color:#f4efe3!important; border-bottom:1px solid rgba(148,175,150,.16)!important} .woocommerce table.shop_table tr:last-child td, .woocommerce-checkout-review-order-table tr:last-child td{border-bottom:0!important} .woocommerce .order-total td,.woocommerce .order-total th{background-color:#356b45!important;font-weight:700} /* 5. headings sit on the surface, never on the theme's near-white block */ .woocommerce-page h1,.woocommerce-page h2,.woocommerce-page h3,.woocommerce-page h4, .woocommerce-page .entry-title,#order_review_heading,#ship-to-different-address{ background:transparent!important;color:#f4efe3!important;border:0!important; padding-left:0;padding-right:0;margin:0 0 14px} .woocommerce-page a{color:#e8a33d} .woocommerce-page,.woocommerce-page p,.woocommerce-page label,.woocommerce-page li{color:#f4efe3} /* 6. fields: one height, one radius, one focus ring */ .woocommerce-page input[type=text],.woocommerce-page input[type=email],.woocommerce-page input[type=tel], .woocommerce-page input[type=password],.woocommerce-page input[type=number],.woocommerce-page textarea, .woocommerce-page select,.woocommerce input#coupon_code,.woocommerce .quantity input.qty, .select2-container--default .select2-selection--single{ background-color:#f4efe3!important;color:#12251a!important; border:1px solid #2A4433!important;border-radius:10px!important; padding:12px 14px!important;min-height:48px!important;font-size:16px!important;box-shadow:none!important} .woocommerce-page input:focus,.woocommerce-page textarea:focus,.woocommerce-page select:focus, .select2-container--default.select2-container--focus .select2-selection--single{ outline:none!important;border-color:#e8a33d!important;box-shadow:0 0 0 3px rgba(232,163,61,.28)!important} .woocommerce-page ::placeholder{color:#6b7a6f;opacity:1} .woocommerce form .form-row{margin:0 0 16px;padding:0} .woocommerce form .form-row label{display:block;margin-bottom:6px;font-weight:600} .woocommerce .required,.woocommerce abbr.required{color:#e8a33d;border:0;text-decoration:none} .select2-dropdown{background-color:#f4efe3;color:#12251a;border-color:rgba(148,175,150,.28)} .select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#356b45;color:#f4efe3} .woocommerce-page input[type=checkbox],.woocommerce-page input[type=radio]{accent-color:#a8410a;width:18px;height:18px;min-height:0!important} /* 7. buttons */ .woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce #place_order,.wc-proceed-to-checkout a.checkout-button{ background-color:#a8410a!important;color:#fff5ea!important;border:0!important;border-radius:999px!important; font-weight:700;padding:14px 26px!important;line-height:1.2;transition:transform .2s ease,background-color .2s ease} .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce #place_order:hover, .wc-proceed-to-checkout a.checkout-button:hover{background-color:#a53f06!important;transform:translateY(-2px)} .woocommerce a.button:active,.woocommerce button.button:active{transform:translateY(1px)} .woocommerce button.button[name=update_cart],.woocommerce a.button.wc-backward{background-color:#356b45!important} /* 8. vertical rhythm */ .woocommerce-message,.woocommerce-info,.woocommerce-error{ background-color:#356b45!important;color:#f4efe3!important;border-top:0!important; border-radius:12px!important;margin-bottom:20px;padding:16px 20px 16px 48px} .woocommerce-message{border-left:4px solid #7fc79a!important} .woocommerce-info{border-left:4px solid #e8a33d!important} .woocommerce-error{border-left:4px solid #e88fa0!important} .woocommerce .cart-collaterals,.woocommerce-cart .cart-collaterals{margin-top:8px} .wc-proceed-to-checkout{padding:0!important;margin-top:16px} .woocommerce-cart .coupon{display:flex;gap:10px;flex-wrap:wrap;padding:16px 0 0} /* 9. mobile: each stacked row becomes its own card */ @media (max-width:767px){ .woocommerce .cart_totals,.woocommerce-checkout #order_review,.woocommerce-billing-fields, .woocommerce-additional-fields,.woocommerce-shipping-fields,.woocommerce-MyAccount-content{padding:16px} .woocommerce table.shop_table{background-color:transparent!important;border:0!important;overflow:visible} .woocommerce table.shop_table_responsive tr{ display:block;background-color:#102B1B!important;border:1px solid #2A4433!important; border-radius:14px!important;margin-bottom:14px;overflow:hidden} .woocommerce table.shop_table_responsive tr td{display:flex;justify-content:space-between;align-items:center; gap:12px;padding:12px 14px!important;border-bottom:1px solid rgba(148,175,150,.16)!important} .woocommerce table.shop_table_responsive tr td:last-child{border-bottom:0!important} .woocommerce table.shop_table_responsive tr td::before{font-weight:700;color:#f4efe3!important} .woocommerce table.shop_table_responsive thead{display:none} .woocommerce a.button,.woocommerce button.button,.woocommerce #place_order, .wc-proceed-to-checkout a.checkout-button{width:100%;text-align:center} .woocommerce-cart .coupon{flex-direction:column} .woocommerce-cart .coupon input#coupon_code,.woocommerce-cart .coupon button{width:100%} } /* HR-COMMERCE-END */ /* HR-COMTIDY-START mobile cart refinements */ @media (max-width:767px){ /* coupon: Woo ships a fixed-width input that squashes on narrow screens */ .woocommerce-cart .coupon{flex-direction:column;align-items:stretch;gap:10px} .woocommerce-cart .coupon input#coupon_code,.woocommerce .coupon input.input-text{ width:100%!important;max-width:none!important;flex:1 1 100%!important;margin:0!important;float:none!important} .woocommerce-cart .coupon button,.woocommerce-cart .coupon .button{width:100%!important;margin:0!important;float:none!important} /* the remove and thumbnail cells carry no label, so drop the empty label column */ .woocommerce table.shop_table_responsive tr td.product-remove, .woocommerce table.shop_table_responsive tr td.product-thumbnail{justify-content:center;padding:10px 14px!important} .woocommerce table.shop_table_responsive tr td.product-remove::before, .woocommerce table.shop_table_responsive tr td.product-thumbnail::before{content:none!important;display:none!important} /* pull them into one tidy header strip on the card */ .woocommerce table.shop_table_responsive tr td.product-thumbnail img{width:74px;height:74px;object-fit:cover;border-radius:10px} .woocommerce table.shop_table_responsive tr td.product-remove{border-bottom:0!important;padding-bottom:0!important;justify-content:flex-end} .woocommerce table.shop_table_responsive tr td.product-thumbnail{border-bottom:1px solid rgba(148,175,150,.16)!important;padding-top:0!important} .woocommerce table.shop_table_responsive tr td.product-remove a.remove{font-size:22px;line-height:1} /* long product names should wrap left-aligned, not ragged right */ .woocommerce table.shop_table_responsive tr td.product-name{align-items:flex-start} .woocommerce table.shop_table_responsive tr td.product-name a{text-align:right} .woocommerce table.shop_table_responsive tr td::before{flex:0 0 auto;margin-right:12px} } /* HR-COMTIDY-END */ /* HR-ACTIONS-START */ @media (max-width:767px){ /* the actions cell holds the coupon + update button; it must not be a flex row */ .woocommerce table.shop_table_responsive tr td.actions{ display:block!important;width:100%!important;padding:14px!important} .woocommerce table.shop_table_responsive tr td.actions::before{content:none!important;display:none!important} .woocommerce-cart .coupon{width:100%!important;display:flex;flex-direction:column;gap:10px;padding:0!important} .woocommerce-cart .coupon input#coupon_code{width:100%!important;flex:1 1 auto!important} .woocommerce-cart .coupon button{width:100%!important} .woocommerce table.shop_table_responsive tr td.actions button[name=update_cart]{width:100%;margin-top:10px} } /* HR-ACTIONS-END */ /* HR-CHECKOUT-START checkout streamlining */ /* 1. drop the fields that add friction. Both are optional in Woo, so hiding them submits empty and breaks no validation. */ .woocommerce-checkout #billing_company_field, .woocommerce-checkout #shipping_company_field, .woocommerce-checkout .woocommerce-additional-fields, .woocommerce-checkout #order_comments_field, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper{display:none!important} /* 2. Square hosted card field was locked to 250px and cropping the inputs */ .sq-card-wrapper,.sq-card-iframe-container,#wc-square-credit-card-hosted-fields, .wc-square-credit-card-hosted-field,div[id^=single-card-wrapper]{ width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box} .sq-card-wrapper iframe,.sq-card-iframe-container iframe,#payment iframe{ width:100%!important;min-width:0!important;display:block} .woocommerce-checkout #payment div.payment_box{padding:18px!important;overflow:visible!important} .woocommerce-checkout #payment div.payment_box .form-row{max-width:none!important;width:100%!important} /* 3. Your order: one clean vertical column, no duplicated money rows */ .woocommerce-checkout-review-order-table{width:100%!important} .woocommerce-checkout-review-order-table tr.cart-subtotal{display:none!important} .woocommerce-checkout-review-order-table tr.recurring-totals th{ font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#f4efe3; background-color:transparent!important;padding:16px 16px 6px!important} .woocommerce-checkout-review-order-table tr.order-total td, .woocommerce-checkout-review-order-table tr.order-total th{ background-color:#356b45!important;font-size:17px;font-weight:700} .woocommerce-checkout-review-order-table tfoot tr th{width:52%} .woocommerce-checkout-review-order-table td{text-align:right} .woocommerce-checkout-review-order-table th{text-align:left} .woocommerce-checkout-review-order-table .product-name{text-align:left} .woocommerce-checkout-review-order-table .product-quantity{color:#e8a33d;font-weight:700} /* stack the order table on narrow screens instead of squeezing two columns */ @media (max-width:767px){ .woocommerce-checkout-review-order-table thead{display:none} .woocommerce-checkout-review-order-table tbody tr, .woocommerce-checkout-review-order-table tfoot tr{display:flex;justify-content:space-between; align-items:baseline;gap:12px;padding:12px 14px;border-bottom:1px solid rgba(148,175,150,.16)} .woocommerce-checkout-review-order-table tbody td, .woocommerce-checkout-review-order-table tfoot td, .woocommerce-checkout-review-order-table tfoot th{padding:0!important;border:0!important;background:transparent!important} .woocommerce-checkout-review-order-table tfoot tr.order-total{background-color:#356b45!important;border-radius:10px;margin-top:6px} .woocommerce-checkout-review-order-table tfoot tr th{width:auto} } /* HR-CHECKOUT-END */ /* HR-CARDFIX-START Square wraps its card field in a fieldset with 30px padding, which narrowed the hosted input and made it look cropped. */ .woocommerce-checkout #payment fieldset, fieldset[class*=wc-square-credit-card]{padding:0!important;margin:0!important;border:0!important} .wc-square-credit-card-container,div[class*=wc-square-credit-card-new-payment-method]{ width:100%!important;max-width:100%!important} .sq-card-wrapper,div[id^=single-card-wrapper]{width:100%!important;max-width:100%!important;min-width:0!important} .sq-card-wrapper iframe,#payment iframe{width:100%!important;min-width:0!important;display:block} /* give the field a little breathing room of its own */ .woocommerce-checkout #payment div.payment_box{padding:18px!important} /* HR-CARDFIX-END */ /* HR-STICKYHDR-START pin the header to the top of the viewport */ /* overflow-x:hidden on html/body silently kills position:sticky. clip prevents the same sideways scroll without creating a scroll container. */ html,body{overflow-x:clip} /* NOTE: sticky must live on #masthead. The inner wrap, #ast-desktop-header and #masthead are all exactly the header height, so a sticky inner wrap has zero travel and simply scrolls away. #page is the tall ancestor. */ #masthead{position:-webkit-sticky;position:sticky;top:0;z-index:999} /* solid, not 86% over a blur: page content was visible through the bar */ .ast-primary-header-bar,#ast-mobile-header .ast-mobile-header-wrap{ background-color:#0b2115!important; border-bottom:1px solid rgba(148,175,150,.30);box-shadow:none} @supports not (backdrop-filter: blur(1px)){ .ast-primary-header-bar,#ast-mobile-header .ast-mobile-header-wrap{background-color:#0e2619!important} } /* the header must sit above Elementor sections that create their own stacking */ #masthead.site-header{z-index:999} /* keep anchor links clear of the pinned bar */ html{scroll-padding-top:96px} @media (max-width:767px){html{scroll-padding-top:76px}} /* popups and their overlays must still cover it */ .dialog-widget,.dialog-lightbox-widget,[id^=elementor-popup-modal-]{z-index:9999!important} /* HR-STICKYHDR-END */ /* HRWALLETSTART Square Apple Pay and Google Pay on cart and checkout. Square renders the container hidden and reveals it in JS only when a wallet is genuinely available, so we never force it visible. */ #wc-square-digital-wallet{width:100%;box-sizing:border-box;margin:0 0 18px;padding:0; background-color:transparent;border:0;border-radius:0} #wc-square-digital-wallet>div{width:100%!important;box-sizing:border-box} #wc-square-digital-wallet .apple-pay-button,#wc-square-digital-wallet #wc-square-google-pay{ width:100%!important;min-height:56px;height:56px!important;border-radius:999px!important; overflow:hidden;margin:0 0 10px!important;box-sizing:border-box} #wc-square-digital-wallet .apple-pay-button{ -apple-pay-button-style:white;-apple-pay-button-type:buy; -webkit-appearance:-apple-pay-button;appearance:-apple-pay-button;cursor:pointer;height:52px} #wc-square-google-pay button,#wc-square-google-pay .gpay-card-info-container{ width:100%!important;min-height:56px;height:56px!important;border-radius:999px!important} #wc-square-wallet-divider{text-align:center;color:#c9d6c2;font-size:12px; letter-spacing:1.5px;text-transform:uppercase;margin:6px 0 0;padding:0} /* cart: sit the wallets directly above Proceed to checkout */ .woocommerce-cart .wc-proceed-to-checkout #wc-square-digital-wallet{margin-bottom:14px} /* checkout: sit them above the billing form as express pay */ .woocommerce-checkout #wc-square-digital-wallet{margin-bottom:22px} @media (max-width:767px){ #wc-square-digital-wallet{padding:14px;margin-bottom:16px} #wc-square-digital-wallet .apple-pay-button,#wc-square-digital-wallet #wc-square-google-pay{min-height:50px!important} } /* HRWALLETEND */ /* HRSTRIPESTART Stripe Express Checkout (Apple Pay / Google Pay). Stripe hides these until the browser can actually offer a wallet, so we only style the shown state and never force visibility. */ #wc-stripe-payment-request-wrapper,.wc-stripe-payment-request-wrapper, #wc-stripe-express-checkout-element,.wc-stripe-express-checkout-wrapper{ width:100%;box-sizing:border-box;margin:0 0 18px;padding:0; background-color:transparent;border:0;border-radius:0} #wc-stripe-payment-request-button,#wc-stripe-express-checkout-element>div{ width:100%!important;min-height:56px;height:56px!important;border-radius:999px!important;overflow:hidden} #wc-stripe-payment-request-button-separator,.wc-stripe-payment-request-button-separator, .wc-stripe-express-checkout-divider{ text-align:center;color:#c9d6c2!important;font-size:12px;letter-spacing:1.5px; text-transform:uppercase;margin:10px 0 0!important;padding:0} /* the popup one tap block uses the same panel treatment */ .qs-wallets{box-sizing:border-box} @media (max-width:767px){ #wc-stripe-payment-request-wrapper,.wc-stripe-express-checkout-wrapper{padding:14px;margin-bottom:16px} } /* HRSTRIPEEND */ /* */ /* HREXPRESSSTART Apple Pay / Google Pay / Amazon Pay above every checkout action. Stripe renders into #wc-stripe-express-checkout-element with no wrapper class, so target the id directly. */ /* CART - above Proceed to checkout */ .woocommerce-cart .wc-proceed-to-checkout{display:flex;flex-direction:column;gap:12px} .woocommerce-cart .wc-proceed-to-checkout #wc-stripe-express-checkout-element, .woocommerce-cart .wc-proceed-to-checkout .wc-stripe-express-checkout-wrapper, .woocommerce-cart .wc-proceed-to-checkout #wc-stripe-payment-request-wrapper{order:-3} .woocommerce-cart .wc-proceed-to-checkout .wc-stripe-express-checkout-divider, .woocommerce-cart .wc-proceed-to-checkout #wc-stripe-payment-request-button-separator, .woocommerce-cart .wc-proceed-to-checkout .wc-stripe-express-checkout-button-separator{order:-2} .woocommerce-cart .wc-proceed-to-checkout a.checkout-button{order:0;margin:0} /* PRODUCT - above Add to basket */ .single-product form.cart{display:flex;flex-direction:column;gap:12px} .single-product form.cart #wc-stripe-express-checkout-element, .single-product form.cart .wc-stripe-express-checkout-wrapper{order:-3} .single-product form.cart .wc-stripe-express-checkout-divider{order:-2} .single-product form.cart .quantity{order:0} .single-product form.cart button.single_add_to_cart_button{order:1;width:100%} /* CHECKOUT - top of the form */ .woocommerce-checkout #wc-stripe-express-checkout-element{order:-3;margin-bottom:20px} /* shared panel treatment */ .wc-stripe-express-checkout-wrapper,#wc-stripe-payment-request-wrapper,#wc-stripe-express-checkout-element{width:100%;box-sizing:border-box;margin:0;padding:0; background-color:transparent;border:0;border-radius:0} #wc-stripe-express-checkout-element{display:flex;flex-direction:column;gap:10px} #wc-stripe-express-checkout-element>div,#wc-stripe-payment-request-button{width:100%!important;min-height:56px;height:56px!important;border-radius:999px!important;overflow:hidden} #wc-stripe-express-checkout-element-applePay,#wc-stripe-express-checkout-element-googlePay, #wc-stripe-express-checkout-element-amazonPay,#wc-stripe-express-checkout-element-link{ width:100%!important;min-height:56px;height:56px!important;border-radius:999px!important;overflow:hidden} .wc-stripe-express-checkout-divider,#wc-stripe-payment-request-button-separator, .wc-stripe-express-checkout-button-separator{text-align:center;color:#c9d6c2!important; font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin:0!important;padding:0} @media (max-width:767px){.wc-stripe-express-checkout-wrapper,#wc-stripe-payment-request-wrapper,#wc-stripe-express-checkout-element{padding:0}} /* HREXPRESSEND */ /* HRPRODEXPSTART product page: Stripe drops the express element into .summary as a sibling of form.cart, so order it there, not inside the form. */ .single-product .summary.entry-summary{display:flex;flex-direction:column} .single-product .summary.entry-summary>#wc-stripe-express-checkout-element{order:-2;margin-bottom:14px} .single-product .summary.entry-summary>.wc-stripe-express-checkout-divider, .single-product .summary.entry-summary>.wc-stripe-express-checkout-button-separator{order:-1;margin-bottom:10px} .single-product .summary.entry-summary>form.cart{order:0} .single-product .summary.entry-summary>.product_title{order:-6} .single-product .summary.entry-summary>.price{order:-5} .single-product .summary.entry-summary>.woocommerce-product-details__short-description{order:-4} .single-product .summary.entry-summary>.product_meta{order:2} /* HRPRODEXPEND */ /* */ /* HRQSORDERSTART bundle popup: quantity, then wallets, then Add to basket. WooCommerce sets form.cart{display:flex} so contents needs !important. */ [id^=elementor-popup-modal-] .qs-block{display:flex;flex-direction:column;gap:10px} [id^=elementor-popup-modal-] [class*=elementor-add-to-cart]{display:contents!important} [id^=elementor-popup-modal-] form.cart,[id^=elementor-popup-modal-] form.cart.cart{display:contents!important} [id^=elementor-popup-modal-] form.cart .quantity{order:-4;width:100%!important;max-width:none!important; display:flex!important;align-items:center;gap:12px;margin:0!important} [id^=elementor-popup-modal-] form.cart .quantity input.qty{width:100%!important;max-width:none!important; min-height:56px;height:56px!important;text-align:center;font-size:16px} [id^=elementor-popup-modal-] .qs-wallets{order:-3;width:100%} [id^=elementor-popup-modal-] form.cart button.single_add_to_cart_button{order:-2;width:100%!important; display:flex!important;align-items:center;justify-content:center;min-height:56px;height:56px;margin:0!important} [id^=elementor-popup-modal-] .qs-or{order:-1} [id^=elementor-popup-modal-] .qs-wallet-note{order:0} /* HRQSORDEREND */ /* */ /* */ /* HRQTYSTART quantity steppers, tap friendly on desktop and mobile */ .hr-qty{display:flex!important;flex-wrap:nowrap!important;align-items:stretch; gap:0;width:100%;max-width:200px;box-sizing:border-box} .hr-qty>input.qty,.hr-qty>input[type=number]{ -moz-appearance:textfield;appearance:textfield;text-align:center; border-radius:0!important;border-left:0!important;border-right:0!important; min-height:56px;height:56px!important;flex:1 1 0!important;width:auto!important;min-width:0!important; max-width:none!important;margin:0!important;box-sizing:border-box} .hr-qty input::-webkit-outer-spin-button,.hr-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .hr-qty>.hr-qty-btn{flex:0 0 52px!important;width:52px!important;min-width:52px;min-height:56px;height:56px; background:#f4efe3;color:#12251a;border:1px solid rgba(148,175,150,.35);box-sizing:border-box; font-size:22px;line-height:1;font-weight:700;cursor:pointer;padding:0;margin:0; display:flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none; transition:background-color .15s ease,color .15s ease} .hr-qty>.hr-qty-btn:first-child{border-radius:10px 0 0 10px} .hr-qty>.hr-qty-btn:last-child{border-radius:0 10px 10px 0} .hr-qty>.hr-qty-btn:hover{background:#0e2619;color:#f4efe3} .hr-qty>.hr-qty-btn:active{transform:translateY(1px)} .hr-qty>.hr-qty-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(232,163,61,.45);position:relative;z-index:2} [id^=elementor-popup-modal-] .hr-qty{max-width:none} .woocommerce table.shop_table .hr-qty{max-width:180px;margin-left:auto} @media (max-width:767px){ .hr-qty{max-width:none} .woocommerce table.shop_table .hr-qty{max-width:210px} .hr-qty>.hr-qty-btn{flex:0 0 56px!important;width:56px!important;min-height:56px;font-size:24px} .hr-qty>input.qty{min-height:56px!important} } /* HRQTYEND */ /* HRNAVCTASTART header buy CTA, desktop and mobile */ .hr-nav-cta>a{background-color:#a8410a!important;color:#ffffff!important; border-radius:999px!important;padding:11px 22px!important;margin-left:12px; font-weight:700;font-size:14px;line-height:1.2;letter-spacing:.2px;white-space:nowrap; display:inline-flex;align-items:center;justify-content:center;text-decoration:none; box-shadow:0 2px 0 #8f3605; transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease} .hr-nav-cta>a:hover{background-color:#a53f06!important;color:#ffffff!important; transform:translateY(-2px);box-shadow:0 4px 0 #7f3005} .hr-nav-cta>a:active{transform:translateY(1px);box-shadow:0 1px 0 #7f3005} .hr-nav-cta>a:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(232,163,61,.5)} .hr-nav-cta .sub-arrow,.hr-nav-cta .ast-icon{display:none!important} /* mirrored button in the mobile bar */ .hr-mobile-cta{display:none} @media (max-width:921px){ .hr-mobile-cta{display:inline-flex!important;align-items:center;justify-content:center; background-color:#a8410a;color:#ffffff!important;border-radius:999px; padding:10px 16px;margin-right:10px;font-weight:700;font-size:13px;line-height:1.2; white-space:nowrap;text-decoration:none;min-height:42px;box-shadow:0 2px 0 #8f3605; transition:transform .18s ease,background-color .18s ease} .hr-mobile-cta:hover,.hr-mobile-cta:focus{background-color:#a53f06;color:#ffffff!important} .hr-mobile-cta:active{transform:translateY(1px)} #ast-mobile-header .ast-mobile-header-wrap .site-header-primary-section-right{ display:flex;align-items:center;gap:4px} } @media (max-width:400px){ .hr-mobile-cta{padding:9px 13px;font-size:12.5px} } /* stepper: let the field take the space between the two buttons */ form.cart .quantity.hr-qty,.woocommerce div.product form.cart .quantity.hr-qty{ width:100%!important;max-width:220px} @media (max-width:767px){ form.cart .quantity.hr-qty{max-width:none} } /* HRNAVCTAEND */ /* */ /* HRMOBBARSTART */ @media (max-width:921px){ .hr-mobile-bar{display:flex!important;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap} .hr-mobile-bar .ast-button-wrap{margin:0} .hr-mobile-cta{flex:0 0 auto;margin:0!important} } @media (max-width:600px){ #ast-mobile-header .site-title{font-size:19px!important;line-height:1.15;white-space:nowrap} #ast-mobile-header .site-title a{white-space:nowrap} .hr-mobile-cta{padding:9px 14px;font-size:12.5px} } @media (max-width:380px){ #ast-mobile-header .site-title{font-size:17px!important} .hr-mobile-cta{padding:8px 11px;font-size:12px} } /* HRMOBBAREND */ /* HRCTAHIDESTART the desktop menu CTA must not leak onto mobile; the mirrored .hr-mobile-cta covers that breakpoint instead. */ @media (max-width:921px){ .hr-nav-cta,.hr-nav-cta>a{display:none!important} } @media (min-width:922px){ .hr-mobile-cta{display:none!important} } /* HRCTAHIDEEND */ /* HRCTAFITSTART */ @media (min-width:922px){ .main-header-menu > li.hr-nav-cta{margin-left:10px;display:flex;align-items:center} .main-header-menu > li.hr-nav-cta > a.menu-link, .ast-nav-menu > li.hr-nav-cta > a.menu-link{ display:inline-flex!important;align-items:center!important;justify-content:center!important; width:auto!important;flex:0 0 auto!important;align-self:center!important; height:auto!important;min-height:0!important;line-height:1.2!important; padding:10px 18px!important;white-space:nowrap!important} } /* Keep the bar on ONE row. The 8 nav items alone fill the menu box, so trim their padding; below 1150px also shrink the wordmark to widen the menu. */ @media (min-width:922px){ .main-header-menu > li:not(.hr-nav-cta) > a.menu-link{ padding-left:12px!important;padding-right:12px!important} } @media (min-width:922px) and (max-width:1150px){ .main-header-menu > li:not(.hr-nav-cta) > a.menu-link{ padding-left:8px!important;padding-right:8px!important;font-size:13px!important} .main-header-menu > li.hr-nav-cta > a.menu-link{padding:9px 14px!important;font-size:13px!important} .site-title{font-size:21px!important;line-height:1.2!important} .site-title a{white-space:nowrap} } @media (min-width:922px) and (max-width:1023px){ .main-header-menu > li:not(.hr-nav-cta) > a.menu-link{ padding-left:6px!important;padding-right:6px!important;font-size:12.5px!important} .main-header-menu > li.hr-nav-cta > a.menu-link{padding:8px 12px!important;font-size:12.5px!important} .site-title{font-size:18px!important} } /* HRCTAFITEND */ /* HRNAVCOLSTART */ /* Learn = purple, Shop = yellow. Tints chosen to stay legible on the dark green header; the mobile drawer needs the higher-specificity selectors because Astra's own mobile menu rules outrank a plain class selector. */ .main-header-menu > li.hr-nav-learn > a.menu-link, .ast-nav-menu > li.hr-nav-learn > a.menu-link, #ast-mobile-header li.hr-nav-learn > a.menu-link, #ast-mobile-popup li.hr-nav-learn > a.menu-link, .ast-mobile-header-wrap li.hr-nav-learn > a.menu-link, .ast-mobile-popup-drawer li.hr-nav-learn > a.menu-link, li.hr-nav-learn > a{color:#c6a6f5!important} .main-header-menu > li.hr-nav-learn > a.menu-link:hover, #ast-mobile-header li.hr-nav-learn > a.menu-link:hover, li.hr-nav-learn > a:hover{color:#ddc9ff!important} .main-header-menu > li.hr-nav-shop > a.menu-link, .ast-nav-menu > li.hr-nav-shop > a.menu-link, #ast-mobile-header li.hr-nav-shop > a.menu-link, #ast-mobile-popup li.hr-nav-shop > a.menu-link, .ast-mobile-header-wrap li.hr-nav-shop > a.menu-link, .ast-mobile-popup-drawer li.hr-nav-shop > a.menu-link, li.hr-nav-shop > a{color:#f5c542!important} .main-header-menu > li.hr-nav-shop > a.menu-link:hover, #ast-mobile-header li.hr-nav-shop > a.menu-link:hover, li.hr-nav-shop > a:hover{color:#ffdb7a!important} /* HRNAVCOLEND */ /* HRPOPORDERSTART */ /* Bundle popup action stack: quantity, then the price beside it, then the real Stripe wallet buttons, then the basket button. The old .qs-wallets placeholders are gone, so the live ECE container needs its own order. */ [id^=elementor-popup-modal-] form.cart .quantity{order:-4!important} [id^=elementor-popup-modal-] .hr-total-row{width:100%; display:flex;align-items:baseline;justify-content:space-between;gap:10px; margin:2px 0 10px} [id^=elementor-popup-modal-] #wc-stripe-express-checkout-element{ order:-2!important;width:100%;margin:0 0 12px!important} [id^=elementor-popup-modal-] form.cart button.single_add_to_cart_button{order:-1!important} [id^=elementor-popup-modal-] .wc-stripe-express-checkout-button-separator{order:0!important} /* HRPOPORDEREND */ /* HROPTSTART */ /* Bundle popup plan cards: selectable, not links. Both cards reserve room on the inline-end edge so the selected tick can never sit over the price. */ .hr-opt{cursor:pointer;position:relative;border:2px solid rgba(244,239,227,.22); border-radius:14px;padding-inline-end:46px!important; transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease} .hr-opt:hover{border-color:rgba(244,239,227,.45)} .hr-opt:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(232,163,61,.55)} .hr-opt.hr-opt-selected{border-color:#e8a33d;background-color:rgba(232,163,61,.10); box-shadow:inset 0 0 0 1px rgba(232,163,61,.35)} .hr-opt.hr-opt-selected::after{content:"\2713";position:absolute; inset-block-start:50%;transform:translateY(-50%);inset-inline-end:14px; width:24px;height:24px;border-radius:999px;background:#e8a33d;color:#0e2619; font-size:14px;font-weight:800;line-height:24px;text-align:center;pointer-events:none} .hr-total-value{font-variant-numeric:tabular-nums} /* HROPTEND */ /* HROPTROWSTART */ /* Plan card header: name on the left, price on the right, on one line. The subscribe card wrapped because its price sits in a block that grew to the full row width. */ .hr-opt > *:first-child{display:flex!important;flex-direction:row!important; flex-wrap:nowrap!important;align-items:baseline!important; justify-content:space-between!important;gap:10px;width:100%} .hr-opt > *:first-child > *{width:auto!important;min-width:0} .hr-opt > *:first-child > .qs-plan-name{flex:1 1 auto!important} .hr-opt > *:first-child > *:not(.qs-plan-name){flex:0 0 auto!important; display:flex;align-items:baseline;gap:8px;justify-content:flex-end; white-space:nowrap;text-align:end} /* HROPTROWEND */ /* HRADDONSTART */ /* Membership tick box: white, on the inline-end side. Elementor's atomic containers already define .e-con::before with inset:0, so inline-start must be reset to auto or left:0 wins and the box jumps to the left edge. */ .hr-addon{position:relative;cursor:pointer; padding-inline-start:16px!important;padding-inline-end:60px!important; border:2px solid rgba(14,38,25,.22);border-radius:14px; transition:border-color .18s ease,background-color .18s ease} .hr-addon:hover{border-color:rgba(14,38,25,.42)} .hr-addon:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(232,163,61,.55)} .hr-addon::before,.hr-addon::after{ inset-inline-start:auto!important;left:auto!important; inset-block-start:50%!important;bottom:auto!important; inset-inline-end:16px!important;right:16px!important; transform:translateY(-50%)!important} .hr-addon::before{content:""!important;position:absolute; width:26px!important;height:26px!important;border-radius:7px; background:#ffffff!important;border:2px solid #0e2619;box-sizing:border-box; box-shadow:0 1px 2px rgba(0,0,0,.12); transition:background-color .18s ease,border-color .18s ease} .hr-addon.hr-addon-on{border-color:#e8a33d;background-color:rgba(232,163,61,.10)} .hr-addon.hr-addon-on::before{background:#e8a33d!important;border-color:#0e2619} .hr-addon.hr-addon-on::after{content:"✓"!important;position:absolute; width:26px!important;height:26px!important;line-height:26px!important; text-align:center;color:#0e2619;font-size:16px;font-weight:800; pointer-events:none} /* HRADDONEND */ /* HRHDRREVEALSTART */ /* Sticky header slides away going down and returns on any upward scroll. */ #masthead{transition:transform .26s cubic-bezier(.4,0,.2,1)} #masthead.hr-hdr-hidden{transform:translateY(-100%)!important} body.ast-popup-nav-open #masthead, .ast-mobile-popup-drawer.active #masthead{transform:none!important} @media (prefers-reduced-motion: reduce){#masthead{transition:none}} /* HRHDRREVEALEND */ /* HRQTYBIGSTART */ /* Bigger +/- controls. The row is locked to nowrap and the number field is allowed to shrink, so the arrows can never wrap above or below the field. */ .hr-qty{display:flex!important;flex-wrap:nowrap!important;align-items:stretch!important} .hr-qty>.hr-qty-btn{flex:0 0 60px!important;width:60px!important;min-width:60px!important; min-height:60px!important;height:auto!important;font-size:26px!important;line-height:1!important; padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important} .hr-qty>input.qty,.hr-qty>input[type=number]{ flex:1 1 0%!important;min-width:0!important;width:auto!important; height:60px!important;min-height:60px!important} @media (max-width:600px){ .hr-qty>.hr-qty-btn{flex:0 0 64px!important;width:64px!important;min-width:64px!important; min-height:64px!important;font-size:28px!important} .hr-qty>input.qty,.hr-qty>input[type=number]{height:64px!important;min-height:64px!important} } /* very narrow screens: keep them large but guarantee they still fit one row */ @media (max-width:360px){ .hr-qty>.hr-qty-btn{flex:0 0 56px!important;width:56px!important;min-width:56px!important; min-height:56px!important} } /* HRQTYBIGEND */ /* HRWNOTESTART */ /* The wallet explainer is only useful when no wallet buttons appear. */ .elementor-popup-modal.hr-wallets-live .qs-wallet-note, .elementor-popup-modal.hr-wallets-live .e-gc-47d1a61{display:none!important} /* HRWNOTEEND */ /* HRFIX3START */ /* 1. Inside the cream popup the wallet block must not wear the green card treatment it uses on product pages - the buttons sit on the cream. */ .elementor-popup-modal #wc-stripe-express-checkout-element{ background:transparent!important;background-color:transparent!important; border:0!important;padding:0!important;border-radius:0!important; margin:0 0 12px!important;gap:8px} /* hold the space while Stripe mounts so the layout does not jump */ .elementor-popup-modal.hr-ece-pending #wc-stripe-express-checkout-element{min-height:112px} /* 2. Astra's scroll-to-top button still had its default blue. */ #ast-scroll-top{ background-color:#2f3330!important;color:#ffffff!important; width:46px!important;height:46px!important;line-height:46px!important; border-radius:999px!important;border:0!important; box-shadow:0 6px 18px rgba(0,0,0,.28)!important; display:flex!important;align-items:center;justify-content:center; font-size:17px!important;padding:0!important; inset-block-end:26px;inset-inline-end:26px; transition:transform .18s ease,background-color .18s ease,opacity .18s ease} #ast-scroll-top:hover{background-color:#1c1f1d!important;transform:translateY(-2px)} #ast-scroll-top:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(232,163,61,.6)!important} #ast-scroll-top .ast-icon,#ast-scroll-top svg{fill:currentColor!important;color:#ffffff!important; width:15px;height:15px} @media (max-width:600px){ #ast-scroll-top{width:42px!important;height:42px!important;line-height:42px!important; inset-block-end:18px;inset-inline-end:18px} } /* HRFIX3END */ /* HRMISCSTART */ /* 1. Mobile header sat 4px off the right edge. */ @media (max-width:921px){ #ast-mobile-header .site-header-primary-section-right{padding-inline-end:16px!important} #ast-mobile-header .ast-button-wrap{margin-inline-end:0!important} } /* 2. Centre the back-to-top glyph: the icon span inherits a 42px line-height which pushes the inline svg off centre. */ #ast-scroll-top .ast-icon{display:flex!important;align-items:center;justify-content:center; line-height:1!important;width:auto!important;height:auto!important;margin:0!important} #ast-scroll-top svg{display:block!important;margin:0!important;width:15px;height:15px} /* 3. Bigger nudge arrows either side of the bundle button. */ .buy-arrow-img{width:34px!important;height:34px!important;max-width:34px!important} @media (max-width:600px){ .buy-arrow-img{width:28px!important;height:28px!important;max-width:28px!important} } /* HRMISCEND */ /* HRMISC2START */ /* The mobile header bar was 387px wide inside a 375px viewport, so the toggle sat hard against the edge no matter what padding we added. */ @media (max-width:921px){ #ast-mobile-header,#ast-mobile-header .ast-mobile-header-wrap, #ast-mobile-header .site-header-primary-section-right, #ast-mobile-header .ast-container,#ast-mobile-header .ast-container-fluid{ max-width:100%!important;box-sizing:border-box!important;overflow-x:clip} #ast-mobile-header .ast-container,#ast-mobile-header .ast-container-fluid{ padding-inline-start:16px!important;padding-inline-end:16px!important;margin:0!important} #ast-mobile-header .site-header-primary-section-right{padding-inline-end:14px!important} } /* Back-to-top glyph sat 3px high: kill the inherited line-height entirely. */ #ast-scroll-top{line-height:1!important} #ast-scroll-top .ast-icon svg{vertical-align:middle!important} /* Popup total: ride along the bottom of the scroll area, then settle into its own place once it is reached. */ [id^=elementor-popup-modal-] .hr-total-row{ position:-webkit-sticky;position:sticky;inset-block-end:0;z-index:5; background:#ece1cc; box-shadow:0 -8px 14px -10px rgba(14,38,25,.35); padding-block:10px!important;margin-block-end:0!important} /* HRMISC2END */ /* HRARROWFIXSTART */ /* The nudge arrows sit in a flex row and were shrinking below the width we set (28px asked, 22px rendered), so pin their flex basis. */ .buy-arrow-img{flex:0 0 34px!important;width:34px!important;height:34px!important; max-width:34px!important;min-width:34px!important} @media (max-width:600px){ .buy-arrow-img{flex:0 0 28px!important;width:28px!important;height:28px!important; max-width:28px!important;min-width:28px!important} } /* HRARROWFIXEND */ /* HRTOGGAPSTART */ /* The mobile builder grid row ran to 399px inside a 375px viewport, so the toggle only ever looked 4px from the edge. Constrain the row, then set a single clean gap. */ @media (max-width:921px){ #ast-mobile-header .ast-builder-grid-row, #ast-mobile-header .ast-builder-grid-row-has-sides{ max-width:100%!important;width:100%!important;margin-inline:0!important; box-sizing:border-box!important} #ast-mobile-header .site-header-primary-section-right{padding-inline-end:0!important} /* the header bar already carries 20px padding; extra margin here only stole width from the wordmark and truncated it */ #ast-mobile-header .ast-button-wrap{margin-inline-end:0!important} } /* HRTOGGAPEND */ /* HRHEROSTART */ /* Hero headline: full caps via CSS so the underlying text stays readable to screen readers. Caps need tighter leading and a touch more letter-spacing than sentence case, or the lines drift apart and the words run together. */ .h1,.h1-strong,.h1-accent{ text-transform:uppercase!important; line-height:.96!important;letter-spacing:-.005em!important} .h1,.h1-strong{margin-block-end:0!important} /* The two headline lines are separate elements in a flex column with a 12px gap, so the spacing between SAME YOU. and FRESH START! was 57.6px of leading plus 14px of gap -- far looser than the 0.96 set on the type. Cancel the gap so the pair reads as one block at its own leading. */ .h1-accent{margin-block-start:-12px!important;margin-block-end:0!important} @media (max-width:600px){ .h1,.h1-strong{font-size:44px!important;line-height:.95!important} .h1-accent{font-size:44px!important;line-height:.95!important} .hero-rule{width:52px!important;height:3px!important; margin-block:14px 0!important;border-radius:2px} .elementor-179 [class*=e-con]:has(> img.hr-hero-shot){margin-block-start:-16px!important} img.hr-hero-shot{margin-block-start:0!important} } @media (max-width:380px){ .h1,.h1-strong,.h1-accent{font-size:38px!important;line-height:.96!important} .hero-rule{width:46px!important;margin-block:12px 0!important} } /* HRHEROEND */ /* HRGRIDFIXSTART */ /* The mobile header grid could not shrink: the wordmark held its full width, pushing the row to 387px inside a 375px viewport. Let the columns shrink. */ @media (max-width:921px){ #ast-mobile-header .ast-builder-grid-row{ grid-template-columns:minmax(0,1fr) auto!important;column-gap:8px!important} #ast-mobile-header .ast-builder-grid-row > *{min-width:0!important} #ast-mobile-header .site-header-primary-section-left{min-width:0!important;overflow:hidden} #ast-mobile-header .site-header-primary-section-right{flex:0 0 auto!important} #ast-mobile-header .site-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } /* HRGRIDFIXEND */ /* HRSTARSTART */ /* Fully saturated gold so the review stars carry off the page. */ .star,.stars .star,.stars > *{ color:#ffc400!important; filter:saturate(1.35) contrast(1.05); text-shadow:0 0 10px rgba(255,196,0,.42),0 1px 0 rgba(120,72,0,.30)} /* HRSTAREND */ /* HRCTAGLOWSTART */ /* Shorter header button, a little air before the toggle, and a soft glow pulse on load to draw the eye. */ @keyframes hr-cta-glow{ 0% {box-shadow:0 2px 0 #8f3605,0 0 0 0 rgba(232,163,61,.70)} 60% {box-shadow:0 2px 0 #8f3605,0 0 0 13px rgba(232,163,61,0)} 100%{box-shadow:0 2px 0 #8f3605,0 0 0 0 rgba(232,163,61,0)} } .hr-mobile-cta{ min-height:34px!important;padding:7px 15px!important; margin-inline-end:10px!important;line-height:1.15!important} .main-header-menu > li.hr-nav-cta > a.menu-link, .ast-nav-menu > li.hr-nav-cta > a.menu-link{ padding-block:7px!important;min-height:34px!important;line-height:1.15!important} @media (prefers-reduced-motion: no-preference){ .hr-mobile-cta, .main-header-menu > li.hr-nav-cta > a.menu-link{ animation:hr-cta-glow 2.1s ease-out .7s 3 both} } /* HRCTAGLOWEND */ /* HRFOOTMOBSTART */ /* Legal now sits as its own column beside Pages, so it stacks like Pages. */ .ft-legal-col .ft-legal,.ft-legal-stack{ display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important; align-items:flex-start!important;gap:2px!important} .ft-legal-col .ft-legal-link{width:auto!important;flex:0 0 auto!important; margin:0!important;padding:3px 0!important;text-align:start!important} /* Keep the wordmark whole and clear of the button. */ @media (max-width:400px){ .hr-mobile-cta{padding:7px 12px!important;font-size:12px!important; margin-inline-start:10px!important} /* the name fit its box to the exact pixel, so overflow:hidden shaved the last glyph. 16px leaves real slack. */ #ast-mobile-header .site-title{font-size:16px!important;padding-inline-end:0!important; overflow:visible!important} } /* HRFOOTMOBEND */ /* HRBREATHESTART */ /* Slow breathing ring around the 1-2-3 step numbers. Runs on a pseudo element so the existing scroll-in pop on .easy-num is untouched. */ @keyframes hr-breathe{ 0%,100%{transform:scale(1);opacity:.55} 50% {transform:scale(1.14);opacity:.12} } @keyframes hr-breathe-core{ 0%,100%{transform:scale(1)} 50% {transform:scale(1.035)} } .easy-num,.pg-num{position:relative} .easy-num::after,.pg-num::after{ content:"";position:absolute;inset:-7px;border-radius:50%; border:2px solid rgba(232,163,61,.60);pointer-events:none; transform-origin:50% 50%} @media (prefers-reduced-motion: no-preference){ .easy-num::after,.pg-num::after{animation:hr-breathe 3.2s ease-in-out infinite} .easy-step:nth-child(2) .easy-num::after, .pg-step:nth-child(2) .pg-num::after{animation-delay:.5s} .easy-step:nth-child(3) .easy-num::after, .pg-step:nth-child(3) .pg-num::after{animation-delay:1s} .easy-step:nth-child(4) .easy-num::after, .pg-step:nth-child(4) .pg-num::after{animation-delay:1.5s} } /* HRBREATHEEND */ /* HRCARDGLOWSTART */ /* Outer shadow glow rather than a painted layer behind the card, so nothing bleeds inside. Two tiers: the offer cards carry a strong pulse, the content cards a quiet one, staggered so they do not throb in unison. */ @keyframes hr-glow-strong{ 0%,100%{box-shadow:0 14px 34px -20px rgba(0,0,0,.55),0 0 16px -2px rgba(232,163,61,.20)} 50% {box-shadow:0 14px 34px -20px rgba(0,0,0,.55),0 0 46px 6px rgba(232,163,61,.58)} } @keyframes hr-glow-soft{ 0%,100%{box-shadow:0 10px 26px -18px rgba(0,0,0,.45),0 0 10px -3px rgba(232,163,61,.12)} 50% {box-shadow:0 10px 26px -18px rgba(0,0,0,.45),0 0 26px 2px rgba(232,163,61,.34)} } /* the old inner layer is gone */ .hr-glow::before{content:none!important} .hr-glow{position:relative;isolation:auto} @media (prefers-reduced-motion: no-preference){ .hr-glow{animation:hr-glow-strong 3.6s ease-in-out infinite} .membership-card.hr-glow{animation-delay:.8s} .card,.card-service,.gold-rim-card:not(.hr-glow),.qs-plan,.mb-item{ animation:hr-glow-soft 4.4s ease-in-out infinite} .card:nth-child(2),.card-service:nth-child(2),.gold-rim-card:nth-child(2){animation-delay:.9s} .card:nth-child(3),.card-service:nth-child(3),.gold-rim-card:nth-child(3){animation-delay:1.8s} .card:nth-child(4),.card-service:nth-child(4),.gold-rim-card:nth-child(4){animation-delay:2.7s} } /* HRCARDGLOWEND */ /* HRFTCOLSTART */ @media (max-width:768px){ .ft-outer > *:first-child{display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; column-gap:12px!important;row-gap:22px!important;align-items:start!important} .ft-outer > *:first-child > *{min-width:0!important;width:auto!important} .ft-outer > *:first-child > *:first-child{grid-column:1 / -1!important} .ft-outer > *:first-child > *:not(:first-child) p, .ft-outer > *:first-child > *:not(:first-child) span{ font-size:12.5px!important;line-height:1.45!important;overflow-wrap:anywhere} .ft-legal-col .ft-legal,.ft-legal-stack{gap:1px!important} } @media (max-width:400px){ .ft-outer > *:first-child{column-gap:8px!important} .ft-outer > *:first-child > *:not(:first-child) p, .ft-outer > *:first-child > *:not(:first-child) span{font-size:11.5px!important} } /* HRFTCOLEND */ /* HRTOTALLIFTSTART */ /* The pinned total sat flush on the very bottom edge, which reads as cut off on phones. Lift it clear and give it a floating bar treatment. */ [id^=elementor-popup-modal-] .hr-total-row{ inset-block-end:18px!important; padding:10px 14px!important;border-radius:12px!important; border:1px solid rgba(14,38,25,.14)!important; box-shadow:0 8px 20px -10px rgba(14,38,25,.45)!important} @media (max-width:600px){ [id^=elementor-popup-modal-] .hr-total-row{inset-block-end:22px!important} } /* HRTOTALLIFTEND */ /* HRADDONFILLSTART */ /* Longhand background-color, stated last, so the checked fill actually wins. */ .hr-addon.hr-addon-on::before{background-color:#e8a33d!important; border-color:#0e2619!important} /* HRADDONFILLEND */ /* HRWASSTART */ /* The was-prices were struck through, but at 13.7px with auto thickness in a low contrast colour the line was near invisible. Make it read clearly. */ .promo-was,.price-was,.qs-plan-was{ text-decoration-line:line-through!important; text-decoration-thickness:2px!important; text-decoration-color:currentColor!important; text-decoration-skip-ink:none!important; font-size:15px!important;opacity:1!important} /* HRWASEND */ /* HRBTNGLOWSTART */ /* Same pulse as the header Buy button, on the two in-page bundle CTAs. */ @keyframes hr-btn-pulse{ 0% {box-shadow:0 2px 0 #8f3605,0 0 0 0 rgba(232,163,61,.70)} 60% {box-shadow:0 2px 0 #8f3605,0 0 0 14px rgba(232,163,61,0)} 100%{box-shadow:0 2px 0 #8f3605,0 0 0 0 rgba(232,163,61,0)} } @media (prefers-reduced-motion: no-preference){ .hr-btn-glow{animation:hr-btn-pulse 2.1s ease-out infinite} } /* HRBTNGLOWEND */ /* HRTICKSTART */ /* Membership popup: stagger the benefit list in so it reads as a list of wins. */ @keyframes hr-tick-in{ 0% {opacity:0;transform:translateX(-10px)} 100%{opacity:1;transform:none} } @keyframes hr-tick-pop2{ 0% {transform:scale(.4);opacity:0} 70% {transform:scale(1.25);opacity:1} 100%{transform:scale(1);opacity:1} } @media (prefers-reduced-motion: no-preference){ .elementor-popup-modal .hr-tick-row{animation:hr-tick-in .42s ease-out both} .elementor-popup-modal .hr-tick-row > *:first-child{ animation:hr-tick-pop2 .42s cubic-bezier(.34,1.56,.64,1) both; color:#e8a33d!important;font-weight:800} .elementor-popup-modal .hr-tick-row:nth-child(1){animation-delay:.10s} .elementor-popup-modal .hr-tick-row:nth-child(1) > *:first-child{animation-delay:.16s} .elementor-popup-modal .hr-tick-row:nth-child(2){animation-delay:.17s} .elementor-popup-modal .hr-tick-row:nth-child(2) > *:first-child{animation-delay:.23s} .elementor-popup-modal .hr-tick-row:nth-child(3){animation-delay:.24s} .elementor-popup-modal .hr-tick-row:nth-child(3) > *:first-child{animation-delay:.30s} .elementor-popup-modal .hr-tick-row:nth-child(4){animation-delay:.31s} .elementor-popup-modal .hr-tick-row:nth-child(4) > *:first-child{animation-delay:.37s} .elementor-popup-modal .hr-tick-row:nth-child(5){animation-delay:.38s} .elementor-popup-modal .hr-tick-row:nth-child(5) > *:first-child{animation-delay:.44s} .elementor-popup-modal .hr-tick-row:nth-child(6){animation-delay:.45s} .elementor-popup-modal .hr-tick-row:nth-child(6) > *:first-child{animation-delay:.51s} .elementor-popup-modal .hr-tick-row:nth-child(7){animation-delay:.52s} .elementor-popup-modal .hr-tick-row:nth-child(7) > *:first-child{animation-delay:.58s} .elementor-popup-modal .hr-tick-row:nth-child(8){animation-delay:.59s} .elementor-popup-modal .hr-tick-row:nth-child(8) > *:first-child{animation-delay:.65s} .elementor-popup-modal .hr-tick-row:nth-child(9){animation-delay:.66s} .elementor-popup-modal .hr-tick-row:nth-child(9) > *:first-child{animation-delay:.72s} } /* HRTICKEND */ /* HRFLSTART */ /* Food list: make it obvious the category tabs are clickable. Tabs render as