/* Quick add button on product cards.
   Sits above the card's full-size overlay link, centred on the image. */

.products__product__single__image-wrapper { position: relative; }

.insinox-qa {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    z-index: 5;

    display: inline-flex;
    align-items: center;
    gap: 0;
    box-sizing: border-box;
    height: 4.4rem;
    padding: 0 1.3rem;
    border: 0;
    border-radius: 2.2rem;

    background: #111613;
    color: #ffffff;
    font-family: "Roobert", sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    cursor: pointer;

    opacity: 0;
    transform: translateX(-50%) translateY(0.6rem);
    box-shadow: 0 0.4rem 1.6rem rgba(17, 22, 19, 0.22);
    transition: opacity .22s ease, transform .22s ease, background-color .22s ease;
}

/* Visible on card hover on pointer devices; always visible on touch, where
   there is no hover to reveal it. */
.products__product__single-wrapper:hover .insinox-qa,
.insinox-qa:focus-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (hover: none) {
    .insinox-qa { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.insinox-qa:hover { background: #2a332c; }

.insinox-qa:focus-visible {
    outline: 2px solid #d7e866;
    outline-offset: 3px;
}

.insinox-qa__icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
}

.insinox-qa__icon svg { width: 100%; height: 100%; display: block; }

/* The label is zero-width until there is something to say, so the resting
   state is a clean icon-only pill that grows when it reports back. */
.insinox-qa__label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width .25s ease, margin-left .25s ease;
}

.insinox-qa[data-state="busy"] .insinox-qa__label,
.insinox-qa[data-state="done"] .insinox-qa__label,
.insinox-qa[data-state="failed"] .insinox-qa__label {
    max-width: 14rem;
    margin-left: 0.7rem;
}

.insinox-qa[data-state="busy"]   { background: #2a332c; cursor: progress; }
.insinox-qa[data-state="done"]   { background: #25634a; }
.insinox-qa[data-state="failed"] { background: #a02f28; }

/* Variable products open the product page to choose a variant, so the button
   says so rather than showing a bare cart icon that would imply a direct add. */
.insinox-qa[data-kind="variable"] .insinox-qa__label {
    max-width: 16rem;
    margin-left: 0.7rem;
}

@media (prefers-reduced-motion: reduce) {
    .insinox-qa,
    .insinox-qa__label { transition: none; }
}