/* GENERAL
--------------------------------------------------- */
.px-button a:not(:has(.px-button-sub-text)) {
transition: all var(--px-duration-default) var(--px-ease);
padding-top:var(--px-space-sm);
padding-bottom:var(--px-space-sm);
padding-left:var(--px-space-base);
padding-right:var(--px-space-base);
}

.px-button a:hover {
transition: var(--px-transition);
}

.px-button a,
.px-button a:hover,
.px-button a:focus {
text-decoration: none !important;
cursor:pointer;
}

.px-button svg {
flex-shrink: 0;
}

.px-button-text {
font-weight: inherit;
}

/* MOBILE TEXT
--------------------------------------------------- */
@media (min-width : 768px) {.px-button a:has(.px-button-mobile-text) .px-button-mobile-text {
display: none !important;
}
} /* End @media */
@media (max-width : 767px) {.px-button a:has(.px-button-mobile-text) .px-button-text:not(.px-button-mobile-text) {
display: none !important;
}
} /* End @media */
/* SUB TEXT
--------------------------------------------------- */
@media (min-width : 768px) {.px-button a:has(.px-button-sub-text) {
--sub-text-font-size: clamp(0.75em, 2.5vw, 15px);
--button-dynamic-padding-vertical: 1.0588em;
--button-dynamic-padding-horizontal: 2.1765em;
}
} /* End @media */
@media (max-width : 767px) {.px-button a:has(.px-button-sub-text) {
--sub-text-font-size: 15px;
--button-dynamic-padding-vertical: var(--px-space-base);
--button-dynamic-padding-horizontal: var(--px-space-2xl);
}
} /* End @media */
.px-button a:has(.px-button-sub-text) .px-button-sub-text {
position: absolute;
top: calc(-1 * var(--sub-text-font-size)); 
z-index: 2;
padding-left: var(--px-space-base);
padding-right: var(--px-space-base);
left: 50%;
transform: translateX(-50%);
margin: 0 auto;
border-radius: var(--px-button-border-radius);
font-size: var(--sub-text-font-size);
width: max-content;
line-height: var(--px-lh-large);
}

.px-button a:has(.px-button-sub-text), 
.px-button a:has(.px-button-sub-text):hover, 
.px-button a:has(.px-button-sub-text):focus {
padding: var(--button-dynamic-padding-vertical) var(--button-dynamic-padding-horizontal);
margin-top: calc(var(--sub-text-font-size) / 2); 
}

/* MOBILE CTA BUTTON
--------------------------------------------------- */
body:not(.px-cta-button-everywhere) .px-page-cta-button {
display:none;
}

.px-page-cta-button {
position: fixed;
left: 0;
bottom: 0;
margin: var(--px-space-sm);
box-shadow: var(--px-shadow-sm);
z-index:100;
border-radius: 25px;
}

.px-page-cta-button a {
height: 50px;
background: var(--px-page-cta-button-bg);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: bold;
transition: var(--px-transition);
padding:0 var(--px-space-base);
border-radius: 25px;
color: var(--px-page-cta-button-color);
font-size: var(--px-fz-text);
}

.px-page-cta-button a:hover,
.px-page-cta-button a:focus {
background: var(--px-page-cta-button-bg-hover);
color: var(--px-color-white);
}

body.px-cta-button-everywhere .px-mobile-cart-button-container,
body.px-cta-button-everywhere .px-whatsapp__content {
display:none !important;
}
body.px-cta-button-everywhere .px-whatsapp__link {
padding: var(--px-space-xs) !important;
}

@media (min-width : 768px) {body:not(.px-hide-popup) .px-page-cta-button {
left: auto;
right: 70px;
}

body.px-hide-popup .px-page-cta-button {
left: auto;
right: 0px;
}
} /* End @media */

@media (max-width : 767px) {body.px-cta-button-mobile .px-page-cta-button {
display:block !important;
}

body.px-cta-button-mobile .px-mobile-cart-button-container,
body.px-cta-button-mobile .px-popup-trigger {
display:none !important;
}

body.px-cta-button-mobile .px-whatsapp__content {
display:none !important;
}
body.px-cta-button-mobile .px-whatsapp__link {
padding: var(--px-space-xs) !important;
}
} /* End @media */
/* RIPPLE EFFECT
--------------------------------------------------- */
.px-button a {
overflow: hidden;
}

.px-button a:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform var(--px-duration-slow), opacity 1s;
}

.px-button:active a:after {
transform: scale(0, 0);
opacity: .2;
transition: 0s;
}