.sme-whatsapp-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sme-space-4);
min-height: var(--sme-touch-target);
margin: 0;
padding: 0 var(--sme-space-8);
border: 1px solid var(--sme-color-whatsapp) !important;
border-radius: var(--sme-radius-sm) !important;
background: var(--sme-color-whatsapp) !important;
background-image: none !important;
color: var(--sme-color-white) !important;
font: var(--sme-font-weight-bold) var(--sme-font-size-sm)/var(--sme-line-height-tight) var(--sme-font-family-sans);
text-align: center;
text-decoration: none !important;
white-space: nowrap
}

.sme-whatsapp-button,
.sme-whatsapp-button:hover,
.sme-whatsapp-button:focus-visible,
.sme-whatsapp-button:active {
text-shadow: none !important;
box-shadow: none !important;
filter: none !important;
backdrop-filter: none !important;
transform: none !important
}

.sme-whatsapp-button:hover,
.sme-whatsapp-button:focus-visible,
.sme-whatsapp-button:active {
border-color: var(--sme-color-whatsapp-hover) !important;
background: var(--sme-color-whatsapp-hover) !important;
color: var(--sme-color-white) !important;
outline: none
}

.sme-whatsapp-button:focus-visible {
outline: 2px solid var(--sme-color-text) !important;
outline-offset: 2px
}

.sme-whatsapp-button__icon {
width: 22px;
height: 22px;
object-fit: contain
}

.sme-whatsapp-button--cart,
.sme-whatsapp-button--checkout,
.sme-whatsapp-button--order {
width: 100%;
margin-top: var(--sme-space-5)
}

.sme-whatsapp-floating[hidden] { display: none !important }

.sme-whatsapp-floating {
position: fixed;
bottom: calc(var(--sme-whatsapp-bottom, 24px) + env(safe-area-inset-bottom, 0px));
z-index: var(--sme-z-overlay-control);
display: inline-flex;
max-width: calc(100vw - 24px);
font-family: var(--sme-font-family-sans)
}

.sme-whatsapp-floating.is-right { right: calc(var(--sme-whatsapp-side, 24px) + env(safe-area-inset-right, 0px)) }
.sme-whatsapp-floating.is-left { left: calc(var(--sme-whatsapp-side, 24px) + env(safe-area-inset-left, 0px)) }

.sme-whatsapp-floating__button {
display: inline-flex;
align-items: center;
gap: var(--sme-space-5);
min-width: 0;
min-height: var(--sme-whatsapp-size, 42px);
padding: 0;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
color: var(--sme-color-black) !important;
text-decoration: none !important
}

.sme-whatsapp-floating__button,
.sme-whatsapp-floating__button:hover,
.sme-whatsapp-floating__button:active,
.sme-whatsapp-floating__button:focus-visible {
text-shadow: none !important;
box-shadow: none !important;
filter: none !important;
backdrop-filter: none !important;
transform: none !important
}

.sme-whatsapp-floating.is-label-left .sme-whatsapp-floating__button { flex-direction: row-reverse }

.sme-whatsapp-floating__button:hover,
.sme-whatsapp-floating__button:active,
.sme-whatsapp-floating__button:focus-visible {
border: 0 !important;
background: transparent !important;
color: var(--sme-color-black) !important;
outline: none
}

.sme-whatsapp-floating__button:focus-visible {
outline: 2px solid var(--sme-color-text) !important;
outline-offset: 4px
}

.sme-whatsapp-floating__icon {
display: inline-grid;
place-items: center;
flex: 0 0 var(--sme-whatsapp-size, 42px);
width: var(--sme-whatsapp-size, 42px);
height: var(--sme-whatsapp-size, 42px);
border: 0;
border-radius: 50%;
background: transparent;
box-shadow: none !important;
filter: none !important
}

.sme-whatsapp-floating__icon-image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
box-shadow: none !important;
filter: none !important
}

.sme-whatsapp-floating__label {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 36px;
max-width: min(220px, calc(100vw - var(--sme-whatsapp-size, 42px) - 40px));
padding: 0 15px;
overflow: hidden;
border: 1px solid var(--sme-color-border);
border-radius: var(--sme-radius-pill);
background: var(--sme-color-surface);
color: var(--sme-color-black);
font: var(--sme-font-weight-bold) var(--sme-font-size-sm)/var(--sme-line-height-tight) var(--sme-font-family-sans);
text-overflow: ellipsis;
white-space: nowrap;
box-shadow: none !important;
filter: none !important;
backdrop-filter: none !important
}

.sme-whatsapp-floating.has-icon-only .sme-whatsapp-floating__button { border-radius: 50% !important }

@media (min-width: 1025px) {
.sme-whatsapp-floating.is-hidden-desktop { display: none !important }
}

@media (min-width: 768px) and (max-width: 1024px) {
.sme-whatsapp-floating.is-hidden-tablet { display: none !important }
.sme-whatsapp-floating { bottom: calc(min(var(--sme-whatsapp-bottom, 24px), 20px) + env(safe-area-inset-bottom, 0px)) }
.sme-whatsapp-floating.is-right { right: calc(min(var(--sme-whatsapp-side, 24px), 20px) + env(safe-area-inset-right, 0px)) }
.sme-whatsapp-floating.is-left { left: calc(min(var(--sme-whatsapp-side, 24px), 20px) + env(safe-area-inset-left, 0px)) }
}

@media (max-width: 767px) {
.sme-whatsapp-floating.is-hidden-mobile { display: none !important }
.sme-whatsapp-floating {
bottom: calc(min(var(--sme-whatsapp-bottom, 24px), 14px) + env(safe-area-inset-bottom, 0px));
max-width: calc(100vw - 16px)
}
.sme-whatsapp-floating.is-right { right: calc(min(var(--sme-whatsapp-side, 24px), 12px) + env(safe-area-inset-right, 0px)) }
.sme-whatsapp-floating.is-left { left: calc(min(var(--sme-whatsapp-side, 24px), 12px) + env(safe-area-inset-left, 0px)) }
.sme-whatsapp-floating__label {
max-width: min(180px, calc(100vw - var(--sme-whatsapp-size, 42px) - 34px));
min-height: 34px;
padding-inline: 13px;
font-size: var(--sme-font-size-xs)
}

}

@media (prefers-reduced-motion: reduce) {
.sme-whatsapp-floating__button,
.sme-whatsapp-button { transition: none !important }
}