/**
 * WVS Single Product Swatches
 *
 * The Goya theme disables the WVS plugin stylesheet and provides its own
 * swatch styles — but only for product listing pages (shop.css). This file
 * fills the gap for single product pages, styled to match the PDP
 * configurator swatches (pdp-configurator.css) for visual consistency.
 *
 * Scoped to body.single-product so it never interferes with shop loops.
 *
 * @package Goya_Child
 */

/* =============================================================================
   Swatch row — matches .zeawin-pdp-swatches
   ============================================================================= */

body.single-product .variable-items-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* =============================================================================
   Individual swatch item — matches .zeawin-pdp-swatch
   ============================================================================= */

body.single-product .variable-items-wrapper .variable-item:not(.radio-variable-item) {
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;          /* clips inner span to the circle */
    outline: 2px solid transparent;
    outline-offset: 2px;
    flex-shrink: 0;
    transition: outline-color var(--zeawin-transition-fast, 0.15s ease);
}

body.single-product .variable-items-wrapper .variable-item:not(.radio-variable-item):hover {
    outline-color: var(--zeawin-color-gray-400, #ced4da);
}

body.single-product .variable-items-wrapper .variable-item:not(.radio-variable-item).selected {
    outline-color: var(--zeawin-color-text-primary, #282828);
}

/* Unavailable / out of stock */
body.single-product .variable-items-wrapper .variable-item:not(.radio-variable-item).disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* =============================================================================
   Inner wrapper and colour span — fill the full circle
   ============================================================================= */

body.single-product .variable-items-wrapper .variable-item-contents {
    width: 100%;
    height: 100%;
}

body.single-product .variable-items-wrapper .variable-item-span.variable-item-span-color {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow:
        inset 3px 3px 6px rgba(0, 0, 0, 0.55),
        inset -2px -2px 3px rgba(255, 255, 255, 0.2) !important;
}

/* Dome highlight */
body.single-product .variable-items-wrapper .variable-item-span.variable-item-span-color::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 10% !important;
    left: 10% !important;
    width: 45% !important;
    height: 45% !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.60) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* White swatch: inset shadow acts as a border without breaking the circle */
body.single-product .variable-items-wrapper .color-variable-item-white,
body.single-product .variable-items-wrapper .color-variable-item[data-value="white"] {
    box-shadow: inset 0 0 0 1px #dee2e6;
}

/* =============================================================================
   Variations table — strip all chrome, show swatches only
   ============================================================================= */

body.single-product .variations {
    width: 100%;
    border: none;
    border-collapse: unset;
}

body.single-product .variations tbody {
    display: block;
}

/* Flex row: swatches left, colour name right */
body.single-product .variations tr {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

/* Swatches cell — left, grows to fill space */
body.single-product .variations td.value {
    order: 1;
    flex: 1;
    display: block;
    padding: 0;
    border: none;
}

/* Label cell — right, shrinks to fit colour name */
body.single-product .variations th.label {
    order: 2;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0;
    border: none;
    width: auto;
}

/* Hide the attribute name ("Color"), show only the selected value ("Black") */
body.single-product .variations th.label > label {
    display: none;
}

body.single-product .variations th.label .woo-selected-variation-item-name {
    font-size: var(--zeawin-font-size-sm, 13px);
    color: var(--zeawin-color-text-secondary, #6c757d);
    white-space: nowrap;
}

/* =============================================================================
   Clear / reset link — hidden, customers can click another swatch to change
   ============================================================================= */

body.single-product .reset_variations {
    display: none !important;
}