/*
 * Child-theme stylesheet (generatepress-child/style.css), now served from the
 * plugin — the theme copy is intentionally empty. Enqueued by theme_css.php on
 * every front-end page at the same cascade position the theme file had
 * (after the GeneratePress parent/child styles). Content is byte-faithful to
 * the original except two verified syntax fixes (documented in git history).
 */
@font-face {
  font-family: 'Rethink Sans';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('/wp-content/uploads/static/fonts/RethincSans/RethinkSans-Italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
  font-family: 'Rethink Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/wp-content/uploads/static/fonts/RethincSans/RethinkSans-Normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

* {
  transition: .2s cubic-bezier(.25,.55,.25,1);
  -webkit-transition: .2s cubic-bezier(.25,.55,.25,1)
}

#services-template section,
.inside-article {
  background: #fff;
  border-radius: 30px;
  padding: 3rem;
  margin-bottom: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #fff;
  transition: .15s;
  -webkit-transition: .15s
}

.inside-article:first-child {
  width: 100%;
  float: right;
  border: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .08) !important;
}

.inside-article:first-child .summary.entry-summary {
  width: 100%
}

.separate-containers .inside-article {
  box-shadow: none;
}

#services-template section {
  margin-top: 4rem;
  margin-bottom: 4rem
}

.product nav.woocommerce-breadcrumb {
  display: none
}

body,
button,
input,
select,
textarea {
  font-family: Rethink Sans, Arial, Helvetica, sans-serif
}

h1 {
  font-size: 2.2rem;
  line-height: 2.2rem;
  font-weight: 550
}

.entry-title {
  margin-bottom: 20px
}

.site-header {
  background-color: transparent;
  border: none;
  outline: none;
  outline-offset: 0;
  position: fixed;
  width: 1300px;
  z-index: 1000;
  border-radius: 0;
  margin: 0;
  margin-left: calc((100% - 1300px)/2);
  margin-top: 10px;
  border-radius: 18px;
  /* NO overflow:hidden here: the header's own paint (background,
     backdrop-filter, box-shadow) is already clipped by border-radius, and an
     overflow clip on .site-header would clip the Services popover
     (.pmega-services-item > .pmega), which is absolutely positioned from a
     nav <li> inside this header. */
  transition: background-color .3s ease,
    backdrop-filter .3s ease,
    -webkit-backdrop-filter .3s ease,
    box-shadow .3s ease;
}

.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, .8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .03);
}

.main-navigation,
.main-navigation ul ul,
div#primary-menu {
  background-color: transparent
}

.site-header .inside-header {
  flex-wrap: wrap
}

.inside-header {
  padding: 10px 0;
  transition: .15s;
  -webkit-transition: .15s
}

.main-title a,
.main-title a:hover {
  background: var(--contrast);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

section.hero {
  padding: 98px 0 0 0
}

.hero__inner.container {
  padding: 3.8rem 3.8rem 2.35rem 3.8rem
}

.special_info {
  display: flex;
  align-items: center;
  justify-content: center;
  clear: both
}

.special_info div {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff6e40;
  background: #ffe8de;
  padding: 3px 13px 3px 8px;
  font-weight: 650;
  border-radius: 30px;
  font-size: 1.4rem
}

.special_info div img {
  height: 2.5rem;
  width: 2.5rem;
  margin-top: -11px
}

.special_info div span#promo-countdown {
  color: #dd2c00;
  padding-left: 7px
}

.special_info div::before {
  display: flex;
  content: "SALE!";
  position: absolute;
  font-size: 0.84rem;
  background: linear-gradient(to right, #f80031, #ff6e40);
  color: white;
  padding: 0.05rem 0.54rem;
  border-radius: 100px;
  margin-top: -45px;
  margin-right: -100px;
  transform: rotate(8deg);
  font-weight: 800;
}

body.home,
body.page.page-id-1000728,
body.page.page-id-1001289,
body.page.page-id-1001559,
body.single-product {
  background: linear-gradient(to bottom, transparent 0%, var(--base-2) 10%), url("/wp-content/uploads/2025/05/mountains-scaled.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 0;
}

.special_p {
  text-align: center;
  font-size: 1.25rem;
  line-height: 2rem;
  font-weight: 420;
  padding-left: 0;
  padding-right: 0;
  width: 77%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
}

p.special_p span {
  color: #58A85E
}

h1.product_title.entry-title {
  display: block;
  margin: auto;
  font-weight: 900;
  max-width: 1000px;
  text-align: center;
  font-size: 4.125rem;
  line-height: 4.75rem;
  text-transform: uppercase;
  padding: 1.25rem 0 1.5rem 0
}

#services-template section h2 span,
h1.product_title.entry-title span,
span.text-color {
  background: linear-gradient(to right, #f80031, #ff6e40);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.separate-containers .site-main,
.single-product .separate-containers .site-main {
  margin-top: 0
}

form.variations_form.cart tr {
  display: grid
}

h2 {
  font-size: 1.5rem
}

h3 {
  font-size: 1.25rem
}

h4 {
  font-size: 1.15rem
}

h5 {
  font-size: 1.1rem
}

.home .grid-container,
.single-product .grid-container {
  max-width: none
}

.home .inside-header.grid-container,
.single-product .inside-header.grid-container {
  max-width: 1300px
}

#services-template div.inside-article,
#services-template section,
.single-product div.inside-article,
.single-product section {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  float: none
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button,
a.button.buy-now-button,
section#reviews input#submit,
.pmega-services-item>.pmega-trigger {
  font-size: 1.075rem;
  color: var(--contrast);
  border-radius: .75rem;
  background: 0 0;
  border-width: 1.5px;
  border-style: solid;
  border-color: var(--contrast);
  font-weight: 500;
  transition: .15s;
  -webkit-transition: .15s
}

.pmega-services-item>.pmega-trigger {
  color: var(--contrast) !important;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)):hover #respond input#submit:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:hover,
a.button.buy-now-button:hover,
section#reviews input#submit:hover {
  color: #fff;
  background: var(--contrast)
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)):hover #respond input#submit,
section#reviews input#submit {
  font-size: 1.075rem !important;
  color: var(--contrast) !important;
  border-radius: .75rem !important;
  background: 0 0 !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  border-color: var(--contrast) !important;
  font-weight: 500 !important
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)):hover #respond input#submit:hover,
section#reviews input#submit:hover {
  color: #fff !important;
  background: var(--contrast) !important
}

.woocommerce-order a.button.buy-now-button,
body .hero a.button.buy-now-button {
  display: block;
  width: 200px;
  text-align: center;
  position: relative;
  margin: auto
}

.woocommerce div.product form.cart .button {
  border: none
}

a.button.buy-now-button:hover,
a.button.buy-now-button:active,
.pmega-services-item>.pmega-trigger:hover,
.pmega-services-item>.pmega-trigger:focus,
.pmega-services-item>.pmega-trigger:active {
  color: #fff !important;
  background: #f80031 !important;
  background-color: #f80031 !important;
  border-color: #f80031 !important;
}

/* Kept in its OWN rule: an unsupported :has() in a comma list invalidates the
   whole rule (Firefox ESR ≤115 / Safari <15.4), which was silently killing the
   hover/focus states grouped above. Never merge :has() selectors into lists
   that carry critical base styling. */
body:not(.page-id-81):has(.generate-back-to-top__show) header a.button.buy-now-button {
  color: #fff !important;
  background: #f80031 !important;
  background-color: #f80031 !important;
  border-color: #f80031 !important;
}

body:has(.generate-back-to-top__show) a.button.buy-now-button:hover {
  opacity: .8
}

.nav-float-right #site-navigation {
  font-weight: 450;
  font-size: 1.03rem
}

.variation-blocks-container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 55%;
  float: left;
  margin-top: -150px
}

.woocommerce-page div.product div.summary {
  width: 43% !important
}

.variation-block {
  background: #fff;
  border-radius: 25px;
  padding: 0;
  width: 100%;
  cursor: pointer;
  transition: .15s;
  -webkit-transition: .15s;
  position: relative;
  z-index: 100
}

.variation-block.selected {
  z-index: 101
}

.variation-block .inside-vb p {
  margin-bottom: 1rem
}

.variation-header {
  padding: 20px;
  padding-left: 17px !important;
  padding-right: 17px !important;
  font-size: 1.3rem;
  line-height: 1.9rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  border-radius: 25px 25px 0 0;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-top: transparent;
  border-left: transparent;
  border-right: transparent
}

.selected .variation-header {
  border-width: 1px
}

.variation-header span {
  display: flex;
  font-size: 1.1rem;
  font-weight: 500;
  position: absolute;
  border-radius: 50px;
  background: linear-gradient(to right, #f80031, #ff6e40);
  padding: 0 10px;
  margin-top: -40px;
  right: 17px;
  box-shadow: 0 4px 8px 0 rgba(255, 68, 54, .33)
}

.variation-block:hover {
  opacity: .9
}

.variation-block.selected:hover {
  opacity: 1
}

.variation-block:hover .inside-vb {
  border-color: #d1d1d1;
  border-top: none
}

.variation-block .inside-vb,
.variation-price .variation-info-field {
  font-size: .8rem;
  font-weight: 500
}

.variation-info-field {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 100%;
  font-size: .9rem;
  color: var(--contrast)
}

.variation-price .variation-info-field {
  justify-content: space-between;
  align-items: center
}

.variation-block .inside-vb p.variation-price {
  margin-bottom: 0
}

p.variation-quality {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem !important;
  border-bottom: 1px solid #eaeaea
}

.variation-quality .variation-info-field:before {
  content: '\f007'
}

.variation-quality-desc .variation-info-field:before {
  content: '\f4fc'
}

.variation-quality-desc-1 .variation-info-field:before {
  content: '\f505'
}

.variation-description .variation-info-field:before {
  content: '\f521'
}

.variation-guarantee .variation-info-field:before {
  content: '\f118'
}

.variation-no-bots .variation-info-field:before {
  content: '\f3ed'
}

.variation-start-time .variation-info-field:before {
  content: '\f0e7'
}

.variation-speed .variation-info-field:before {
  content: '\f135'
}

.variation-support .variation-info-field:before {
  content: '\f590'
}

.variation-info-field:before {
  display: flex;
  width: 23px;
  height: 23px;
  align-self: start;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--base-2);
  content: '\f00c';
  font-family: fontawesome;
  margin-right: 7px;
  border-radius: 80px;
  font-size: .8rem
}

p.variation-quality .variation-info-field:before {
  font-size: 1.15rem !important;
  background: 0 0
}

.variation-price .variation-info-field:before {
  display: none;
  content: '';
  margin-right: 0
}

.variation-block .inside-vb {
  display: block;
  padding: 17px;
  margin-top: -10px;
  background: #fff;
  margin-bottom: 10px;
  border-radius: 0 0 25px 25px;
  border-width: 1px;
  border-style: solid;
  border-color: #f7f8f9;
  border-top: none;
  transition: .15s;
  -webkit-transition: .15s
}

.variation-block.selected .inside-vb {
  box-shadow: 0 10px 20px 5px rgba(0, 0, 0, .05)
}

.variation-block .variation-header:before {
  font-family: FontAwesome;
  float: right;
  position: absolute;
  font-size: 2.78rem;
  line-height: 4rem;
  content: '';
  right: 17px;
  opacity: .5
}

.variation-block.selected .variation-header:before {
  opacity: 1
}

.variation-block[data-attribute-value="High Quality"] .variation-header {
  padding-top: 20px;
  margin-top: 0
}

.variation-block[data-attribute-value="High Quality"] .variation-header:before {
  content: '\f005'
}

.variation-block[data-attribute-value="Real Active"] .variation-header {
  padding: 22px;
  margin-top: -4px
}

.variation-block[data-attribute-value="Real Active"] .variation-header:before {
  content: '\f06d'
}

.variation-block[data-attribute-value="Targeted VIP"] .variation-header {
  padding: 24px;
  margin-top: -8px
}

.variation-block[data-attribute-value="Targeted VIP"] .variation-header:before {
  content: '\f521'
}

.variation-price .variation-info-field:after {
  display: flex;
  justify-content: center;
  align-items: center;
  border-width: 1px;
  border-style: solid;
  border-color: #d1d1d1;
  content: '';
  font-family: FontAwesome;
  font-size: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  color: #fff
}

.selected .variation-price .variation-info-field:after {
  content: '\f00c'
}

.c_d1d1d1.selected .inside-vb,
.c_d1d1d1.selected .variation-header,
.c_d1d1d1.selected .variation-price .variation-info-field:after {
  border-color: #d1d1d1
}

.inside-article:has(.c_d1d1d1.selected) button.single_add_to_cart_button {
  background: #d1d1d1 !important
}

.c_d1d1d1.selected .variation-price .variation-info-field:after {
  background: #d1d1d1
}

.c_616161.selected .inside-vb,
.c_616161.selected .variation-header,
.c_616161.selected .variation-price .variation-info-field:after {
  border-color: #f80031
}

.c_616161 .variation-info-field:before {
  color: #f80031
}

.c_616161.selected .variation-header {
  border-bottom-color: #616161
}

.c_616161.selected .variation-price .variation-info-field:after {
  background: #f80031
}

.inside-article button.single_add_to_cart_button.button.alt,
a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained,
button#place_order,
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained {
  background: linear-gradient(130deg, #f80031 0, #ff6e40 100%) !important
}

/* Own rule on purpose: this is the ONLY source of the brand gradient for the
   Add-to-cart / Place-order CTAs above — an unsupported :has() in their comma
   list dropped the whole rule on Firefox ESR ≤115 / Safari <15.4, leaving
   white-on-transparent (invisible) primary CTAs. */
.inside-article:has(.c_616161.selected) button.single_add_to_cart_button {
  background: linear-gradient(130deg, #f80031 0, #ff6e40 100%) !important
}

.c_FF6E40.selected .inside-vb,
.c_FF6E40.selected .variation-header,
.c_FF6E40.selected .variation-price .variation-info-field:after {
  border-color: #ff6e40
}

.c_FF6E40 .variation-info-field:before {
  color: #ff6e40
}

.inside-article:has(.c_FF6E40.selected) button.single_add_to_cart_button {
  background: linear-gradient(130deg, #ff6e40 0, #ff8f47 100%) !important
}

.c_FF6E40.selected .variation-price .variation-info-field:after {
  background: #ff6e40
}

.c_f80031.selected .inside-vb,
.c_f80031.selected .variation-header,
.c_f80031.selected .variation-price .variation-info-field:after {
  border-color: #f80031
}

.c_f80031 .variation-info-field:before {
  color: #f80031
}

.inside-article:has(.c_f80031.selected) button.single_add_to_cart_button {
  background: #f80031 !important
}

.c_f80031.selected .variation-price .variation-info-field:after {
  background: #f80031
}

.c_0a0a0c.selected .inside-vb,
.c_0a0a0c.selected .variation-header,
.c_0a0a0c.selected .variation-price .variation-info-field:after {
  border-color: #0a0a0c
}

.c_0a0a0c .variation-info-field:before {
  color: #0a0a0c
}

.inside-article:has(.c_0a0a0c.selected) button.single_add_to_cart_button {}

.c_0a0a0c.selected .variation-price .variation-info-field:after {
  background: #0a0a0c
}

.product p.price,
.woocommerce-variation-price,
form.variations_form table.variations {
  display: none
}

a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained,
button#place_order,
button.single_add_to_cart_button,
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained {
  transition: .15s;
  -webkit-transition: .15s
}

a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:active,
a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:hover,
button#place_order:active,
button#place_order:hover,
button.single_add_to_cart_button:active,
button.single_add_to_cart_button:hover,
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained:active,
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained:hover {
  opacity: .9
}

a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained,
button#place_order,
button.single_add_to_cart_button.button.alt,
button.single_add_to_cart_button.button.alt:disabled,
button.single_add_to_cart_button.button.alt[name=buy_now],
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained {
  display: block;
  width: 100%;
  border-radius: 20px;
  padding: 1rem;
  margin-top: 1rem;
  font-size: 1.4rem;
  line-height: 1.75rem;
  font-weight: 900;
  text-decoration: none;
  padding: 1.3rem
}

button.single_add_to_cart_button.button.alt[name=buy_now] {
  width: calc(100% - 70px);
  margin-left: 0;
  float: left !important
}

.site-header .main-navigation a {
  align-items: center;
  display: flex;
  justify-content: center;
  font-weight: 400
}

.gp-cart-menu-link {
  position: relative
}

.gp-cart-menu-link .gp-cart-count {
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  margin-left: 7px;
  border-radius: 999px;
  background: #f80031;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center
}

.main-navigation:not(.toggled) #gp-burger-cart-dot.gp-burger-dot[data-count] {
  display: block
}

.gp-cart-menu-link .gp-cart-count[data-count=""],
.gp-cart-menu-link .gp-cart-count[data-count="0"],
.main-navigation:not(.toggled) #gp-burger-cart-dot.gp-burger-dot[data-count=""],
.main-navigation:not(.toggled) #gp-burger-cart-dot.gp-burger-dot[data-count="0"] {
  display: none
}

.menu-toggle {
  position: relative
}

.main-navigation #gp-burger-cart-dot.gp-burger-dot {
  position: absolute;
  top: 8px;
  right: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e02424;
  display: none
}

a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained,
button#place_order,
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.4rem;
  border: none !important;
  font-weight: 900
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  float: none !important;
}

.wc-block-cart__submit a {
  color: #fff
}

.wc-block-components-checkout-return-to-cart-button {
  display: none
}

.site-branding-container .site-logo {
  margin-right: .8rem
}

.woocommerce-error,
.woocommerce-error:active,
.woocommerce-info,
.woocommerce-info:active,
.woocommerce-message,
.woocommerce-message:active {
  background-color: rgba(255, 255, 255, .8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .03);
  border: none;
  outline: none;
  outline-offset: 0;
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  position: fixed;
  gap: .387rem;
  z-index: 1001;
  border-radius: 1.25rem;
  margin: 0 !important;
  bottom: 1rem;
  right: 7rem;
  overflow: hidden;
  padding-right: 2.95rem;
  padding-left: 3.4rem;
  padding-top: 1rem;
  padding-bottom: 0.8rem
}

.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
  font-size: 1.33rem;
  left: 1.5rem;
  top: inherit
}

.woocommerce-error,
.woocommerce-error:active,
.woocommerce-info,
.woocommerce-info:active,
.woocommerce-message,
.woocommerce-message:active {
  bottom: 2rem;
  right: 1.5rem;
  max-width: calc(100% - 3rem)
}
/* Content-aware bottom offset: sit near the viewport edge by default, but lift
   the toast ABOVE the floating cart bar whenever it is showing (non-empty cart)
   so it never overlaps the bar. The bar's JS publishes its measured height as
   --acc-fcart-h (a static 84px sat under the real 88–130px bar); the 132px
   fallback clears the tallest bar before/without JS. body.acc-fcart-on is the
   JS-toggled fallback for :has()-less engines — kept as SEPARATE rules, since
   an unsupported :has() in a shared comma list would invalidate both. */
body:has(.acc-fcart__inner:not(.is-empty)) .woocommerce-error,
body:has(.acc-fcart__inner:not(.is-empty)) .woocommerce-info,
body:has(.acc-fcart__inner:not(.is-empty)) .woocommerce-message {
  bottom: calc(var(--acc-fcart-h, 132px) + 12px + env(safe-area-inset-bottom, 0px));
}
body.acc-fcart-on .woocommerce-error,
body.acc-fcart-on .woocommerce-info,
body.acc-fcart-on .woocommerce-message {
  bottom: calc(var(--acc-fcart-h, 132px) + 12px + env(safe-area-inset-bottom, 0px));
}
/* On the one-page checkout the fixed place-order bar owns the bottom edge — keep
   toasts clear of it. */
body.gpco .woocommerce-error,
body.gpco .woocommerce-info,
body.gpco .woocommerce-message {
  bottom: 6.5rem;
}

/* ---------------------------------------------------------------------------
 * Notice STACK. Each notice above is individually position:fixed at the same
 * bottom-right spot, so a SECOND notice lands on top of the first and covers it.
 * Fix: make the notice CONTAINER the fixed bottom-right column and let notices
 * flow inside it — so repeated notices stack upward with a gap (never covering
 * each other), and ONE bottom offset keeps the whole stack clear of the fixed
 * cart bar / place-order bar. A stray notice OUTSIDE a container keeps the
 * per-notice fixed fallback above.
 * ------------------------------------------------------------------------- */
/* ONLY the .woocommerce-notices-wrapper (accNotify's toast target) becomes the fixed
   bottom stack. Making .woocommerce-NoticeGroup a SECOND fixed stack at the same
   corner would let the two overlap on checkout (e.g. a wrapper toast + a checkout
   validation group both showing) — reintroducing the very cover-up this fixes. The
   NoticeGroup stays in normal flow; its child notices are only reset to STATIC so the
   theme's per-notice `position:fixed` fallback can't fix+overlap them either. */
.woocommerce-notices-wrapper {
  position: fixed;
  right: 1.5rem;
  bottom: 2rem;
  z-index: 1001;
  margin: 0;
  display: flex;
  flex-direction: column-reverse; /* newest (prepended = first child) sits nearest the bars */
  gap: .6rem;
  max-width: calc(100% - 3rem);
  pointer-events: none; /* clicks pass through the empty gaps between notices */
}
.woocommerce-notices-wrapper > * { pointer-events: auto; }
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-NoticeGroup .woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-info,
.woocommerce-NoticeGroup .woocommerce-message {
  position: static !important;
  right: auto; left: auto; bottom: auto;
  margin: 0 !important;
  max-width: 100%;
}
/* Lift the whole stack above the fixed bars when present (offset on the CONTAINER
   now, since the notices inside it are static). Measured bar height via
   --acc-fcart-h; separate non-:has() fallback rule — see the note above. */
body:has(.acc-fcart__inner:not(.is-empty)) .woocommerce-notices-wrapper {
  bottom: calc(var(--acc-fcart-h, 132px) + 12px + env(safe-area-inset-bottom, 0px));
}
body.acc-fcart-on .woocommerce-notices-wrapper {
  bottom: calc(var(--acc-fcart-h, 132px) + 12px + env(safe-area-inset-bottom, 0px));
}
body.gpco .woocommerce-notices-wrapper {
  bottom: 6.5rem;
}

/* Mobile: toasts span the full page width with a 15px gutter each side, and sit
   a clean 15px above whichever fixed bottom bar (floating cart bar / one-page
   place-order bar) owns the bottom edge — matching the 15px rhythm used
   elsewhere. The gpco offset reuses the bar's live --gpco-bar-h var so the gap
   stays exact regardless of the bar's rendered height. Applies to the toast
   CONTAINER and to the per-notice fixed fallback (a stray notice with no
   wrapper). */
@media (max-width: 768px) {
  .woocommerce-notices-wrapper {
    left: 15px;
    right: 15px;
    width: auto;
    max-width: none;
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  }
  body:has(.acc-fcart__inner:not(.is-empty)) .woocommerce-notices-wrapper {
    bottom: calc(var(--acc-fcart-h, 132px) + 15px + env(safe-area-inset-bottom, 0px));
  }
  body.acc-fcart-on .woocommerce-notices-wrapper {
    bottom: calc(var(--acc-fcart-h, 132px) + 15px + env(safe-area-inset-bottom, 0px));
  }
  body.gpco .woocommerce-notices-wrapper {
    bottom: calc(var(--gpco-bar-h, 120px) + 15px + env(safe-area-inset-bottom, 0px));
  }
  .woocommerce-error,
  .woocommerce-error:active,
  .woocommerce-info,
  .woocommerce-info:active,
  .woocommerce-message,
  .woocommerce-message:active {
    left: 15px;
    right: 15px;
    width: auto;
    max-width: none;
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  }
  body:has(.acc-fcart__inner:not(.is-empty)) .woocommerce-error,
  body:has(.acc-fcart__inner:not(.is-empty)) .woocommerce-info,
  body:has(.acc-fcart__inner:not(.is-empty)) .woocommerce-message {
    bottom: calc(var(--acc-fcart-h, 132px) + 15px + env(safe-area-inset-bottom, 0px));
  }
  body.acc-fcart-on .woocommerce-error,
  body.acc-fcart-on .woocommerce-info,
  body.acc-fcart-on .woocommerce-message {
    bottom: calc(var(--acc-fcart-h, 132px) + 15px + env(safe-area-inset-bottom, 0px));
  }
  body.gpco .woocommerce-error,
  body.gpco .woocommerce-info,
  body.gpco .woocommerce-message {
    bottom: calc(var(--gpco-bar-h, 120px) + 15px + env(safe-area-inset-bottom, 0px));
  }
}

/* iOS Safari auto-zooms into any form control whose font-size is < 16px the
   moment it gains focus (e.g. tapping the quantity / search / variation inputs
   on the service-category and /services pages, or a checkout field). 16px is the
   exact threshold, so pinning focusable controls to 16px on phones is the
   minimal change that removes that jarring zoom without touching desktop. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input:not([type]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Notice readability fix: the toast above sets a near-white background but no
   text colour and no left padding for the WC icon, so error text could render
   invisibly (inherited light colour / icon overlapping the text). Give each
   type an explicit, high-contrast colour + a tinted panel + room for the icon,
   and force the inner list/links to inherit it.
   Scoped :not(.acc-notice): header.js upgrades notices into .acc-notice cards
   whose design is NEUTRAL ink with a coloured rule/icon — these legacy
   !important tints were overriding that on every enhanced notice, so they now
   apply only to the raw no-JS fallback markup. */
.woocommerce-error:not(.acc-notice),
.woocommerce-error:not(.acc-notice):active {
  color: #b4291b !important;
  background-color: rgba(253, 236, 234, .96) !important;
  padding-left: 3.4rem !important;
}
.woocommerce-message:not(.acc-notice),
.woocommerce-message:not(.acc-notice):active {
  color: #1f7a46 !important;
  background-color: rgba(234, 250, 239, .96) !important;
  padding-left: 3.4rem !important;
  padding-right: 2.95rem !important;
}
.woocommerce-info:not(.acc-notice),
.woocommerce-info:not(.acc-notice):active {
  color: #0b5a9c !important;
  background-color: rgba(232, 242, 251, .96) !important;
  padding-left: 3.4rem !important;
}
/* List notices: header.js WRAPS the <ul> — the wrapper gets .acc-notice but the
   inner <ul> keeps its bare woocommerce-error class, so the fallback tints
   above still matched INSIDE the enhanced card (red text, tinted panel, 3.4rem
   indent nested in the white card). Same specificity + !important, later in
   source — neutralise them within any enhanced card. */
.acc-notice .woocommerce-error,
.acc-notice .woocommerce-message,
.acc-notice .woocommerce-info {
  color: inherit !important;
  background-color: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error a:not(.button),
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button) {
  color: inherit !important;
}

.wc-notice-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background-color: rgba(0, 0, 0, .1);
  width: 100%
}

.wc-notice-close {
  position: absolute;
  top: .5rem;
  right: .75rem;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--contrast) !important;
  background: 0 0 !important;
  border: none;
  padding: 0
}

.wc-notice-close:hover {
  opacity: .8;
  color: var(--contrast) !important;
  background: 0 0 !important
}

.woocommerce .woocommerce-error .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-message .button,
.woocommerce-page .woocommerce-error .button,
.woocommerce-page .woocommerce-info .button,
.woocommerce-page .woocommerce-message .button {
  margin-left: 1rem
}

.entry-content .alignwide,
body:not(.no-sidebar) .entry-content .alignfull {
  padding: 1.5rem 3rem
}

.entry-content:not(:first-child),
.entry-summary:not(:first-child),
.page-content:not(:first-child) {
  margin-top: .5rem
}

#services-template section h2 {
  font-size: 2.5rem;
  text-transform: uppercase;
  line-height: 2.5rem;
  font-weight: 850
}

#services-template section#benefits_1,
#services-template section#faq-grid,
#services-template section#how_we_compare {
  padding: 0;
  border: 0;
  background: 0 0
}

#services-template section#get_started,
#services-template section#services_desc {
  border: 0;
  background: 0 0
}

#services-template section#services_desc p.p_descrtiption {
  padding: 0
}

#services-template section#services_desc {
  padding-bottom: 0;
  margin-bottom: 2rem
}

#services-template section#why_matter {
  background: linear-gradient(to bottom, rgba(255, 110, 64, .07), transparent)
}

#services-template section#why_matter .left-i h2,
#services-template section#why_matter .left-i p,
#services-template section#why_matter .right-i h2,
#services-template section#why_matter .right-i p,
#services-template section#your_safety .left-i h2,
#services-template section#your_safety .left-i p,
#services-template section#your_safety .right-i h2,
#services-template section#your_safety .right-i p {
  text-transform: none;
  text-align: left
}

#services-template section#why_matter .left-i img,
#services-template section#your_safety .left-i img {
  float: left;
  margin-bottom: 1rem
}

#services-template section#why_matter .right-i img,
#services-template section#your_safety .right-i img {
  float: right;
  margin-bottom: 1rem
}

#services-template section#why_matter .ft-grid,
#services-template section#why_matter .left-i,
#services-template section#why_matter .right-i,
#services-template section#your_safety .left-i,
#services-template section#your_safety .right-i {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem
}

#services-template section#why_matter .left-i img,
#services-template section#why_matter .right-i img,
#services-template section#your_safety .left-i img,
#services-template section#your_safety .right-i img {
  width: 100%;
  max-height: none;
  max-width: 300px;
  border-radius: 75px
}

#services-template section#your_safety {
  background: linear-gradient(to bottom, rgba(124, 77, 255, .07), transparent)
}

#services-template section#benefits_2 {
  background: linear-gradient(to bottom, #fff8f1, transparent)
}

#services-template section div.ft-benefit h3 {
  font-size: 1.5rem;
  text-transform: none;
  font-weight: 700;
  clear: both
}

#services-template section div.ft-benefit p {
  margin-bottom: 0
}

.ft-container,
.inside-article {
  margin-top: 5rem;
  margin-bottom: 2rem
}

.left-i {
  display: block;
  width: 50%;
  float: left
}

.right-i {
  display: block;
  width: 50%;
  float: right
}

.left-i.size_30,
.right-i.size_30 {
  width: 30%
}

.left-i.size_70,
.right-i.size_70 {
  width: 70%
}

.left-i.size_65,
.right-i.size_65 {
  width: 65%
}

.size_65 {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  min-height: 375px
}

section#get_started .size_65 {
  min-height: auto
}

.left-i.float_l,
.right-i.float_l {
  float: left
}

.left-i.float_r,
.right-i.float_r {
  float: right
}

.right-i img {
  max-height: 300px;
  float: right
}

#how-it-works .right-i img {
  max-height: 490px;
  margin-top: -85px
}

ul.feature-list {
  counter-reset: section;
  margin: 0;
  clear: both
}

ul.feature-list li {
  list-style: none;
  padding-left: 4.25rem
}

.feature-list li:before {
  display: flex;
  justify-content: center;
  align-items: center;
  counter-increment: section 1;
  content: counter(section);
  position: absolute;
  margin-left: -4.25rem;
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
  font-weight: 480;
  line-height: 3rem;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  border-color: var(--contrast);
  border-image: initial
}

#benefits_1 h2,
#benefits_2 h2,
#benefits_2 p,
#faq-grid h2,
#faq-grid p,
#how_we_compare h2,
#reviews h2,
#services_desc h2,
#why_matter h2,
#why_matter p,
#your_safety h2,
#your_safety p {
  text-align: center
}

#services-template #benefits_1 h2.section_h2,
#services-template #how_we_compare h2.section_h2,
#services-template #services_desc h2.section_h2 {
  margin-bottom: 2.5rem
}

#services-template a.button.buy-now-button {
  padding: .618em 1em;
  font-size: 1.25rem;
  line-height: 1.75rem;
  border-radius: 1rem
}

#services-template {
  color: var(--contrast);
  font-size: 1.2rem;
  font-weight: 450;
  clear: both
}

#services-template h1,
#services-template h2,
#services-template h3,
#services-template h4 {
  font-weight: 599;
  margin-bottom: 1.5rem
}

#services-template h2,
#services-template section#howt-works ul li strong,
.ft-container ul li strong {
  font-size: 1.5rem;
  line-height: 2.125rem;
  font-weight: 650
}

#services-template section ul li p {
  margin-top: .55rem
}

#services-template p,
#services-template section ul li p,
.ft-container ul li p {
  font-size: 1.18rem;
  line-height: 1.85rem;
  font-weight: 420;
  margin-bottom: 2rem
}

#services-template #why_matter p.p_info,
#services-template #your_safety p.p_info {
  margin-top: 2.5rem
}

#services-template p.p_text {
  margin-bottom: 1.3rem
}

#services-template p.p_sub_text:before {
  font-family: FontAwesome;
  content: '\f058';
  color: #62b868;
  margin-right: .85rem;
  float: left;
  margin-bottom: 0
}

#services-template .ft-benefit .p_sub_text:before {
  margin-right: .55em
}

#services-template p.p_info.p_sub_text:before {
  margin-right: .55em;
  color: #f80031
}

#services-template p.p_sub_text {
  padding: 1.55rem;
  border-radius: 25px;
  background: #fff
}

#services-template .ft-benefit p.p_sub_text {
  background: linear-gradient(to top, transparent, #e2f5e3)
}

#services-template p.p_info.p_sub_text {
  background: linear-gradient(to top, transparent, #ffe4ea)
}

#services-template #how-it-works p,
#services-template #payments_descriptions p,
section#about ul p {
  margin: 0 0 2.5rem 0
}

#services-template #payments_descriptions p {
  margin: 2.5rem 0 2.5rem 0
}

#services-template img {
  max-width: 100%;
  display: block
}

#services-template .ft-benefit img {
  max-width: 87px;
  margin: auto;
  margin-bottom: 25px;
  float: none
}

#services-template #why_matter .ft-benefit img,
#services-template .service_desc .ft-benefit img {
  max-width: 100px
}

section.hero .special_flex .star-rating {
  font-size: 1.33rem;
  float: none;
  height: 1.33em;
  width: 7em;
  letter-spacing: .48rem;
  margin: 0 0 0 0
}

.special_flex {
  margin-bottom: 2.58rem
}

section#reviews {
  background: linear-gradient(to bottom, #e2f5e3, transparent)
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
  border: 0
}

.woocommerce #reviews .star-rating {
  float: left;
  clear: both;
  height: 1.33em;
  width: 7em;
  letter-spacing: .35em
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
  color: #767676;
  margin: .55em 0 .55em 0
}

.woocommerce #reviews #comments ol.commentlist li .comment-text div.description,
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
  float: left;
  clear: both
}

.stars-item,
.woocommerce .star-rating,
.woocommerce p.stars a:before {
  color: #62b868
}

.stars-item {
  padding-left: 5px;
  padding-right: 0
}

.woocommerce #reviews #comments ol.commentlist {
  float: right;
  width: 70%
}

.woocommerce #review_form #respond {
  width: 29.55%;
  float: left;
  background: #fff;
  padding: 1.55rem;
  border-radius: 25px
}

.ft-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 3rem
}

.ft-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.ft-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.ft-menu {
  display: flex;
  gap: 20px
}

.ft-menu a {
  font-size: .95rem
}

.ft-cta {
  margin-left: auto
}

.ft-btn {
  border-radius: 4px;
  text-decoration: none;
  font-size: .95rem;
  padding: 10px 20px;
  transition: background .3s
}

.ft-btn-primary {
  background: #0095f6;
  color: #fff
}

.ft-btn-primary:hover {
  background: #007ac1
}

.ft-btn-secondary {
  background: #f1f1f1;
  color: var(--contrast)
}

.ft-btn-secondary:hover {
  background: #d4d4d4
}

span.menu-bar-item.stars-item {
  display: flex;
  gap: 4px
}

#services-template p.p_descrtiption {
  padding: 0 0 2.5rem 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important
}

.ft-hero {
  padding: 100px 0;
  text-align: center
}

.ft-hero-light {
  background: #f9f9f9
}

.ft-grid {
  display: grid;
  gap: 2.5rem
}

.ft-services-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
}

.ft-service {
  text-align: center;
  padding: 20px;
  border: 1px solid #eaeaea;
  border-radius: 6px
}

.ft-pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
}

.ft-pricing-plan {
  text-align: center;
  padding: 20px;
  border: 1px solid #eaeaea;
  border-radius: 6px
}

.ft-pricing-plan.ft-featured {
  border-color: #0095f6
}

.ft-price {
  font-size: 2rem;
  margin: 15px 0
}

.ft-benefits-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
}

.ft-benefit {
  background: #fff;
  border-radius: 25px;
  padding: 1.5rem;
  text-align: center
}

#services-template .ft-container .ft-benefit p {
  margin-bottom: 0
}

.ft-footer {
  background: var(--contrast);
  color: #fff;
  padding: 3rem 0
}

.ft-footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: space-between
}

.ft-footer-nav ul {
  list-style: none;
  padding: 0
}

.ft-footer-nav li {
  margin-bottom: 8px
}

.ft-footer-nav a {
  color: #fff;
  font-size: .9rem
}

.ft-footer-contact a,
.ft-footer-contact p {
  color: #fff;
  margin-bottom: 10px;
  font-size: .9rem
}

.ft-social a {
  color: #fff;
  margin: 0 5px
}

#services-template .service_desc.followers_desc {
  background: linear-gradient(to bottom, #ffe4ea, white);
  border: 1px solid #ffe4ea
}

#services-template .service_desc.likes_desc {
  background: linear-gradient(to bottom, rgba(255, 110, 64, .07), white);
  border: 1px solid rgba(255, 110, 64, .05)
}

#services-template .service_desc.views_desc {
  background: linear-gradient(to bottom, rgba(124, 77, 255, .07), white);
  border: 1px solid rgba(124, 77, 255, .05)
}

#services-template .service_desc .ft-benefit {
  background: rgba(255, 255, 255, 0.8);
  border: 0
}

#services-template section.service_desc {
  border: none
}

.service_desc ul {
  list-style: none;
  margin-left: 0
}

.service_desc ul li {
  padding: .33rem 0
}

.service_desc ul li i {
  color: #f80031
}

.service_desc ul li i {
  margin-right: 10px
}

.service_desc .left-i,
.service_desc .right-i {
  width: 47.3%
}

.service_desc h2 {
  margin-top: 1.8rem
}

.service_desc .rating-stars {
  background: #fff;
  border-radius: 30px;
  padding: 4px 10px;
  font-size: .88rem;
  color: var(--contrast-2);
  width: auto;
  border: 1px solid #eee;
}

.service_desc .rating-stars i {
  color: #62b868;
  margin-right: 1px
}

.service_desc .rating-stars i:last-of-type {
  margin-right: 10px
}

#services-template #benefits_1 h2.section_h2,
#services-template #benefits_2 h2.section_h2,
#services-template #faq-grid h2.section_h2,
#services-template #how_we_compare h2.section_h2,
#services-template #reviews h2.section_h2,
#services-template #services_desc h2.section_h2,
#services-template #why_matter h2.section_h2,
#services-template #your_safety h2.section_h2 {
  font-size: 4.125rem;
  font-weight: 900;
  text-align: center;
  line-height: 4.75rem
}

#benefits_1 h2.section_h2 span,
#benefits_2 h2.section_h2 span,
#faq-grid h2.section_h2 span,
#how_we_compare h2.section_h2 span,
#reviews h2.section_h2 span {
  display: inline-block;
  clear: both;
  width: 100%
}

#faq-grid .faq-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem
}

#faq-grid .faq-item {
  background: #fff;
  margin-bottom: .5rem;
  padding: 1.75rem 1.5rem;
  border-radius: 25px
}

#faq-grid summary {
  cursor: pointer;
  position: relative;
  list-style: none;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 559;
  border-bottom: none
}

#faq-grid summary::marker {
  display: none
}

#faq-grid summary::after {
  content: "＋";
  position: absolute;
  right: 0;
  transition: transform .3s ease
}

#faq-grid details[open] summary::after {
  content: "–";
  transform: rotate(180deg)
}

#faq-grid .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .4s ease;
  font-size: .95rem;
  line-height: 1.5
}

#faq-grid .faq-answer ul {
  list-style: decimal;
  padding-top: .58rem;
  margin: 0 0 0 1.8rem
}

#faq-grid details[open] .faq-answer {
  max-height: 200px;
  padding: .5rem 0
}

#faq-grid .ft-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem)
}

section#benefits_2,
section#reviews,
section#why_matter,
section#your_safety {
  border-radius: 0;
  padding: 5rem;
  max-width: none;
  width: 100%;
  border: none
}

.section_content {
  margin: auto;
  max-width: 1300px
}

#services-template section.related.products {
  background: linear-gradient(to top, #ffe4ea, #fff);
  border-color: #ffe4ea
}

section#our_guarantees {
  background: linear-gradient(to top, #e2f5e3, #fff);
  border-color: #e2f5e3
}

section#about ul,
section#our_guarantees ul {
  list-style: none;
  margin: 0;
  padding: 0
}

section#about ul li,
section#our_guarantees ul li {
  width: 30%;
  float: left;
  margin-right: 5%
}

section#about ul li:nth-child(3n),
section#our_guarantees ul li:nth-child(3n) {
  margin-right: 0
}

section#about {
  color: #fff;
  background: linear-gradient(to bottom, #000 0, #333 100%);
  border-color: #000
}

section#about ul p {
  color: rgba(255, 255, 255, .55)
}

#services-template p.p_info {
  border-radius: 25px;
  margin: auto;
  margin-top: 5rem;
  margin-bottom: 0;
  max-width: 780px
}

#how_we_compare .comparison-table {
  width: 100%;
  max-width: 750px;
  border: 0;
  border-collapse: separate;
  margin: auto;
  table-layout: fixed
}

#how_we_compare .comparison-table i {
  display: flex;
  width: 30px;
  height: 30px;
  line-height: 27px;
  margin-right: 7px;
  color: #777;
  text-align: center;
  float: left;
  justify-content: center
}

#how_we_compare .comparison-table tr span {
  display: flex
}

#how_we_compare .comparison-table tr td:first-of-type {
  border-width: 0 5px 3px 5px;
  border-style: solid;
  border-color: #f80031
}

#how_we_compare .comparison-table tr td:first-of-type i {
  color: #f80031
}

#how_we_compare .comparison-table tr td:last-of-type i {
  color: #999
}

#how_we_compare .comparison-table td,
#how_we_compare .comparison-table th {
  background: #fff;
  border: 0;
  padding: .75em 1em;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #eee
}

#how_we_compare .comparison-table tbody tr:last-child td:last-child {
  border-radius: 0 0 25px 0
}

#how_we_compare .comparison-table tbody tr:last-child th {
  border-radius: 0 0 0 25px
}

#how_we_compare .comparison-table td,
#how_we_compare .comparison-table th {
  border-left: 1px solid #eee
}

#how_we_compare .comparison-table td:last-child {
  border-right: 1px solid #eee
}

#how_we_compare .comparison-table thead tr td:first-of-type,
#how_we_compare .comparison-table thead tr:first-child td:last-child {
  line-height: 31px;
  padding-top: 1.85rem;
  padding-bottom: 1.85rem;
  border-radius: 25px 25px 0 0
}

#how_we_compare .comparison-table thead tr td:first-of-type {
  display: flex;
  justify-content: center;
  border-width: 5px 5px 3px 5px;
  align-items: center
}

#how_we_compare .comparison-table thead tr td:first-of-type img {
  margin-right: .75rem;
  height: 30px
}

#how_we_compare .comparison-table tbody tr:last-child td:last-child,
#how_we_compare .comparison-table tbody tr:last-child th {
  display: block
}

#how_we_compare .comparison-table thead tr:first-child td:last-child,
#how_we_compare .comparison-table thead tr:first-child th:first-child {
  background: 0 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0
}

#how_we_compare .comparison-table tbody tr:first-child td:last-child {
  border-top: 1px solid #eee;
  border-radius: 0 25px 0 0
}

#how_we_compare .comparison-table tbody tr:first-child th:first-child {
  border-top: 1px solid #eee;
  border-radius: 25px 0 0 0
}

#how_we_compare .comparison-table tbody tr:last-child td:first-of-type {
  padding-bottom: 2.32rem;
  border-bottom-width: 5px;
  border-radius: 0 0 25px 25px
}

#how_we_compare .comparison-table thead tr:first-child td:last-child {
  padding: 0
}

#how_we_compare .comparison-table thead tr:first-child td:last-child span {
  display: flex;
  justify-content: center;
  background: #eee;
  padding: 1rem;
  margin: 1rem;
  line-height: 1.35rem;
  border-radius: 17px;
  text-align: center;
  color: #999
}


section.hero .woocommerce-page-rating,
section.hero .woocommerce-product-rating {
  width: 138px;
  height: 20px;
  margin-right: 2.4rem;
  padding-right: 1rem;
  border-right: none
}

section.hero .special_flex,
.page-id-81 .special_flex,
html.gpco-js body.gpco-wiz.gpco-on-order div#gpco-order-tail .special_flex {
  display: flex;
  justify-content: center;
  align-items: center
}

div#gpco-order-tail .special_flex {
  margin-bottom: 0;
  margin-top: 1.5rem;
}

.page-id-81 .special_flex .sf-live {
  margin-top: 0;
}


.page-id-81 .inside-site-info {
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  margin-bottom: 0;
}

.page-id-81 .special_flex .woocommerce-page-rating,
.page-id-81 .special_flex .slideshow,
.page-id-81 .site-footer span:first-of-type {
  display: none;
}

/* Narrow viewports: stack the product hero's live-viewers / rating / slideshow
   in a sensible reading order (live first, then rating, then slideshow). */
@media (max-width: 1300px) {
  .sf-live {
    order: 1;
    margin-top: 0;
    margin-bottom: 1.25rem;
  }
  .woocommerce-product-rating { order: 2; }
  .slideshow { order: 3; }
  .page-id-81 .special_flex .sf-live { margin-bottom: 0; }
}




#services-template section#about a.button.buy-now-button {
  color: #fff;
  border-color: #fff
}

#services-template section#about a.button.buy-now-button:active,
#services-template section#about a.button.buy-now-button:hover {
  border-color: #f80031
}

.slideshow {
  position: relative;
  width: 73px;
  height: 38px;
  background: #fff;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  margin-left: 2.35rem;
}

.slideshow img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.8);
  animation: slideShow 8s linear infinite both;
  animation-fill-mode: both
}

.slideshow img:first-child {
  animation-delay: 0s
}

.slideshow img:nth-child(2) {
  animation-delay: 2s
}

.slideshow img:nth-child(3) {
  animation-delay: 4s
}

.slideshow img:nth-child(4) {
  animation-delay: 6s
}

@keyframes slideShow {
  0% {
    opacity: 0
  }

  10% {
    opacity: 1
  }

  60% {
    opacity: 1
  }

  80% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

.woocommerce .related.products ul.products li.product {
  display: flex;
  width: 30%;
  margin: 0 3.33% 0 0;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(to right, #f80031, #ff6e40)
}

.woocommerce .related.products ul.products li.product:hover {
  opacity: .8
}

.woocommerce .related.products ul.products li.product h2 {
  color: #fff;
  display: inline-flex;
  font-size: 1.5rem !important;
  text-transform: none !important;
  line-height: 1.5rem !important;
  font-weight: 750 !important;
  padding: 0;
  width: calc(100% - 35px);
  float: right;
  margin: 0;
  margin-bottom: 0 !important;
  align-items: center;
  justify-content: right
}

.woocommerce .related.products ul.products li.product img {
  display: inline-flex !important;
  max-width: 35px;
  max-height: 35px;
  width: 35px;
  height: 35px;
  float: left;
  margin: 0;
  filter: grayscale(100) brightness(100);
  -webkit-filter: grayscale(100) brightness(100)
}

.woocommerce .related.products ul.products li.product a.woocommerce-loop-product__link {
  display: inline-flex;
  width: 100%
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
form.woocommerce-cart-form table.shop_table input,
input,
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  height: 3.5rem;
  font-size: 1.0625rem;
  line-height: 1.25rem;
  font-weight: 400;
  background: var(--base-2) !important;
  border-radius: 1rem;
  border: 1px solid var(--base-2) !important;
  transition: .15s;
  -webkit-transition: .15s
}

.service-link-wrap #gpco-link {
  width: 100%;
}

.service-link-wrap {
  margin-bottom: 1rem;
}

.site-header .header-widget {
  margin-top: 0;
}

.woocommerce form .woocommerce-billing-fields .form-row input.input-text,
.woocommerce form .woocommerce-billing-fields .form-row select {
  padding: 10px;
  height: 2.75rem;
  font-size: .9rem;
  line-height: 1rem;
  padding-left: .9rem !important;
  padding-right: .9rem !important
}

.woocommerce form .woocommerce-billing-fields .form-row input#billing_phone.input-text {
  padding-left: 48px !important
}

.woocommerce form .woocommerce-billing-fields .form-row label {
  line-height: 1.25;
  font-size: .9rem;
  margin-top: .5rem
}

.woocommerce form .form-row .input-text:active,
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:active,
.woocommerce form .form-row select:focus,
form.woocommerce-cart-form table.shop_table input:active,
form.woocommerce-cart-form table.shop_table input:focus,
input:active,
input:focus,
input[type=email]:active,
input[type=email]:focus,
input[type=number]:active,
input[type=number]:focus,
input[type=password]:active,
input[type=password]:focus,
input[type=search]:active,
input[type=search]:focus,
input[type=tel]:active,
input[type=tel]:focus,
input[type=text]:active,
input[type=text]:focus,
input[type=url]:active,
input[type=url]:focus,
select:active,
select:focus,
textarea:active,
textarea:focus {
  background: #fafafa !important;
  border: 1px solid var(--contrast-3) !important
}

textarea {
  height: auto
}

form.woocommerce-cart-form table.shop_table input:read-only,
form.woocommerce-cart-form table.shop_table input:active:read-only,
input:active:read-only,
input:read-only {
  background: #fff !important;
  border: 1px solid var(--base-2) !important
}

form.woocommerce-cart-form tr.woocommerce-cart-form__cart-item.cart_item td.product-subtotal {
  text-align: right;
  float: right;
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  align-items: flex-end;
  height: 67px;
  max-width: 120px
}

table.shop_table.woocommerce-checkout-review-order-table tfoot {
  font-size: 1rem
}

.woocommerce table.shop_table .cart-subtotal th,
tfoot .cart-subtotal {
  max-height: 15px;
}

.woocommerce table.shop_table .cart-subtotal th,
tfoot .cart-subtotal,
del.gpco-line-regular span.woocommerce-Price-amount {
  color: #999
}

a.generate-back-to-top {
  background-color: #fff;
  color: var(--contrast);
  border-radius: .75rem
}

a.generate-back-to-top:hover {
  background-color: var(--contrast)
}

form.woocommerce-cart-form table.shop_table {
  border-spacing: 0 1rem;
  border: none !important;
  margin: 0
}

form.woocommerce-cart-form table.shop_table * {
  transition: .2s cubic-bezier(.25,.55,.25,1);
  -webkit-transition: .2s cubic-bezier(.25,.55,.25,1)
}

form.woocommerce-cart-form thead {
  display: none !important
}

form.woocommerce-cart-form tr.woocommerce-cart-form__cart-item.cart_item td {
  display: block;
  float: left;
  padding: .5rem .5rem;
  border-top: none !important
}

tr.woocommerce-cart-form__cart-item.cart_item {
  display: block;
  float: left;
  width: 100%;
  padding: 1rem;
  margin: .7rem 0;
}

tr.woocommerce-cart-form__cart-item.cart_item,
body.gpco tr.woocommerce-cart-form__cart-item.cart_item {
  border-radius: 20px;
  background: #fff !important;
  background-color: #fff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .01), 0 10px 30px rgba(0, 0, 0, .03);
  border: 1px solid #eee;
}

tr.woocommerce-cart-form__cart-item.cart_item:first-child {
  margin-top: 0
}

form.woocommerce-cart-form tr.woocommerce-cart-form__cart-item.cart_item td.product-name {
  width: 100%
}

form.woocommerce-cart-form tr.woocommerce-cart-form__cart-item.cart_item td.product-quantity,
form.woocommerce-cart-form tr.woocommerce-cart-form__cart-item.cart_item td:last-child {
  width: 50%
}

form.woocommerce-cart-form table.shop_table input.cart-service-link {
  padding-right: calc(20px + 2.5rem) !important
}

form.woocommerce-cart-form table.shop_table input.cart-service-link,
form.woocommerce-cart-form table.shop_table input.qty {
  padding-right: 10px;
  padding-left: 10px;
  height: 2.75rem;
  font-size: .9rem;
  line-height: 1rem;
  padding-left: .9rem !important;
  padding-right: .9rem !important;
}

form.woocommerce-cart-form table.shop_table input.qty {
  float: left;
  width: 55%
}

form.woocommerce-cart-form a.remove {
  display: inline-flex;
  float: right;
  justify-content: right;
  color: #999 !important;
  font-weight: 400;
  font-size: 1.3rem
}

form.woocommerce-cart-form a.remove:hover {
  color: var(--contrast) !important;
  background: 0 0 !important
}

form.woocommerce-cart-form table.shop_table a.custom-cart-product-name {
  display: inline-flex;
  align-items: center;
  width: calc(100% - 21px);
  color: var(--contrast);
  text-decoration: none;
  font-size: 1.0625rem;
  line-height: 1.25rem;
  font-weight: 400
}

form.woocommerce-cart-form table.shop_table a.custom-cart-product-name:hover {
  opacity: .8
}

.service-link-cart-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: .5rem
}

.service-link-cart-wrap i {
  cursor: pointer;
  font-size: 1.0625rem;
  line-height: 1.25rem;
  color: #999;
  opacity: .4;
  width: 60px;
  height: 60px;
}

.service-link-cart-wrap i:hover {
  color: var(--contrast);
  opacity: .5
}

#add_payment_method #payment div.form-row,
#add_payment_method #payment ul.payment_methods,
#customer_details,
.custom-checkout-features .features-list,
.woocommerce-cart #payment div.form-row,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment div.form-row,
.woocommerce-checkout #payment ul.payment_methods,
table.shop_table.woocommerce-checkout-review-order-table {
  padding: 1.5rem
}

.woocommerce form.woocommerce-cart-form table.shop_table.cart tr.cart_item th.product-name {
  display: block;
  width: 100%;
  padding: .5rem
}

.woocommerce form.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-price,
.woocommerce form.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-remove,
.woocommerce form.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-thumbnail {
  display: none
}

.woocommerce-checkout #payment div.form-row {
  padding: 2rem;
  padding-bottom: 1.75rem;
  border-top: 1px solid #eee !important; /* top border only — no side/bottom borders. */
}

.woocommerce-checkout #payment div.form-row button {
  padding: 1.5rem;
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  margin: auto;
}

table.shop_table.woocommerce-checkout-review-order-table td,
table.shop_table.woocommerce-checkout-review-order-table td strong,
table.shop_table.woocommerce-checkout-review-order-table th {
  border: none;
  border-top: none !important;
  padding: 0;
  font-weight: 400 !important
}

#add_payment_method #payment,
#customer_details,
.custom-checkout-features .features-list,
.woocommerce-cart #payment,
.woocommerce-checkout #payment,
table.shop_table.woocommerce-checkout-review-order-table {
  background: #fff;
  border-radius: 25px
}

table.shop_table.woocommerce-checkout-review-order-table {
  border: none;
  margin: -0.75rem 0 0 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .01), 0 10px 30px rgba(0, 0, 0, .03);
  border: 1px solid #eee;
}

body.page-id-81 {
  background: #fff;
}

body.page-id-81 .inside-article,
body.page-id-81 .inside-article:first-child {
  background-color: transparent;
  border: none;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0 !important;
  margin-bottom: 0;
  box-shadow: none !important;
}

body.page-id-8:not(.logged-in) .inside-article {
  background-color: transparent;
  border: none;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
  box-shadow: none !important;
}

#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box,
body.page-id-81 .menu_h_buttons,
body.page-id-81 header .buy-now-button-container,
body.page-id-81 header.site-header .main-nav,
body.page-id-81 header.site-header .menu-toggle,
body.page-id-81 label.qty-label,
h3#order_review_heading,
td.actions .coupon {
  display: none !important
}

body.page-id-81 .inside-header {
  padding: 1rem 0
}

.custom-checkout-features .features-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 1.3rem 0;
  margin-top: .99rem;
  gap: 1rem
}

.custom-checkout-features .features-list div {
  display: inline-flex;
  align-items: center;
  color: #58a85e;
  width: calc(50% - 1rem);
  box-sizing: border-box
}

.custom-checkout-features .features-list div i {
  width: 35px;
  height: 35px;
  background: #f5fbf5;
  margin-right: .8rem;
  font-size: 1.1rem;
  line-height: 35px;
  text-align: center;
  border-radius: 27%;
  flex-shrink: 0
}

.custom-checkout-features .features-list div span {
  flex-grow: 1;
  font-size: 1rem
}

.inside-header {
  padding: 10px 0
}

.has-inline-mobile-toggle #site-navigation.toggled,
.main-navigation .menu-toggle,
.main-navigation .menu-toggle:active,
.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle:focus,
.mobile-menu-control-wrapper .menu-toggle:hover {
  background-color: transparent !important;
  background: 0 0 !important
}

.has-inline-mobile-toggle #site-navigation.toggled {
  margin-top: 0;
  padding: 15px 20px
}

.separate-containers .comments-area,
.separate-containers .inside-article,
.separate-containers .page-header,
.separate-containers .paging-navigation {
  padding: 2.5rem
}

button.single_add_to_cart_button.button.alt:not(.order_now) {
  width: 60px;
  margin-left: 10px;
  float: right !important;
  padding-left: 8px;
  padding-right: 8px
}

.single_add_to_cart_button:not(.order_now)::before {
  content: "\f217";
  font-family: FontAwesome
}

.woocommerce div.product form.cart div.quantity {
  float: left;
  height: 81.5px;
  width: 65%;
  margin: 0
}

.woocommerce .quantity .qty {
  width: 100%
}

label {
  margin-bottom: .3rem
}

.custom_total_price-wrap {
  display: block;
  width: 33%;
  float: right;
  height: 81.5px
}

.custom_total_price-wrap label {
  float: left;
  width: 100%;
  text-align: right;
}

div#custom_total_price {
  display: block;
  float: right;
  text-align: right;
  word-break: break-all;
  font-size: 1rem;
  justify-content: center;
  align-items: center;
  min-height: 51.3px
}

#custom_total_price del {
  font-size: .85rem;
  color: #999
}

div#bv-qty-buttons {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  clear: both;
  margin-top: -1rem;
  margin-bottom: .5rem
}

button.button.bv-qty-btn {
  color: var(--contrast);
  background: var(--base-2);
  width: 23%;
  margin: 2% 1%;
  padding: 5px;
  height: 90px;
  border-radius: 1rem;
  transition: .15s;
  -webkit-transition: .15s
}

button.button.bv-qty-btn:hover {
  color: var(--contrast);
  background: var(--base-2)
}

button.button.bv-qty-btn:hover {
  opacity: .75
}

button.button.bv-qty-btn.selected:hover {
  opacity: 1
}

.button.bv-qty-btn:has(span.recommendedText) {
  padding-bottom: 20px;
}

span.qtyText {
  display: inline-block;
  font-weight: 900;
  font-size: 1.7rem;
  width: 100%
}

button.button.bv-qty-btn.selected {
  color: #fff
}

span.discountText {
  position: absolute;
  font-size: .85rem;
  font-weight: 700;
  top: -5px;
  right: 0;
  background: var(--base-2);
  color: #ff4436;
  padding: 3px 7px;
  border-radius: 50px 50px 0
}

button.button.bv-qty-btn.selected span.discountText {
  color: var(--contrast)
}

span.savedText {
  font-weight: 600;
  font-size: .75rem;
  color: #444
}

button.button.bv-qty-btn.selected span.savedText {
  color: #fff
}

span.recommendedText {
  position: absolute;
  width: 100%;
  font-size: .75rem;
  font-weight: 700;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, #62b868, #80d486);
  color: #fff;
  padding: .255rem;
  border-radius: 0 0 1rem 1rem
}

span.recommendedText:before {
  content: '\f559';
  margin-right: 5px;
  font-family: FontAwesome
}

span.recommendedText.bulkPrice {
  background: linear-gradient(to right, #222, #666);
}

span.recommendedText.bulkPrice:before {
  content: '\f06d';
}

#how-it-works .ft-container {
  padding: 0;
  margin: 0
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 85px
}

.woocommerce-account .woocommerce-MyAccount-content {
  display: block;
  float: right;
  width: calc(100% - 125px)
}

/* My-Account nav link label — 15px on desktop, 14px on mobile. */
li.woocommerce-MyAccount-navigation-link a {
  font-size: 15px;
}
@media (max-width: 768px) {
  li.woocommerce-MyAccount-navigation-link a {
    font-size: 14px;
  }
}

.woocommerce-account header h1.entry-title {
  margin-top: .5rem
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin-left: 0
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:before {
  width: 59px;
  height: 59px;
  line-height: 59px;
  margin-right: 0;
  text-align: center;
  font-size: 1.5rem;
  border-radius: 1rem;
  margin-bottom: 0.3rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--rewards a:before {
  font-family: FontAwesome;
  content: "\f06b"
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a:before {
  font-family: FontAwesome;
  content: "\f49e"
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--downloads a:before {
  font-family: FontAwesome;
  content: "\f1c6"
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a:before {
  font-family: FontAwesome;
  content: "\f015"
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods a:before {
  font-family: FontAwesome;
  content: "\f09d"
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a:before {
  font-family: FontAwesome;
  content: "\f555"
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a:before {
  font-family: FontAwesome;
  content: "\f013"
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--support a:before {
  font-family: FontAwesome;
  content: "\f086"
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:before {
  font-family: FontAwesome;
  content: "\f08b"
}

li.woocommerce-MyAccount-navigation-link a {
  display: flex;
  align-items: center;
  flex-direction: column;
  background: 0 0;
  opacity: .5;
  color: var(--contrast);
  margin-bottom: 1.5rem;
  text-decoration: none;
  transition: .15s;
  -webkit-transition: .15s
}

li.woocommerce-MyAccount-navigation-link a:hover,
li.woocommerce-MyAccount-navigation-link.is-active a {
  opacity: 1
}

li.woocommerce-MyAccount-navigation-link a:hover:before,
li.woocommerce-MyAccount-navigation-link.is-active a:before {
  background: #fafafa
}

.site-header .buy-now-button-container,
.woocommerce-account header h1.entry-title {
  display: none
}

.form-row.place-order,
.is-mobile .wc-block-checkout__actions .wc-block-checkout__actions_row,
.wc-block-cart .wc-block-cart__submit-container--sticky {
  margin: 0 0 15px 0 !important;
  width: 100%;
  margin-left: calc((100% - 1300px)/ 2) !important;
  position: fixed;
  bottom: 0;
  left: 0;
  max-width: 1300px;
  padding: 2.5rem 2rem;
  z-index: 1000;
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .08);
  background-color: rgba(255, 255, 255, .8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 28px 28px 0 0;
}

.form-row.place-order button,
.is-mobile .wc-block-checkout__actions .wc-block-checkout__actions_row button,
.wc-block-cart__submit a {
  margin-top: 0 !important;
  margin-bottom: 0 !important
}

.menu-bar-item.balance-item i.fas.fa-wallet {
  margin-right: 10px
}

#you-saved {
  margin-top: 8px;
  color: #58A85E;
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

.woocommerce div.product div.summary {
  margin-bottom: 0
}

.woocommerce div.product form.cart {
  margin-bottom: 0
}

.site-info {
  background-color: transparent;
  font-size: 16px;
  text-align: left;

}

.inside-site-info {
  display: flex;
  align-items: self-start;
  justify-content: left;
  padding: 2rem;
  margin: 15px;
  color: #444;

}

span.terms_of_service {
  display: block;
  padding: 2rem;
  text-align: left;
  width: 100%;
  border-bottom: 0;
  background: #fff;
  border-radius: 25px;
}

p.checkout-terms-privacy a,
span.terms_of_service a {
  color: #444;
  margin: 0 15px;
  transition: .15s;
  -webkit-transition: .15s
}

p.checkout-terms-privacy a:hover,
span.terms_of_service a:hover {
  color: var(--accent)
}

p.checkout-terms-privacy {
  display: inline-block;
  float: right;
  font-size: .65rem;
  color: #999;
  width: 100%;
  padding-left: 0;
  margin-bottom: 0;
  margin-top: .5rem;
  text-align: center
}

p.checkout-terms-privacy a {
  margin: 0;
  color: #999
}

#payment {
  margin-top: 1rem;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .01), 0 10px 30px rgba(0, 0, 0, .03) !important;
  border: 1px solid #eee !important;
}

span.custom-cart-title {
  text-align: left
}

.site-branding-container {
  padding-left: 20px
}

table.shop_table.woocommerce-checkout-review-order-table tr.order-discount-bulk td,
table.shop_table.woocommerce-checkout-review-order-table tr.order-discount-bulk th {
  color: #43a047;
  font-weight: 600 !important
}

tr.cart-subtotal td,
tr.fee td,
tr.order-discount-bulk td,
tr.order-total td,
.woocommerce-checkout-review-order-table td {
  text-align: right
}

tr.cart-subtotal td {
  text-decoration: line-through
}

.info-overlay {
  display: none;
  overflow-y: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .2);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .15s ease, visibility .15s ease;
  -webkit-transition: opacity .15s ease, visibility .15s ease;
  z-index: 9999
}

.info-overlay.visible {
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s
}

.info-content {
  background-color: rgba(255, 255, 255, .8);
  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .03);
  border: none;
  outline: none;
  outline-offset: 0;
  position: relative;
  padding: 2.5rem;
  max-width: 500px;
  width: 90%;
  border-radius: 25px;
  max-height: 65vh;
  overflow-y: auto;
  box-sizing: border-box;
  transition: transform .15s ease;
  -webkit-transition: transform .15s ease
}

.info-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  line-height: 1
}

.info-close:hover,
.info-open:hover {
  opacity: .7
}

.info-open {
  display: inline-block;
  font-size: .8rem;
  text-decoration: underline
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: none;
  flex-direction: column;
}

.wc_payment_method input[type=radio] {
  display: none
}

li.wc_payment_method {
  width: 100%;
  float: left
}

li.wc_payment_method:nth-child(2n) {
  float: right
}

.wc_payment_method label {
  display: inline-flex;
  width: 100%;
  align-items: center;
  padding: 1rem;
  gap: 0.84rem;
  justify-content: space-between;
  line-height: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 16px;
  cursor: pointer;
  transition: .15s;
  -webkit-transition: .15s
}

.wc_payment_method label::before {
  font-family: FontAwesome;
  font-weight: 400;
  content: "\f111";
  font-size: 1.25rem;
  transition: color .2s, content .2s;
  color: #ccc
}

.wc_payment_method input[type=radio]:not(:checked)+label:hover {
  background-color: rgba(0, 0, 0, .025)
}

.wc_payment_method input[type=radio]:checked+label::before {
  content: "\f058";
  font-weight: 900;
  color: #58a85e
}

.wc_payment_method input[type=radio]:checked+label {
  border-color: #58a85e;
  background-color: #f5fbf5;
  color: #58a85e;
  box-shadow: 0 0 0 1px #58a85e
}

#add_payment_method #payment ul.payment_methods li img,
.woocommerce-cart #payment ul.payment_methods li img,
.woocommerce-checkout #payment ul.payment_methods li img {
  max-height: 25px;
  margin-left: auto
}

ul.wc-item-meta {
  margin: 0
}

table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
  border: 0;
  border-width: 0;
  background: #fafafa;
  border-radius: 15px
}

table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details td,
table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details th,
table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details tr {
  border: 0;
  border-width: 0;
  font-weight: 400
}

table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details th {
  font-weight: 600;
  color: #444
}

.woocommerce-table__line-item.order_item strong {
  font-weight: 600;
  color: #444
}

.woocommerce-table__product-name.product-name {
  font-weight: 600
}

div#customer_details div.col-1 {
  width: 100%
}

div#customer_details {
  margin: .99rem 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .01), 0 10px 30px rgba(0, 0, 0, .03);
  border: 1px solid #eee;
}

body.gpco div#customer_details {
  margin-bottom: 1.5rem;
}

.woocommerce table.my_account_orders td,
.woocommerce table.my_account_orders th {
  padding: 10px 15px
}

.woocommerce table.shop_table th {
  font-weight: 500;
  color: var(--contrast-2)
}

.woocommerce table.my_account_orders th a {
  color: var(--contrast);
  text-decoration: none;
  font-weight: 400
}

.woocommerce table.my_account_orders th a:hover {
  text-decoration: underline
}

.woocommerce table.my_account_orders .button {
  padding: 5px 10px
}

.woocommerce table.shop_table td {
  line-height: 1.8rem;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  border-top: 0 !important
}

.woocommerce table.shop_table td:last-child,
.woocommerce table.shop_table th:last-child {
  border-right: 0
}

.woocommerce table.shop_table tbody tr:last-child td,
.woocommerce table.shop_table tbody tr:last-child th {
  border-bottom: 0
}

.cart_and_checkout_flex .product-name img {
  max-width: 20px;
  max-height: 20px;
  margin-right: 12px
}

.cart_and_checkout_flex {
  margin-top: 0;
  margin-bottom: 0
}

.woocommerce table.shop_table {
  border-radius: 25px;
  border: 1px solid #eee;
}

.product-subtotal del {
  width: 100%;
  font-size: .7rem;
  color: #999;
  max-height: 15px
}

.site-header .header-image {
  width: 30px;
  height: 30px;
  max-width: 30px
}

.site-footer {
  display: block;
  width: 100%;
  max-width: 1300px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin: auto;
  border-radius: 0;
  overflow: hidden
}

#services-template .h_buttons,
body .hero .h_buttons {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem
}

#services-template .h_buttons a.button.buy-now-button,
#services-template .h_buttons a.button.buy-now-button:active,
#services-template .h_buttons a.button.buy-now-button:hover,

body .hero .h_buttons a.button.buy-now-button,
body .hero .h_buttons a.button.buy-now-button:active,
body .hero .h_buttons a.button.buy-now-button:hover,

.info-actions .button.info-action-round,
.info-actions .button.info-action-round:active,
.info-actions .button.info-action-round:hover {
  display: inline-flex !important;
  width: 418px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  font-size: 1.33rem;
  color: #fff;
  background: linear-gradient(to right, #f80031, #ff6e40) !important;
  border: none;
  font-weight: 700;
  border-radius: 24px
}

#services-template .h_buttons a.button.buy-now-button:active,
#services-template .h_buttons a.button.buy-now-button:hover {
  -webkit-transform: scale(1.03);
  transform: scale(1.03)
}


.info-actions .button.info-action-round,
.info-actions .button.info-action-round:active,
.info-actions .button.info-action-round:hover {
  width: 100%;
}

form.woocommerce-cart-form {
  background: 0 0 !important;
  background-color: transparent !important;
  margin-top: 0.99rem;
}

.h_buttons a.button.buy-now-button svg {
  height: 40px;
  width: 40px
}

.menu_h_buttons {
  display: flex;
  width: 100%;
  align-items: center;
  overflow: hidden;
  overflow-x: scroll;
  gap: 20px;
  padding: 0 20px 12px;
  font-size: 18px;
  font-weight: 600
}

.menu_h_buttons a {
  display: flex;
  color: #777;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 100%;
  white-space: nowrap;
  gap: 8px
}

.menu_h_buttons a:hover {
  color: var(--accent)
}

.menu_h_buttons a svg {
  height: 18px;
  width: 18px
}

.svc {
  --sw-red: #f80031;
  --sw-coral: #ff6e40;
  --sw-grad: linear-gradient(135deg, #f80031, #ff6e40);
  --sw-green: #62b868;
  --sw-green-2: #80d486;
  --sw-ink: var(--contrast, #222);
  --sw-muted: #777;
  --sw-muted-2: #999;
  --sw-bg: #fff;
  --sw-soft: var(--base-2, #f7f8f9);
  --sw-line: #eee;
  --sw-r: 30px;
  --sw-pill: 999px;
  --sw-shadow: 0 18px 40px rgba(0, 0, 0, .08);
  --sw-ease: cubic-bezier(.2, .7, .2, 1);

  max-width: 960px;
  margin-inline: auto;
  color: var(--sw-ink);
  background: var(--sw-bg);
  border: none;
  border-radius: var(--sw-r);
  box-shadow: var(--sw-shadow);
  overflow: hidden;
}

.svc *,
.svc *::before,
.svc *::after {
  box-sizing: border-box;
}

.svc :focus-visible {
  outline: 2px solid var(--sw-red);
  outline-offset: 2px;
  border-radius: 8px;
}

.svc-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.svc-tabs {
  display: grid;
  /* Adapt to however many platforms the catalogue yields (the render loops over a
     filterable list) instead of hardcoding 3 columns — 2 or 4+ platforms no longer
     leave an empty cell or a lone stretched tab. */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  background: var(--sw-soft);
  gap: 0;
  padding: 0;
}

.svc-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: var(--base-2) !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
  font: inherit;
  color: var(--sw-muted);
  padding: 16px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  border-radius: 30px 30px 0 0;
  transition: background .2s var(--sw-ease), color .2s var(--sw-ease);
}

.svc-tab:hover,
.svc-tab:active {
  color: var(--sw-ink);
  background: rgba(255, 255, 255, .6) !important;
}

.svc-tab.is-active {
  background: var(--sw-bg) !important;
  color: var(--sw-ink);
}

.svc-tab__icon {
  width: 2.35rem;
  height: 2.35rem;
  flex: none;
}

.svc-tab__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.svc-tab__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.svc-tab__name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}

.svc-tab.is-active .svc-tab__name {
  font-weight: 600;
}

.svc-new {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sw-grad);
  padding: 2px 6px;
  border-radius: var(--sw-pill);
  line-height: 1.5;
}

.svc-rate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
}

.svc-rate__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-pill);
  padding: 2px 7px;
}

.svc-rate__pill svg {
  width: 16px;
  height: 16px;
  color: #62b868;
}

.svc-rate__count {
  color: var(--sw-muted-2);
}

.svc-body {
  padding: 24px;
  background: var(--sw-bg);
}


body .hero .svc-body.h_buttons {
  flex-direction: row;
}



@media(min-width:640px) {
  .svc-body {
    padding: 30px 34px;
  }
}

@keyframes svcFade {
  from {
    opacity: .8
  }

  to {
    opacity: 1
  }
}

.svc-panel {
  animation: svcFade .3s ease-in-out;
}

/* Hide inactive service panels before the switcher JS runs, so the .svc-body
   .h_buttons block never flashes every tab's buttons on load. Gated on a class
   set by a guaranteed-early head script (.acc-js), with the theme's own .js as
   a fallback; without JS at all, every panel stays visible (crawlable). */
.js .svc-panel:not(.is-active),
.acc-js .svc-panel:not(.is-active),
.svc-panel[hidden] {
  display: none !important;
}



/* Host buttons: layout only — colors/padding/font stay theirs */
.svc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.svc-actions>a.button {
  margin: 0;
}
/* Click preloader: a fast "loading" shimmer sweeping the button background while
   the destination page loads (svc_switcher_inline_js adds .is-loading). The
   sweep + keyframe (acc-load-sweep) are shared with the pmega / cross-sell / add
   buttons below so every button preloader reads the same. */
.svc-actions>a.button.is-loading { pointer-events: none; position: relative; overflow: hidden; }
.svc-actions>a.button.is-loading::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.5) 50%, transparent 75%);
  background-size: 250% 100%; animation: acc-load-sweep 1s ease-in-out infinite;
}
@keyframes acc-load-sweep { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
/* Single-service page CTAs ("Buy now" + add-to-cart): same background sweep as
   the cross-sell / nav buttons (account_front.php adds .is-loading on submit and
   keeps the label visible instead of swapping it for a spinner). */
.single_add_to_cart_button.is-loading { pointer-events: none; position: relative; overflow: hidden; }
.single_add_to_cart_button.is-loading::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.5) 50%, transparent 75%);
  background-size: 250% 100%; animation: acc-load-sweep 1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .single_add_to_cart_button.is-loading::after { animation: none; }
}

.svc-assure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 20px;
  color: var(--sw-muted);
  font-weight: 600;
  font-size: 13px;
}

.svc-assure span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.svc-assure svg {
  width: 16px;
  height: 16px;
  color: var(--sw-green);
  flex: none;
}

@media(max-width:560px) {
  .svc-tab {
    flex-direction: column;
    gap: 7px;
    padding: 13px 8px;
  }

  .svc-tab__meta {
    align-items: center;
  }

  .svc-rate__count {
    display: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .svc * {
    animation: none !important;
    transition: none !important;
  }
}



.sf-live {
  --l-green: #62b868;
  --l-green-2: #80d486;
  --l-ink: var(--contrast, #222);
  --l-muted: #777;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  vertical-align: middle;
  box-sizing: border-box;
  max-width: 100%;
  min-width: min(320px, 100%);
  justify-content: space-between;
  background: #eef7f0;
  border: 1px solid rgba(98, 184, 104, .28);
  border-radius: 999px;
  padding: 9px 16px;
  min-height: 42px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--l-ink);
}

.sf-live *,
.sf-live *::before,
.sf-live *::after {
  box-sizing: border-box;
}

.sf-live__dot {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
}

.sf-live__dot i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--l-green);
}

.sf-live__dot::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: rgba(98, 184, 104, .4);
  animation: sfLivePulse 1.8s cubic-bezier(.2, .7, .2, 1) infinite;
}

@keyframes sfLivePulse {
  0% {
    transform: scale(.55);
    opacity: .85
  }

  100% {
    transform: scale(1.7);
    opacity: 0
  }
}

.sf-live__text {
  font-weight: 500;
  white-space: nowrap;
  transition: opacity .3s, transform .3s;
}

.sf-live__text b {
  font-weight: 500;
}

.sf-live__text em {
  font-style: normal;
  color: var(--l-muted);
}

.sf-live.is-swapping .sf-live__text {
  opacity: 0;
  transform: translateY(-7px);
}

.sf-live__check {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--l-green);
}

.sf-live__check svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (prefers-reduced-motion:reduce) {
  .sf-live * {
    animation: none !important;
    transition: none !important;
  }
}

section#hero_id.hero {
  margin-bottom: 0;
}

section#hero_id.hero .special_flex {
  margin-top: 2.58rem;
  margin-bottom: 2.58rem;
}

.pmega,
.pmega-trigger,
.pmega-burger {
  --pm-red: #f80031;
  --pm-coral: #ff6e40;
  --pm-grad: linear-gradient(135deg, #f80031, #ff6e40);
  --pm-green: #62b868;
  --pm-green2: #80d486;
  --pm-green3: #58a85e;
  --pm-ink: var(--contrast, #222);
  --pm-bg: var(--base-2, #f7f8f9);
  --pm-card: #fff;
  --pm-line: #ecedf0;
  --pm-muted: #777;
  --pm-ease: cubic-bezier(.22, 1, .36, 1);
  /* approx viewport offset of the desktop popover's top edge; caps the
     sheet max-height only — the sheet itself is anchored to the nav <li> */
  --pm-top: 88px;
}

.pmega *,
.pmega *::before,
.pmega *::after {
  box-sizing: border-box
}

.pmega a {
  text-decoration: none;
  color: inherit
}

.pmega a,
.pmega button,
.pmega-trigger,
.pmega-burger {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation
}

/* desktop trigger in the nav */
.pmega-services-item>.pmega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  line-height: 35px !important;
  margin: 0 20px 0 10px;
  font-weight: 500 !important;
}

.pmega-trigger {
  padding: .5rem;
}

.pmega-caret {
  width: 15px;
  height: 15px;
  display: inline-flex;
  transition: transform .2s var(--pm-ease)
}

.pmega-caret svg {
  width: 100%;
  height: 100%;
  display: block
}

.pmega-trigger[aria-expanded="true"] .pmega-caret {
  transform: rotate(180deg)
}

@media(max-width:768px) {
  .pmega-services-item {
    display: none
  }
}

/* fallback burger (only if the theme has no .menu-toggle) */
.pmega-burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 8px
}

.pmega-burger span {
  display: block;
  height: 2px;
  width: 24px;
  background: var(--pm-ink);
  border-radius: 2px
}

@media(max-width:768px) {
  .pmega-burger {
    display: inline-flex
  }
}

/* overlay root — sits ABOVE every other overlay (flash-bonus popup 100000,
   round-up takeover 100050, toasts 100001) so the (mobile) burger menu, once
   open, is always on top and never trapped behind a popup. Only matters while
   open — pointer-events stay off when closed. */
.pmega {
  position: fixed;
  inset: 0;
  z-index: 100100;
  pointer-events: none;
  font: inherit
}

.pmega[hidden] {
  display: none
}

.pmega:target {
  display: block
}

.pmega:target .pmega__sheet {
  opacity: 1;
  transform: none;
  pointer-events: auto
}

.pmega:target .pmega__scrim {
  opacity: 1
}

.pmega__scrim {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Non-interactive until open: gate pointer capture on .is-open. The full-viewport
     scrim/sheet stays displayed for the 240ms close animation (opacity fades but the
     [hidden] attribute isn't set until it ends), so if it kept pointer-events:auto it
     would swallow the next page click on desktop. .is-open turns it on; :target keeps
     the no-JS fallback's sheet content clickable. */
  pointer-events: none;

  background: rgba(0, 0, 0, .2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .15s ease, visibility .15s ease;
  -webkit-transition: opacity .15s ease, visibility .15s ease;
  transition-delay: 0s, 0s;
}

.pmega.is-open .pmega__scrim {
  opacity: 1;
  pointer-events: auto
}

/* sheet = the SINGLE vertical scroll container (full screen on every width) */
.pmega__sheet {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background-color: rgba(255, 255, 255, .8);
  color: var(--pm-ink);
  pointer-events: none;
  opacity: 0;
  /* Entry animation is OPACITY-ONLY. A `transform` here would make .pmega__sheet a
     containing block for its own position:fixed close (✕) button during the closed
     + transition window, so the ✕ would be positioned against the moving sheet and
     then snap to the viewport when the transform cleared — a visible jump on first
     open. No transform on the sheet ⇒ the fixed ✕ is always viewport-relative and
     lands at its correct offset from first paint. */
  transition: opacity .2s ease
}

.pmega.is-open .pmega__sheet {
  opacity: 1;
  pointer-events: auto
}

/* Desktop (≥769px): the sheet is a 468px floating panel inset from the RIGHT edge —
   a right-side drawer — instead of full-screen; mobile keeps the full-screen sheet.
   The scrim still dims the whole viewport behind it. The panel fades in (opacity;
   no transform — see the base .pmega__sheet note) so its fixed close button never
   jumps. transform:none here is explicit belt-and-braces. */
@media (min-width: 769px) {
  .pmega__sheet {
    left: auto;
    right: 15px;
    width: 468px;
    max-width: 468px;
    border-radius: 30px;
    transform: none;
    top: 15px;
    bottom: auto;
    height: calc(100% - 30px);
  }
  /* The close (×) button sits inset from the floating panel's top-right corner,
     with the correct desktop offsets from first paint. */
  .pmega__head {
    top: 39px !important;
    right: 39px !important;
  }
}


.pmega__head {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, .8);
  width: 44px;
  height: 44px;
  border-radius: 18px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pmega__title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em
}

.pmega__x {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #555 !important;
  border-radius: 10px;
  cursor: pointer
}

.pmega__x:hover {
  background: transparent !important;
  color: #555 !important;
  opacity: 0.8;
}

.pmega__x svg {
  width: 22px;
  height: 22px
}

/* social tiles — free horizontal scroll, NOT pinned vertically */
.pmega__rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 0 16px;
  background: transparent;
  scrollbar-width: none;
  margin: 24px 8px 8px 8px;
}

.pmega__rail::-webkit-scrollbar {
  display: none
}

.pmega-pill {
  flex: 0 0 auto;
  display: flex;
  width: 80px;
  height: 80px;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px;
  border-radius: 26px !important;
  background: #fff !important;
  background-color: #fff !important;
  outline: none !important;
  cursor: pointer;
  transition: background .15s ease;
  opacity: 0.9;
  -webkit-appearance: none;
  appearance: none
}

.pmega-pill__logo {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center
}

.pmega-pill__logo svg {
  width: 100%;
  height: 100%;
  display: block
}

.pmega-pill__name {
  font-size: 12px;
  font-weight: 400;
  color: var(--pm-muted);
  white-space: nowrap
}

.pmega-pill:hover,

.pmega__x .pmega__x:hover,
.pmega__x:focus,
.pmega__x:focus-visible,
.pmega__x:active {
  background: transparent !important;
}

.pmega-pill,
.pmega-pill:hover,
.pmega-pill:focus,
.pmega-pill:focus-visible,
.pmega-pill:active {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

.pmega-pill:hover {
  background: rgba(255, 255, 255, 0.8) !important;
}

.pmega-pill.is-active,
.pmega-pill.is-active:hover,
.pmega-pill.is-active:focus,
.pmega-pill.is-active:active {
  background: rgba(255, 255, 255, .8) !important;
  opacity: 1;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pmega-pill.is-active .pmega-pill__name {
  font-weight: 400;
}

/* Click preloader on pmega navigation controls (added by pmega-js on tap).
   A spinner fades in over the control and the content dims, so the tap feels
   instant while the destination page loads. */
.pmega-hero.is-loading,
.pmega-card.is-loading,
.pmega__menu a.is-loading,
a.pmega-buy.is-loading {
  position: relative;
  pointer-events: none;
}
.pmega-hero.is-loading,
.pmega-card.is-loading,
.pmega__menu a.is-loading,
a.pmega-buy.is-loading {
  overflow: hidden;
}
.pmega-hero.is-loading::after,
.pmega-card.is-loading::after,
.pmega__menu a.is-loading::after,
a.pmega-buy.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.5) 50%, transparent 75%);
  background-size: 250% 100%;
  animation: acc-load-sweep 1s ease-in-out infinite;
}

/* Uniform button SPINNER — shown together with the background sweep while a
   button loads, REPLACING its label/content. Same ring size + animation on every
   sweep button (svc-actions nav, pmega, cross-sell "Add to order", single-service
   Buy/add-to-cart). The label is hidden with color:transparent (so currentColor
   can't drive the ring); the ring is white on dark/coloured buttons and dark on
   the two light ones (pmega card + menu). Keyframe duplicated in the cross-sell
   stylesheets so it resolves regardless of which sheets a page loads. */
@keyframes acc-btn-spin { to { transform: rotate(360deg); } }
/* Standalone buttons swap their OWN label for the spinner. For the pmega TILES
   (hero/card) the spinner sits on the inner "Buy now" (.pmega-buy) button instead,
   so the tile's icon/title/description stay visible — only the button label swaps
   (the tile keeps its background sweep as a loading cue). */
.single_add_to_cart_button.is-loading,
.pmega__menu a.is-loading,
a.pmega-buy.is-loading,
.pmega-hero.is-loading .pmega-buy,
.pmega-card.is-loading .pmega-buy { color: transparent !important; position: relative; }
.single_add_to_cart_button.is-loading > *,
.pmega__menu a.is-loading > * { opacity: 0 !important; }
.single_add_to_cart_button.is-loading::before,
.pmega__menu a.is-loading::before,
a.pmega-buy.is-loading::before,
.pmega-hero.is-loading .pmega-buy::before,
.pmega-card.is-loading .pmega-buy::before {
  content: "" !important;
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px; box-sizing: border-box;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; z-index: 3;
  animation: acc-btn-spin .6s linear infinite;
}
.pmega__menu a.is-loading::before {
  border-color: rgba(20,22,30,.25); border-top-color: #16161c;
}
/* The single-service add-to-cart ICON button (js-replace-icon) injects a runtime
   <style> setting .js-replace-icon::before{content:none!important}; it loads after
   this sheet and ties on specificity, so it wins and the spinner ::before is never
   generated. Re-assert content with a higher-specificity selector (adds the
   `button` element) so the spinner shows on the add-to-cart button too. */
button.single_add_to_cart_button.is-loading::before { content: "" !important; }
@media (prefers-reduced-motion: reduce) {
  .single_add_to_cart_button.is-loading::before,
  .pmega__menu a.is-loading::before,
  a.pmega-buy.is-loading::before,
  .pmega-hero.is-loading .pmega-buy::before,
  .pmega-card.is-loading .pmega-buy::before { animation: none; }
}

.pmega-pill.is-active .pmega-pill__name {
  color: var(--pm-ink)
}

/* services */
.pmega__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.pmega-grp {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.pmega-grp[hidden] {
  display: none
}

/* No content-appearance animation on platform switch (removed by request) —
   clicking a social-network tab swaps the group instantly. */

/* hero (dark card) */
.pmega-hero {
  display: block;
  background-color: #222;
  background: radial-gradient(120% 85% at 50% 120%, rgba(248, 0, 49, 0.8), rgba(255, 255, 255, 0.002) 52%), linear-gradient(180deg, #222 0%, #161619 50%, #0a0a0c 100%);
  border-radius: 25px;
  padding: 22px
}

.pmega-hero__media {
  height: 104px;
  width: 104px;
  border-radius: 27%;
  background: var(--pm-grad);
  display: grid;
  place-items: center;
  color: #fff;
  float: left;
  margin-bottom: 26px;
  transform: perspective(190px) rotateX(18deg) rotateY(18deg) rotate(-10deg);
  transform-origin: 50% 50%;
  box-shadow: 0 -15px 30px rgba(255, 255, 255, .14);
}

.pmega-hero__media svg {
  width: 60px;
  height: 60px
}

.pmega-hero__body {
  display: block;
  padding: 0;
  width: calc(100% - 126px);
  float: right;
}

.pmega-hero__title {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
}

.pmega-hero__desc {
  color: rgba(255, 255, 255, .72);
  font-size: 17px;
  line-height: 1.45;
  margin-top: 4px;
  font-weight: 400;
}

.pmega-hero .pmega-trust {
  margin-top: 10px
}

.pmega-hero .pmega-buy {
  margin-top: 12px
}


/* card (image left, text + button right) */
.pmega-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--pm-card);
  transition: box-shadow .15s ease
}

.pmega-card:hover,
.pmega-hero:hover {
  box-shadow: 0 1px 5px rgba(0, 0, 0, .015);
}

.pmega-card__media {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 27%;
  display: grid;
  place-items: center;
  background: rgba(248, 0, 49, .07);
  color: var(--pm-red)
}

.pmega-card__media svg {
  width: 46px;
  height: 46px
}

.pmega-card__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto
}

.pmega-card__title {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--pm-ink);
  font-size: 17px;
  font-weight: 700;
}

.pmega-card__desc {
  color: var(--pm-muted);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
}

/* buy button (rounded rectangle, brand gradient) */
.pmega-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--pm-grad);
  border-radius: 1rem;
  padding: 11px 18px;
  transition: filter .15s ease
}

.pmega-buy:hover {
  filter: brightness(1.06)
}

.pmega-buy--block {
  display: flex;
  width: 100%;
  padding: 13px;
  font-size: 18px
}

.pmega-buy--sm {
  margin-top: 8px;
  align-self: flex-start;
  padding: 9px 16px;
  font-size: 16px;
  border-radius: 0.8rem
}

/* trust + chevron */
.pmega-trust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pm-green2)
}

.pmega-trust svg {
  width: 14px;
  height: 14px;
  color: var(--pm-green)
}

.pmega-chev {
  display: inline-flex;
  width: 18px;
  height: 18px;
  opacity: .5
}

.pmega-chev svg {
  width: 100%;
  height: 100%;
  display: block
}

.pmega-card__title .pmega-chev {
  color: #999;
  opacity: 1
}
/* Nudge the chevron slightly right on hover (the same affordance the service-name
   arrow on the archive / order pages uses). */
.pmega-chev { transition: transform .15s ease; }
.pmega-card:hover .pmega-chev,
.pmega-hero:hover .pmega-chev,
.pmega__menu a:hover .pmega-chev { transform: translateX(3px); }

/* utility rows — part of the scroll, reached after services (NOT pinned) */
.pmega__util {
  padding: 6px 16px 26px;
  margin-top: 6px
}

.pmega__util .pmega__menu {
  list-style: none;
  margin: 0;
  padding: 0
}

.pmega__util .pmega__menu li {
  margin: 0
}

.pmega__util .pmega__menu a {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  padding: 15px 4px;
  font-size: 15px;
  font-weight: 400;
  color: var(--pm-ink);
  text-decoration: none;
  border-top: none
}

.pmega__util .pmega__menu li:first-child a {
  border-top: 0
}

.pmega__util .pmega__menu a:hover,
.pmega__util .pmega__menu a:focus {
  color: var(--pm-red);
  background: transparent
}

/* keyboard focus only */
.pmega :focus-visible {
  outline: 2px solid var(--pm-red);
  outline-offset: 2px;
  border-radius: 12px
}

/* =========================================================================
 * DESKTOP (>=769px): intentionally NO override. Desktop now uses the SAME
 * full-screen fixed drawer as mobile. #pmega stays on <body> (JS place()), so
 * its base position:fixed;inset:0 resolves against the viewport (immune to the
 * .site-header.is-scrolled backdrop-filter containing-block change, because it
 * is not a header descendant). Open/close is driven by openDrawer() /
 * closeDrawer() (scrim + X + Esc + focus trap + scroll-lock), and the util
 * menu, header bar and scrim all inherit from the base (mobile) rules. The
 * former hover popover (absolute-anchored 420px card) has been removed.
 * ========================================================================= */

@media(prefers-reduced-motion:reduce) {

  .pmega *,
  .pmega *::before,
  .pmega *::after {
    animation: none !important;
    transition: none !important
  }

  .pmega__sheet,
  .pmega-hero,
  .pmega-card {
    transform: none !important
  }
}

@media (max-width:768px) {

  .inside-header {
    padding: 0 0
  }

  body.page-id-8:not(.logged-in) .inside-article {
    padding: 15px
  }

  .site-footer {
    width: calc(100% - 30px);
    margin: 15px
  }

  .site-header:has(.toggled) .menu_h_buttons {
    flex-wrap: wrap;
    overflow-y: scroll;
    max-height: calc(100vh - 350px);
    padding: 15px 20px;
    margin-top: 0;
    border-top: 1px solid rgba(255, 255, 255, .7);
    font-weight: 600;
    font-size: 18px
  }

  .menu_h_buttons {
    gap: 8px;
    padding: 0 20px 11px 20px;
    font-size: 17px
  }

  .site-header:has(.toggled) .menu_h_buttons a {
    color: var(--contrast);
    line-height: 37px;
    gap: 10px;
    justify-content: left
  }

  .site-header:has(.toggled) .menu_h_buttons a:hover {
    color: var(--accent)
  }

  .site-header:has(.toggled) .menu_h_buttons a svg {
    height: 18px;
    width: 18px
  }

  .menu_h_buttons a {
    gap: 7px
  }

  .menu_h_buttons a svg {
    height: 16px;
    width: 16px
  }

  .woocommerce-checkout #payment div.form-row button {
    width: 100%;
    max-width: 100%;
  }

  .form-row.place-order,
  .is-mobile .wc-block-checkout__actions .wc-block-checkout__actions_row,
  .wc-block-cart .wc-block-cart__submit-container--sticky {
    margin: 15px !important;
    width: calc(100% - 30px) !important;
    padding: 2rem;
  }

  body.home,
  body.page.page-id-1000728,
  body.page.page-id-1001289,
  body.page.page-id-1001559,
  body.single-product {
    background: linear-gradient(to bottom, transparent 0%, var(--base-2) 3%), url("/wp-content/uploads/2025/05/mountains-scaled.webp");
    background-position: 20% -20px;
    background-size: 278%
  }
}

@media (max-width:1300px) {
  .site-header {
    width: calc(100% - 32px);
    margin-left: 16px;
  }

  li.wc_payment_method {
    width: 100%
  }

  #services-template .ft-menu {
    display: none
  }

  #services-template .ft-toggle {
    display: block
  }

  .ft-benefits-grid,
  .ft-pricing-grid,
  .ft-services-grid {
    display: flex;
    gap: 1.5rem;
    overflow-x: scroll
  }

  .woocommerce .related.products ul.products li.product {
    width: 100%;
    margin: 0 0 1.5em 0
  }

  .woocommerce .related.products ul.products li.product:last-child {
    margin-bottom: 0
  }

  .ft-benefit {
    min-width: 250px
  }

  .p_info {
    max-width: 100%
  }

  section#benefits_2,
  section#reviews,
  section#why_matter,
  section#your_safety {
    padding: 3rem;
    margin-right: 0 !important;
    margin-left: 0 !important;
    border-radius: 0
  }

  .cart_and_checkout_flex {
    margin-bottom: 0
  }

  div.cart_flex {
    margin-top: -3rem
  }

  section#about ul li,
  section#our_guarantees ul li {
    width: 100%;
    margin-right: 0
  }

  span.terms_of_service a {
    display: block;
    width: 100%;
    margin: 15px
  }

  .main-navigation .main-nav ul li a {
    justify-content: left;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
    line-height: 37px
  }

  .site-header .header-image {
    margin-top: -3px;
    width: 25px;
    height: 25px
  }

  .button.menu-toggle {
    padding-right: 0 !important
  }

  .site-branding-container .site-logo {
    margin-right: 10px
  }

  .stars-item {
    padding-left: 5px;
    padding-right: 5px
  }

  .main-title {
    font-size: 1.3rem;
    line-height: 1.3em
  }

  span.menu-bar-item.stars-item {
    padding-left: 0;
    padding-right: 0
  }

  .single-product .special_flex {
    margin-bottom: .88rem
  }

  #how_we_compare .comparison-table {
    font-size: .88rem
  }

  #how_we_compare .comparison-table i,
  #how_we_compare .comparison-table tr span {
    display: inline
  }

  #how_we_compare .comparison-table i {
    margin-right: 5px;
    width: 21px;
    height: 21px;
    line-height: 20.5px
  }

  #how_we_compare .comparison-table thead tr td:first-of-type {
    padding-top: 1.35rem;
    padding-bottom: 1rem
  }

  #how_we_compare .comparison-table tbody tr:last-child td:first-of-type {
    padding-bottom: 1.75rem
  }

  #services-template #benefits_1 h2.section_h2,
  #services-template #how_we_compare h2.section_h2,
  #services-template #services_desc h2.section_h2 {
    margin-bottom: 2rem
  }

  .woocommerce #reviews #comments ol.commentlist {
    width: 100%
  }

  .woocommerce #reviews #comments ol.commentlist li .comment-text {
    margin: 0
  }

  .woocommerce #review_form #respond {
    width: 100%
  }

  .woocommerce table.shop_table_responsive tr:nth-child(2n) td,
  .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
    background-color: transparent !important
  }

  .woocommerce table.shop_table_responsive tr td::before,
  .woocommerce-page table.shop_table_responsive tr td::before {
    display: none
  }

  .custom-checkout-features .features-list div {
    width: 100%
  }

  ul.wc_payment_methods.payment_methods.methods {
    border-bottom: none;
    margin-bottom: 0
  }

  p.checkout-terms-privacy {
    font-size: .6rem;
    padding-left: 0
  }

  section.hero .hero__inner.container {
    padding: 2rem 15px;
    padding-bottom: 1.25rem
  }

  h1.product_title.entry-title {
    font-size: 2.55rem;
    line-height: 3rem
  }

  .inside-article:first-child {
    margin-top: 5rem;
  }

  .inside-article:first-child .summary.entry-summary {
    width: 100%
  }

  .variation-blocks-container {
    width: 100%;
    overflow-x: auto;
    padding-top: 30px;
    padding-right: 15px;
    padding-left: 15px;
  }

  .variation-block {
    min-width: 152.5px
  }

  #services-template section {
    padding: 2.55rem 1.55rem;
    margin: 15px;
    margin-top: 3.85rem;
    margin-bottom: 3.85rem
  }

  #services-template section#services_desc {
    margin-bottom: 1.8rem
  }

  #services-template p,
  .ft-container ul li p {
    font-size: 1.1rem;
    line-height: 1.55rem
  }

  .special_p {
    font-size: 1.01rem;
    line-height: 1.45rem;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  .variation-blocks-container {
    margin-top: -126px
  }

  .variation-header {
    margin-top: 0 !important;
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 12px 10px !important;
    border-radius: 20px 20px 0 0
  }

  .variation-block .variation-header:before {
    font-size: 2.1rem;
    line-height: 3.3rem;
    right: 10px
  }

  .variation-block .inside-vb {
    padding: 7px;
    border-radius: 0 0 20px 20px
  }

  .variation-block .inside-vb p {
    margin-bottom: .5rem
  }

  .variation-info-field {
    font-size: .8rem
  }

  .variation-block .inside-vb,
  .variation-price .variation-info-field {
    font-size: .7rem
  }

  .variation-price .variation-info-field:after {
    font-size: .8rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 8.5px
  }

  .info-open {
    font-size: .7rem
  }

  .left-i,
  .left-i.size_30,
  .left-i.size_65,
  .left-i.size_70,
  .right-i,
  .right-i.size_30,
  .right-i.size_65,
  .right-i.size_70,
  .service_desc .left-i,
  .service_desc .right-i {
    width: 100%
  }

  .size_65 {
    min-height: auto
  }

  #services-template .service_desc a.button.buy-now-button {
    margin-bottom: 3rem;
    width: 100%
  }

  section#how-it-works {
    margin: 15px;
    margin-top: 2rem
  }

  #how_we_compare .comparison-table td,
  #how_we_compare .comparison-table th {
    padding: .75em .75em
  }

  #how_we_compare .comparison-table thead tr td:first-of-type {
    flex-wrap: wrap;
    flex-direction: column
  }

  #how_we_compare .comparison-table thead tr td:first-of-type img {
    margin-left: .75rem
  }

  #services-template section h2.section_h2 {
    font-size: 2.55rem !important;
    line-height: 2.75rem !important
  }

  .right-i img {
    float: none;
    margin: auto;
    margin-top: 1rem !important
  }

  #faq-grid .ft-grid {
    gap: .75rem;
    grid-template-columns: 100%
  }

  #faq-grid summary {
    font-size: 1.1rem;
    line-height: 1.5rem
  }

  #faq-grid .faq-answer {
    font-size: .9rem;
    line-height: 1.35rem
  }

  #services-template p.p_descrtiption {
    padding: 0 0 2rem 0
  }

  #services-template section h2 {
    font-size: 2.5rem;
    line-height: 2.5rem
  }

  #services-template section h3,
  .ft-container ul li strong {
    font-size: 1.5rem;
    line-height: 1.75rem
  }

  #services-template #how-it-works p,
  #services-template #payments_descriptions p,
  section#about ul p {
    margin: 0 0 1.8rem 0
  }

  #how_we_compare h2.section_h2,
  #our_guarantees h2.section_h2,
  #services-template #about h2.section_h2,
  #services-template #benefits_1 h2.section_h2,
  #services-template #benefits_2 h2.section_h2,
  #services-template #faq-grid h2.section_h2,
  #services-template #reviews h2.section_h2,
  #services-template #why_matter h2.section_h2,
  #services-template #your_safety h2.section_h2,
  #services-template section.related.products h2 {
    font-size: 2.55rem !important;
    line-height: 2.75rem !important
  }

  #services-template section#why_matter .left-i img,
  #services-template section#why_matter .right-i img,
  #services-template section#your_safety .left-i img,
  #services-template section#your_safety .right-i img {
    float: none;
    margin: auto;
    margin-bottom: .55rem
  }

  #services-template section#why_matter .ft-grid,
  #services-template section#why_matter .left-i,
  #services-template section#why_matter .right-i,
  #services-template section#your_safety .left-i,
  #services-template section#your_safety .right-i {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
  }

  #services-template section.related.products ul li h2 {
    font-size: 1.5rem !important;
    line-height: 1.5rem !important
  }

  .separate-containers .comments-area,
  .separate-containers .page-header,
  .separate-containers .paging-navigation {
    padding: 0;
    margin-left: 15px;
    margin-right: 15px
  }

  .separate-containers .inside-article {
    padding: 1.5rem
  }

  .inside-article {
    padding: 1.5rem
  }

  article.type-product .inside-article {
    padding: 15px 0;
  }

  article.type-product .inside-article div.summary {
    padding: 15px;
  }

  button.menu-toggle .gp-icon svg {
    color: #555
  }

  .menu-toggle {
    padding: 0 20px;
    line-height: 40px;
    font-size: 19px;
    cursor: pointer;
    line-height: 19px !important;
  }

  .special_info {
    transform: scale(.75)
  }

  .variation-block.selected .inside-vb {
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, .07)
  }

  span.discountText {
    font-size: .8rem
  }

  span.recommendedText {
    font-size: .63rem
  }

  span.recommendedText:before {
    margin-right: 3px
  }

  span.qtyText {
    font-size: 1.3rem
  }

  span.savedText {
    font-weight: 600;
    font-size: .65rem
  }

  label {
    font-size: 1rem
  }

  #services-template a.button.buy-now-button {
    display: block;
    margin: auto;
    float: none;
    width: 230px;
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.65rem
  }

  .woocommerce #content div.product div.images,
  .woocommerce #content div.product div.summary,
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary,
  .woocommerce-page #content div.product div.images,
  .woocommerce-page #content div.product div.summary,
  .woocommerce-page div.product div.images,
  .woocommerce-page div.product div.summary {
    width: 100% !important
  }

  #faq-grid summary {
    padding-right: 25px
  }

  #faq-grid summary::after {
    top: 1.2px
  }

  section#faq-grid .ft-container {
    padding-bottom: 15px
  }

  .ft-container ul li strong {
    font-size: 1.3rem;
    line-height: 1.5rem
  }

  #post-81 .inside-article,
  #post-81 .inside-article:first-child {
    padding-left: 15px;
    padding-right: 15px;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100%
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    width: 100%
  }

  h1 {
    font-size: 1.9rem;
    line-height: 1.9rem;
    font-weight: 550
  }

  .woocommerce-MyAccount-navigation ul li {
    min-width: 25%
  }

  .woocommerce-MyAccount-navigation ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }

  #services-template .h_buttons a.button.buy-now-button,
  #services-template .h_buttons a.button.buy-now-button:active,
  #services-template .h_buttons a.button.buy-now-button:hover,
  .woocommerce-order .h_buttons a.button.buy-now-button,
  .woocommerce-order a.button.buy-now-button,
  body .hero .h_buttons a.button.buy-now-button,
  body .hero .h_buttons a.button.buy-now-button:active,
  body .hero .h_buttons a.button.buy-now-button:hover,
  body .hero a.button.buy-now-button {
    width: 100%;
    font-size: 1.18rem
  }

  .h_buttons a.button.buy-now-button svg {
    height: 35px;
    width: 35px
  }

  form.woocommerce-cart-form table.shop_table input.qty {
    width: 100%
  }

  .service-link-cart-wrap i {
    padding-left: 0;
    padding-right: 0;
  }

  .woocommerce-checkout #payment div.form-row {
    padding: 1.5rem 1rem;
    padding-bottom: 1.3rem;
    margin-left: 0
  }

  .woocommerce table.shop_table.my_account_orders {
    border: none
  }

  .woocommerce table.shop_table_responsive.my_account_funds_history tr {
    display: table-row
  }

  .woocommerce table.shop_table_responsive.my_account_funds_history thead {
    display: table-row-group
  }

  .woocommerce table.shop_table_responsive.my_account_funds_history tr td {
    display: table-cell
  }

  /* The legacy ≤1300px orders-table "card" styling was REMOVED: the My-Account
     Orders list is now fully owned by assets/orders-list.css (a modern row-card /
     stacked-card design, enqueued only on the /orders/ endpoint — the only place
     .woocommerce-orders-table renders). Those old rules used !important and
     re-introduced the data-title labels + label/value flex cells, fighting the new
     card design on every screen ≤1300px. Nothing here styles that table anymore. */

  .has-inline-mobile-toggle .mobile-menu-control-wrapper {
    min-height: 60px
  }

  .variation-header span {
    margin-top: -23px;
    right: 12px;
    font-size: .86rem;
    padding: 0 8px
  }

  body.page-id-81 header.site-header span.menu-bar-item.stars-item {
    padding-right: 20px
  }

  body.page-id-81 .inside-header {
    padding: 0
  }

  .page-id-81 .special_flex {
    justify-content: space-between;
  }

  .page-id-81 .slideshow {
    order: 2;
    margin-left: 0;
  }

  .woocommerce-error,
  .woocommerce-error:active,
  .woocommerce-info,
  .woocommerce-info:active,
  .woocommerce-message,
  .woocommerce-message:active {
    right: 5%;
    width: 90%;
    max-width: 90%
  }

  section.hero .special_flex {
    flex-direction: row;
    flex-wrap: wrap;
  }

  section.hero .special_flex .star-rating {
    order: 1;
  }

  .sf-live {
    order: 3;
    margin-top: 1.4rem;
  }

  .slideshow {
    order: 2;
    margin-left: 0.7rem;
  }

  button.button.bv-qty-btn {
    height: 84px;
  }

  .button.bv-qty-btn:has(span.recommendedText) {
    padding-bottom: 18px;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul li a:before {
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin-right: 0;
    margin-bottom: 0.2rem;
    font-size: 1.2rem;
  }

  li.woocommerce-MyAccount-navigation-link a {
    flex-direction: column;
    margin-bottom: 0.75rem;
  }
}
/* =========================================================================
 * Batch: breadcrumb float, desktop nav line-height, mobile My-Account nav.
 * ====================================================================== */

/* #2 — WooCommerce breadcrumb: neat float to the RIGHT of the page heading, on
   the same line, vertically centred (line-height matches the h1 so single-line
   text aligns to it). Applies where the breadcrumb is shown (archive/shop/cart/
   checkout); single-product keeps its existing hidden state. */
.woocommerce-breadcrumb{ float:right; clear:none; margin:0 0 0 20px !important; padding:0; max-width:60%;
	text-align:right; font-size:0.9rem; font-weight:400; line-height:2.2rem; color:#888; }
.woocommerce-breadcrumb a{ color:#888; text-decoration:none; }
.woocommerce-breadcrumb a:hover{ color:#f80031; }
/* When header.js has moved the breadcrumb next to the heading, flex the shared
   header so the two sit on ONE line, vertically centred (works even on cart /
   checkout, where they start in different containers). flex-wrap lets a long
   breadcrumb drop below the heading on narrow screens rather than crowd it. */
.acc-bc-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 20px; margin-bottom:20px; }
.acc-bc-row > .entry-title,
.acc-bc-row > .woocommerce-products-header__title,
.acc-bc-row > .page-title{ margin-bottom:0; }
.acc-bc-row > .woocommerce-breadcrumb{ float:none; margin:0 !important; }

/* #1a — remove the fixed 60px line-height on desktop main-nav links. */
@media (min-width:769px){
	.main-navigation .main-nav ul li a{ line-height: normal !important; }
}

/* #3 — mobile My-Account nav: keep it as ONE horizontal, SCROLLABLE row (with the
   header.js right-arrow affordance) but leave the item/icon LOOK untouched — the
   original icon-tile style (icon above label, from the base ≤1300px rules) is kept.
   Only the wrapping→nowrap-scroll behaviour is added here; the icon styling itself
   is NOT overridden anymore (the earlier inline-pill override was removed). */
@media (max-width:768px){
	.woocommerce-account .woocommerce-MyAccount-navigation{ width:100% !important; float:none !important; margin:0 0 14px; }
	.woocommerce-account .woocommerce-MyAccount-content{ width:100% !important; float:none !important; }
	.woocommerce-MyAccount-navigation ul{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto; gap:6px;
		margin:0 !important; padding:2px; list-style:none; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar{ display:none; }
	/* min-width:0 overrides the legacy ≤1300px `min-width:25%` so the tiles size to
	   their content (a scrollable row) instead of ¼-width wrapping cells. */
	.woocommerce-MyAccount-navigation ul li{ flex:0 0 auto; min-width:0 !important; margin:0; border:0 !important; }
}

/* =========================================================================
 * Global reduced-motion safeguard.
 * The sheet-wide `* { transition: .15s }` rule at the very top of this file has
 * no reduced-motion counterpart, so visitors whose OS requests minimised motion
 * still receive animated transitions on every element (and smooth scroll).
 * Neutralise transitions sheet-wide for those users only — this is additive and
 * changes nothing for the default (no-preference) case. ANIMATIONS are left to
 * the existing component-scoped blocks (.svc / .sf-live / .pmega) on purpose, so
 * opacity-driven content such as the .slideshow logo carousel never blanks out.
 * ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .001ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================================
 * Checkout / cart submit-bar normalization (global overrides)
 * ==========================================================================*/
.woocommerce-checkout #payment div.form-row {
  border-top: 1px solid #eee !important;
}
.form-row.place-order,
.is-mobile .wc-block-checkout__actions .wc-block-checkout__actions_row,
.wc-block-cart .wc-block-cart__submit-container--sticky {
  margin: 0 !important;
  width: 100%;
  margin-left: 0;
  max-width: 100%;
  border-radius: 0;
}
@media (max-width: 768px) {
  .form-row.place-order,
  .is-mobile .wc-block-checkout__actions .wc-block-checkout__actions_row,
  .wc-block-cart .wc-block-cart__submit-container--sticky {
    margin: 0 !important;
    width: 100% !important;
    padding: 2rem;
  }
}

/* ============================================================================
 * WooCommerce pagination — borderless, spaced pills in the site's accent colours
 * (replaces the theme's default bordered/joined pager). Applies everywhere WC
 * paginates (shop, category, my-account orders).
 * ==========================================================================*/
.woocommerce nav.woocommerce-pagination ul { border: none; }
.woocommerce nav.woocommerce-pagination ul li { border-right: none; margin-right: 5px; }
.woocommerce nav.woocommerce-pagination ul li:last-child { margin-right: 0; }
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
  border: 0;
  border-radius: 10px;
  background: #f7f8f9;
  color: #777;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #f80031;
  color: #fff;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus {
  background: #f80031;
  color: #fff;
}

/* ============================================================================
 * Targeted overrides (v3.8): notices, checkout errors, cart form, xsell host,
 * services FAQ clear.
 * ==========================================================================*/
body.acc-services .acc-svc-faq{ clear:both; }
body.gpco .woocommerce-NoticeGroup-checkout .woocommerce-error,
body.gpco form.checkout > .woocommerce-error,
body.gpco .gpco-email-error{ padding-right:48px; }
.woocommerce-error, .woocommerce-error:active,
.woocommerce-info, .woocommerce-info:active,
.woocommerce-message, .woocommerce-message:active{ align-items:center; }
form.woocommerce-cart-form{ margin-top:0; }
html.gpco-js body.gpco-wiz.gpco-on-order #gpco-xsell-host{ margin:0 auto 14px; }

/* ============================================================================
 * Unified front-end close buttons (v3.9): every closer shares the .pmega__x
 * visual language — transparent, centred glyph, 10px radius, muted colour,
 * subtle hover opacity. Each component keeps its own size / margins / position.
 * (.acc-ow-modal__x is the admin order-workspace modal — intentionally excluded.)
 * ==========================================================================*/
.acc-notice-close,
.acc-flash-pop-close,
.acc-flash-mini-close,
.acc-pl-close,
.info-close,
.wc-notice-close {
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  color: #555 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}
.acc-notice-close:hover, .acc-notice-close:focus-visible,
.acc-flash-pop-close:hover, .acc-flash-pop-close:focus-visible,
.acc-flash-mini-close:hover,
.acc-pl-close:hover, .acc-pl-close:focus-visible,
.info-close:hover, .info-close:focus-visible,
.wc-notice-close:hover, .wc-notice-close:focus-visible {
  background: transparent !important;
  color: #555 !important;
  opacity: .8;
}
.acc-notice-close svg, .acc-flash-pop-close svg, .acc-pl-close svg,
.info-close svg, .wc-notice-close svg { width: 22px; height: 22px; }

/* ============================================================================
 * v3.10 targeted overrides: subtotal-save chips + sf-live status pill.
 * ==========================================================================*/
body.gpco .woocommerce-checkout-review-order-table .gpco-subtotal-save{ margin-top:-3px; border-radius:8px; padding:1px 8px; }
body.gpco .cart_item .product-subtotal .gpco-line-regular-row .gpco-subtotal-save{ border-radius:7px; padding:2px 6px; }
.sf-live{ border-radius:15px; padding:14px 18px; min-height:47px;
	box-shadow:0 0 0 2px rgba(98,184,104,.09), 0 0 20px 20px rgba(98,184,104,.06); }

/* Requested tweaks. The min() caps keep the pill from ever exceeding its
   container (min-width beats max-width per spec), so it stays 350/325px wide
   where there's room but shrinks to fit on phones instead of forcing scroll. */
.sf-live { border-radius: 16px; padding: 13px 18px; min-height: 45px; min-width: min(350px, 100%); }
@media (max-width: 1300px) {
  .sf-live { min-width: min(325px, 100%) !important; }
}
/* Sub-360px phones (SE, Fold cover): the single-line nowrap status string plus
   the check icon can't fit inside a pill that itself fits the viewport, so let
   the text wrap and the pill grow vertically — never a horizontal scrollbar. */
@media (max-width: 359px) {
  .sf-live__text { white-space: normal; }
}
.slideshow { border-radius: 12px; }
/* The rate-limit countdown badge only exists visually once it has text. */
.rl-count:empty { display: none; }

/* Vestibular safety: the universal `*{transition:.15s}` rule (and scattered
   keyframe animations) must collapse for visitors whose OS asks for reduced
   motion. Near-zero duration (not `none`) keeps transitionend/animationend
   firing so no JS waiting on those events can ever hang. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
 * Motion polish — "плавность" pass.
 * ==========================================================================*/
/* Anchor jumps (status-hero "Fix my order" → #acc-paused, FAQ/table-of-content
   links) glide instead of teleporting. The reduced-motion block above already
   forces scroll-behavior:auto for visitors who opted out. */
html { scroll-behavior: smooth; }

/* Smooth native <details> open/close (FAQ items site-wide). Standalone
   progressive rules on purpose: ::details-content / interpolate-size are
   unknown to older engines and would invalidate any shared comma list —
   there they simply drop and <details> keeps its instant toggle. */
details.acc-faq-item { interpolate-size: allow-keywords; }
details.acc-faq-item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size .28s cubic-bezier(.2,.7,.2,1), content-visibility .28s allow-discrete;
}
details.acc-faq-item[open]::details-content { block-size: auto; }

/* ============================================================================
 * MOTION SYSTEM — global tokens + modern animation layer.
 * Everything below is progressive (standalone rules; unknown pseudo-elements
 * drop per-rule) and collapses under the reduced-motion block above.
 * ==========================================================================*/
:root {
  --m-ease:   cubic-bezier(.25, .55, .25, 1);  /* soft ease-out — hovers/state   */
  --m-out:    cubic-bezier(.16, 1, .3, 1);     /* decisive out — entrances       */
  --m-spring: cubic-bezier(.34, 1.18, .5, 1);  /* gentle overshoot — selections  */
}

/* ---- Tactile press: compositor-only scale feedback on primary controls. ---- */
.acc-btn:active, .acc-seg:active, .acc-chip-amount:active, .acc-hist-pill:active,
.acc-oa-btn:active, .acc-choice:active, .acc-earn-card:active,
a.button.buy-now-button:active, button.single_add_to_cart_button:active,
#place_order:active, .gpco-xsell-tier:active, .gpco-qty-plus:active,
.gpco-qty-minus:active, .gpco-pp-btn:active, .acc-net-tab:active,
.pmega-trigger:active, .acc-fcart__cta:active, .acc-aa-btn:active {
  transform: scale(.975);
  transition-duration: .08s;
}
/* Selection pop: picked amount chips / choice cards spring in. */
.acc-chip-amount.is-active, .acc-choice.is-selected {
  transition-timing-function: var(--m-spring);
}

/* ---- Scroll reveal (JS-driven — header.js only tags elements BELOW the fold,
   so nothing is ever hidden without JS and LCP/CLS stay untouched). ---- */
@media (prefers-reduced-motion: no-preference) {
  .m-reveal {
    opacity: 0;
    transform: translateY(14px);
  }
  .m-reveal.m-in {
    opacity: 1;
    transform: none;
    transition: opacity .5s var(--m-out), transform .55s var(--m-out);
    transition-delay: var(--m-d, 0ms);
  }
}

/* ---- View Transitions: the My-Account PJAX swap glides (account-nav.js
   wraps the DOM swap in document.startViewTransition where supported). Only
   the content region animates; the page root keeps still so the fixed cart
   bar / header never flicker. ---- */
@media (prefers-reduced-motion: no-preference) {
  .woocommerce-MyAccount-content { view-transition-name: acc-content; }
}
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: none; }
::view-transition-old(acc-content) { animation: m-vt-out .16s var(--m-ease) both; }
::view-transition-new(acc-content) { animation: m-vt-in .3s var(--m-out) both; }
@keyframes m-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes m-vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ============================================================================
 * MOTION SYSTEM II — micro-polish layer.
 * ==========================================================================*/
/* Brand text-selection tint site-wide (the account app already had its own). */
::selection { background: rgba(255, 110, 64, .22); }

/* Image load fade: header.js tags a still-loading <img> and unhides it on
   load/error — a soft fade replaces the abrupt pop-in on slow networks.
   Without JS nothing is ever tagged, so no image can be lost. */
img.acc-img-fade { transition: opacity .35s var(--m-out, ease); }
img.acc-img-loading { opacity: 0; }

/* Value pop: the number an admin/customer just changed (qty steppers, amount
   chips) breathes once so the change reads instantly. */
@keyframes m-val-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.acc-val-pop { animation: m-val-pop .22s var(--m-spring, ease-out); }

/* Anchor orientation: the card a link sent you to (Fix my order → paused
   panel, FAQ deep links, top-up) breathes one soft ring once the smooth
   scroll settles — the eye lands exactly where the page wants it to. */
@keyframes m-target-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 110, 64, .38); }
  100% { box-shadow: 0 0 0 16px rgba(255, 110, 64, 0); }
}
.acc-paused:target, .acc-faq-item:target, #acc-topup:target,
.acc-order-status:target, .acc-order-help:target {
  animation: m-target-pulse .9s var(--m-out, ease) .25s backwards;
}