/* Hickmann Varianten
   Farben/Radien kommen aus den Theme-Tokens (Cusio). */

/* ---------- WooCommerce-Chips: unsichtbar, aber bedienbar (Steuerung der Karten) ---------- */

.wc-block-product-filter-chips:has(+ .hk-vc:not(.hk-vc--off)) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Wächter hat ausgelöst (Skript fehlt): Karten weg, Chips wieder sichtbar */
.hk-vc--off {
    display: none;
}

/* ---------- Einzelprodukt: eine Karte, immer gewählt, nicht bedienbar ---------- */

.hk-vc--single {
    gap: .5rem;
}

.hk-vc__label {
    align-self: flex-start;
}

.hk-vc__card.is-static {
    cursor: default;
}

/* ---------- Karten ---------- */

.hk-vc {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    width: 100%;
}

.hk-vc__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 1rem 1.125rem;
    border: 1px solid var(--wp--preset--color--base-5, #d6d2cc);
    border-radius: var(--wp--custom--radius--md, 8px);
    background: var(--wp--preset--color--base, #fff);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.hk-vc__card:hover:not(.is-disabled):not(.is-selected) {
    border-color: var(--wp--preset--color--contrast-4, #787676);
}

.hk-vc__card.is-selected {
    border-color: var(--wp--preset--color--contrast, #000);
    box-shadow: 0 0 0 1px var(--wp--preset--color--contrast, #000);   /* wirkt wie 2 px */
}

.hk-vc__card.is-disabled {
    cursor: not-allowed;
    opacity: .55;
}

.hk-vc__card:focus-visible {
    outline: 2px solid var(--wp--preset--color--contrast, #000);
    outline-offset: 2px;
}

/* Radio-Kreis */
.hk-vc__radio {
    position: relative;
    flex: 0 0 1.5rem;
    box-sizing: border-box;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--wp--preset--color--contrast-4, #787676);
    border-radius: 50%;
}

.hk-vc__card.is-selected .hk-vc__radio {
    border-color: var(--wp--preset--color--contrast, #000);
}

.hk-vc__card.is-selected .hk-vc__radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--wp--preset--color--contrast, #000);
}

.hk-vc__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: .125rem;
    min-width: 0;
}

.hk-vc__size {
    font-size: var(--wp--preset--font-size--md, 1rem);
    line-height: 1.3;
}

.hk-vc__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .125rem .5rem;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.25;
}

.hk-vc__price ins {
    color: var(--wp--preset--color--sale, #cc0000);
    text-decoration: none;
}

/* Lagerstatus rechts, mit Punkt */
.hk-vc__stock {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    font-size: .9375rem;
    white-space: nowrap;
}

.hk-vc__stock::before {
    content: "";
    flex: 0 0 .625rem;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background: var(--wp--preset--color--success, #487961);
}

.hk-vc__stock--backorder::before {
    background: var(--wp--preset--color--warning, #cca000);
}

.hk-vc__stock--out::before {
    background: var(--wp--preset--color--contrast-4, #787676);
}

@media (max-width: 480px) {
    .hk-vc__card {
        gap: .75rem;
        padding: .875rem;
    }

    .hk-vc__stock {
        font-size: .8125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hk-vc__card { transition: none; }
}