/**
 * PDP selection feedback (Phase 2) — companion to assets/js/pdp-selection.js.
 * Applies to Woo Variation Swatches (.variable-item) and configurator (.zeawin-pdp-swatch).
 */

/* Hover preview: label shows the hovered color, visibly "not yet chosen". */
.zeawin-pdp-color-label.is-preview,
body.single-product .variations th.label .woo-selected-variation-item-name.is-preview {
    font-style: italic;
    opacity: 0.7 !important;
}

/* Keyboard focus ring — distinct from the active (selected) outline. */
.zeawin-pdp-swatch:focus-visible,
body.single-product .variable-items-wrapper .variable-item:focus-visible {
    outline: 2px solid var(--zeawin-color-text-primary, #282828);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(40, 40, 40, 0.18);
}

/* Desk Duo: chosen phone-stand color thumbnail, between swatches and label. */
.zeawin-pdp-ps-thumb {
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.zeawin-pdp-ps-thumb + .zeawin-pdp-color-label {
    margin-left: 8px;
}

/* Touch screens: bigger swatches and spacing (22px → 32px) for easier tapping. */
@media (pointer: coarse) {
    .zeawin-pdp-swatches {
        gap: 14px;
    }
    .zeawin-pdp-swatch,
    body.single-product .variable-items-wrapper .variable-item:not(.radio-variable-item) {
        width: 32px;
        height: 32px;
    }
    body.single-product .variable-items-wrapper {
        gap: 14px;
    }
}