/* ---------- floating contact buttons (layouts/inc/frontend/contact-fab) ---------- */
.hcg-fab {
    --fab-size: 58px;
    --fab-gap: 14px;
    --fab-bottom: 22px;
    --fab-olive: var(--brand-olive-d, #4E4C33);
    --fab-gold: var(--brand-gold, #A8844A);
    --fab-gold-l: var(--brand-gold-l, #C8A877);
    --fab-cream: var(--brand-cream, #FBF8F1);
    position: fixed;
    right: calc(22px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--fab-bottom) + env(safe-area-inset-bottom, 0px));
    z-index: 85;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--fab-gap);
    font-family: "DM Sans", "Montserrat", sans-serif;
    pointer-events: none;
    transition: bottom .5s cubic-bezier(.32, .72, 0, 1)
}

/* lift above the sticky bars on product, cart and checkout pages */
body:has(.pd-sticky.is-show) .hcg-fab {
    --fab-bottom: 104px
}

@media (max-width: 767px) {
    body:has(.ct-bar:not([hidden])) .hcg-fab {
        --fab-bottom: 96px
    }
}

@media (max-width: 900px) {
    body:has(.co-place) .hcg-fab {
        --fab-bottom: 90px
    }
}

.hcg-fab-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    color: var(--fab-cream);
    text-decoration: none;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: translateY(24px) scale(.6);
    animation: hcgFabIn .7s cubic-bezier(.34, 1.56, .64, 1) forwards
}

.hcg-fab-call {
    animation-delay: .9s
}

.hcg-fab-wa {
    animation-delay: 1.05s
}

/* the round face */
.hcg-fab-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease
}

/* thin gold ring floating just outside the face */
.hcg-fab-icon::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(200, 168, 119, .55);
    transition: inset .35s ease, border-color .35s ease
}

/* soft sheen across the top */
.hcg-fab-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(160deg, rgba(255, 255, 255, .28), transparent 45%);
    pointer-events: none
}

.hcg-fab-icon svg {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    fill: currentColor
}

.hcg-fab-wa .hcg-fab-icon {
    background: radial-gradient(120% 120% at 30% 20%, var(--fab-gold-l), var(--fab-gold) 55%, #8A6B38);
    box-shadow: 0 14px 30px -12px rgba(138, 107, 56, .8), 0 0 0 1px rgba(255, 255, 255, .25) inset
}

.hcg-fab-call .hcg-fab-icon {
    background: radial-gradient(120% 120% at 30% 20%, #6B6847, var(--fab-olive) 60%, #3B3A27);
    color: var(--fab-gold-l);
    box-shadow: 0 14px 30px -12px rgba(46, 44, 32, .85), 0 0 0 1px rgba(200, 168, 119, .25) inset
}

.hcg-fab-call .hcg-fab-icon svg {
    width: 24px;
    height: 24px;
    transform-origin: 50% 50%;
    animation: hcgFabRing 4.5s ease-in-out 2.2s infinite
}

/* little "online" dot on WhatsApp */
.hcg-fab-wa::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3FBF6A;
    box-shadow: 0 0 0 2.5px var(--fab-cream)
}

/* ripple rings behind WhatsApp */
.hcg-fab-ring {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    border: 1.5px solid var(--fab-gold-l);
    opacity: 0;
    animation: hcgFabRipple 3s cubic-bezier(.2, .6, .35, 1) 1.8s infinite
}

.hcg-fab-ring + .hcg-fab-ring {
    animation-delay: 2.8s
}

/* label pill that slides out to the left */
.hcg-fab-label {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    display: flex;
    flex-direction: column;
    padding: 9px 18px 10px;
    border-radius: 16px 16px 4px 16px;
    background: var(--fab-cream);
    color: var(--brand-ink, #2E2C20);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 18px 36px -18px rgba(46, 44, 32, .55), 0 0 0 1px rgba(107, 104, 71, .12);
    opacity: 0;
    visibility: hidden;
    transform: translate(12px, -50%) scale(.92);
    transform-origin: right center;
    transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1), visibility 0s .3s
}

.hcg-fab-label small {
    margin-bottom: 2px;
    color: var(--fab-gold);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase
}

@media (hover: hover) {
    .hcg-fab-btn:hover .hcg-fab-icon {
        transform: translateY(-3px) rotate(-8deg) scale(1.06)
    }

    .hcg-fab-btn:hover .hcg-fab-icon::before {
        inset: -7px;
        border-color: var(--fab-gold-l)
    }

    .hcg-fab-btn:hover .hcg-fab-label {
        opacity: 1;
        visibility: visible;
        transform: translate(0, -50%) scale(1);
        transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1), visibility 0s
    }
}

.hcg-fab-btn:focus-visible {
    outline: none
}

.hcg-fab-btn:focus-visible .hcg-fab-icon {
    box-shadow: 0 0 0 3px var(--fab-cream), 0 0 0 5.5px var(--fab-gold)
}

.hcg-fab-btn:focus-visible .hcg-fab-label {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%) scale(1);
    transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1), visibility 0s
}

.hcg-fab-btn:active .hcg-fab-icon {
    transform: scale(.92)
}

@keyframes hcgFabIn {
    to {
        opacity: 1;
        transform: none
    }
}

@keyframes hcgFabRipple {
    0% {
        opacity: .7;
        transform: scale(1)
    }

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

/* a short "ringing" shake, then rest */
@keyframes hcgFabRing {
    0%, 14%, 100% {
        transform: rotate(0)
    }

    2%, 6%, 10% {
        transform: rotate(-16deg)
    }

    4%, 8%, 12% {
        transform: rotate(16deg)
    }
}

@media (max-width: 575px) {
    .hcg-fab {
        --fab-size: 52px;
        --fab-gap: 12px;
        --fab-bottom: 16px;
        right: calc(16px + env(safe-area-inset-right, 0px))
    }

    .hcg-fab-icon svg {
        width: 23px;
        height: 23px
    }

    .hcg-fab-call .hcg-fab-icon svg {
        width: 21px;
        height: 21px
    }
}

@media print {
    .hcg-fab {
        display: none
    }
}

@media (prefers-reduced-motion: reduce) {
    .hcg-fab-btn {
        opacity: 1;
        transform: none;
        animation: none
    }

    .hcg-fab-ring,
    .hcg-fab-call .hcg-fab-icon svg {
        animation: none
    }

    .hcg-fab-ring {
        display: none
    }
}