/* Produkt-spezifische Erweiterungen für das Promo-Card-Layout */

.spsc-wrap.has-no-media {
    grid-template-columns: 1fr;
    grid-template-areas: "card";
}

.spsc-wrap.has-no-media .spsc-card {
    transform: none;
}

.spsc-card .spsc-title {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 12px);
    flex-wrap: wrap;
}

.spsc-title__text {
    display: inline-flex;
    align-items: center;
}

.spsc-disclaimer {
    --spsc-disclaimer-bg: #B02A2A;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(22px, 2.4vw, 26px);
    height: clamp(22px, 2.4vw, 26px);
    border-radius: 50%;
    background: var(--spsc-disclaimer-bg);
    color: #fff;
    font-weight: 600;
    font-size: clamp(12px, 1.2vw, 14px);
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    outline: none;
}

.spsc-disclaimer:focus-visible {
    box-shadow: 0 0 0 3px rgba(176, 42, 42, 0.25);
}

.spsc-disclaimer__icon {
    font-style: normal;
}

.spsc-disclaimer__popover {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translate(-50%, 6px);
    min-width: 360px;
    max-width: min(280px, 70vw);
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--spsc-disclaimer-bg);
    color: #fff;
    font-size: 0.6rem;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

.spsc-disclaimer__popover::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: var(--spsc-disclaimer-bg) transparent transparent transparent;
}

.spsc-disclaimer__popover p {
    margin: 0;
}

.spsc-disclaimer__popover p + p {
    margin-top: 0.75em;
}

.spsc-disclaimer:hover .spsc-disclaimer__popover,
.spsc-disclaimer:focus .spsc-disclaimer__popover,
.spsc-disclaimer:focus-visible .spsc-disclaimer__popover {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.spsc-card .spsc-price {
    margin: 0 0 clamp(12px, 2vw, 18px) 0;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 600;
    color: var(--text);
}

.spsc-card .spsc-purchase {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(12px, 2vw, 18px);
    margin-top: clamp(16px, 2.4vw, 24px);
}

.spsc-card .spsc-qty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.spsc-card .spsc-qty .quantity {
    margin: 0;
    display: flex;
    align-items: center;
}

.spsc-card .spsc-qty-input {
    max-width: 50px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 22px;
    box-shadow: none;
    padding: 0;
    color: black;
}

.spsc-card .spsc-qty-input::-webkit-outer-spin-button,
.spsc-card .spsc-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.spsc-card .spsc-qty-input[type="number"] {
    -moz-appearance: textfield;
}

.spsc-card .spsc-qty-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}


/* -------------------------------------------
   Hover/Focus: nur BG leicht abdunkeln
   (per Overlay-Layer, Text bleibt unverändert)
   ------------------------------------------- */

/* Plus-Button abdunkeln */
.spsc-card .spsc-qty-btn.is-increase:hover,
.spsc-card .spsc-qty-btn.is-increase:focus,
.spsc-card .spsc-qty-btn.is-increase:focus-visible{
    /* Basisfarbe beibehalten */
    background-color: var(--btn-bg);
    /* leichte Abdunklung als Overlay */
    background-image: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08));
}

/* Plus-Button beim aktiven Klicken etwas stärker */
.spsc-card .spsc-qty-btn.is-increase:active{
    background-color: var(--btn-bg);
    background-image: linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16));
}

/* Minus-Button abdunkeln (von weiß kommend) */
.spsc-card .spsc-qty-btn.is-decrease:hover,
.spsc-card .spsc-qty-btn.is-decrease:focus,
.spsc-card .spsc-qty-btn.is-decrease:focus-visible{
    background-color: #fff;
    background-image: linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.06));
}

/* Minus-Button aktiv etwas dunkler */
.spsc-card .spsc-qty-btn.is-decrease:active{
    background-color: #fff;
    background-image: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.12));
}

/* Optional: falls du die alte generische Hover-Regel drin lässt,
   sorgen diese selektoren mit höherer Spezifität für sauberes Override */
.spsc-card .spsc-qty-btn.is-increase:hover {
    outline: none;
    color: white;
}
.spsc-card .spsc-qty-btn.is-decrease:hover{
    outline: none;
    color: black;
}

.is-decrease {
    background: white;
    color: #121212;
}

.is-increase {
    background: var(--btn-bg);
    color: white;
}

.spsc-card .spsc-qty-btn:hover,
.spsc-card .spsc-qty-btn:focus {
    background: rgba(0, 0, 0, 0.06);
    outline: none;
}

.spsc-card .spsc-qty-btn:active {
    transform: scale(0.96);
}

.spsc-card .spsc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-text);
    font-weight: 600;
    font-size: clamp(15px, 1.5vw, 17px);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.2s ease;
}

.spsc-card .spsc-btn:hover,
.spsc-card .spsc-btn:focus {
    filter: brightness(0.94);
    outline: none;
}

.spsc-card .spsc-btn:active {
    transform: translateY(1px);
}

.spsc-card .spsc-btn--link {
    min-width: 0;
}

.spsc-card .spsc-add-to-cart {
    min-width: clamp(160px, 28vw, 220px);
}

@media (max-width: 680px) {
    .spsc-card .spsc-purchase {
        width: 100%;
        flex-direction: row;
        align-items: center;
    }

    .spsc-card .spsc-qty {
        justify-content: left;
    }

    .spsc-card .spsc-add-to-cart {
        width: 40%;
    }
}

/* Oktagon-Button wie im Screenshot */
.spsc-btn.spsc-view-cart{
    --size: 64px;          /* bei Bedarf anpassen */
    --icon: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size);
    height: var(--size);
    background: var(--btn-bg);
    text-decoration: none;
    clip-path: polygon(
            42% 2%, 65% 3%, 85% 12%, 95% 32%,
            96% 58%, 83% 82%, 58% 96%, 34% 95%,
            14% 82%, 5% 60%, 6% 38%, 18% 16%
    );
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}

/* Icon sauber zentrieren */
.spsc-btn.spsc-view-cart svg{
    width: 60%;
    height: 60%;
    fill: var(--icon);
    display: block;
}

.spsc-btn.spsc-view-cart:focus-visible{
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Safari Prefix Fallback */
@supports (-webkit-clip-path: polygon(0 0)){
    .spsc-btn.spsc-view-cart{
        -webkit-clip-path: polygon(
                30% 0%, 70% 0%,
                100% 30%, 100% 70%,
                70% 100%, 30% 100%,
                0% 70%, 0% 30%
        );
        clip-path: polygon(
                42% 2%, 65% 3%, 85% 12%, 95% 32%,
                96% 58%, 83% 82%, 58% 96%, 34% 95%,
                14% 82%, 5% 60%, 6% 38%, 18% 16%
        );
    }
}