/**
 * ============================================================
 * GSUK Variation Swatches — Styling
 * ============================================================
 * Visually replaces WooCommerce's native <select> dropdowns for
 * "Colours Options" and "Sizes" with clickable swatches/buttons.
 * The real <select> elements stay in the DOM (screen-reader only,
 * visually hidden) so WooCommerce's own variation-matching JS keeps
 * working exactly as before — see gsuk-variation-swatches.js.
 *
 * Colours: #24346A (active/selected) and #F3F3F3 (inactive size box
 * background) are the exact values confirmed against the Figma design
 * on 29 July — not placeholders.
 */

/* Hide the native dropdown but keep it accessible/functional */
.gsuk-has-swatches {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* "Colour : Dark Grey" — renamed native label + selected-value span
   (see updateSelectedValueLabel() in gsuk-variation-swatches.js) */
.gsuk-selected-value {
    font-weight: 400;
    margin-left: 2px;
}

/* WooCommerce's variation form is a <table> with a dedicated label
   column (<th class="label">) and value column (<td class="value">).
   Since buildSwatchGroup() moves the actual <label> element OUT of
   that column into our own .gsuk-attribute-group (inside the value
   column), the original label column is left empty — but the empty
   <th> still took up its column width, showing as unwanted blank
   space to the left of the swatches (confirmed 30 July, visible via
   devtools as a ~70px empty <th class="label">). Hiding it removes
   that space; the value column (containing our own label + swatches)
   then naturally takes the full row width. */
table.variations th.label {
    display: none !important;
}

/* Wraps the label + swatches for one attribute (Colour or Size) in a
   controlled column layout — heading on its own line, swatches below
   it — regardless of whatever row/flex layout the surrounding theme
   markup uses. Needed because without this, the label and swatches
   were ending up on the same line and the swatches overflowed off the
   right edge (confirmed 29 July). !important on width/display makes
   sure this wins over that surrounding layout. */
.gsuk-attribute-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 10px;
}

/* Colour swatches */
.gsuk-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 6px 0 4px;
}

.gsuk-swatch-colour {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    background-size: cover;
    background-position: center;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.gsuk-swatch-colour:hover {
    transform: scale(1.08);
}

.gsuk-swatch-colour.gsuk-selected {
    border-color: #24346A;
    box-shadow: 0 0 0 1px #24346A;
}

.gsuk-swatch-colour.gsuk-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Finish swatches (Section 16, demo) — deliberately bigger and
   SQUARE rather than circular, unlike colour swatches. Reasoning:
   finishes are a texture, and a bigger square photo actually shows
   what's being picked (the old site's own reference used the same
   square-photo style for this, not small circles) — per Hayley's
   feedback (5 Aug) that the swatches were too small to see what they
   even were. */
.gsuk-swatch-finish {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    background-size: cover;
    background-position: center;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.gsuk-swatch-finish:hover {
    transform: scale(1.05);
}

.gsuk-swatch-finish.gsuk-selected {
    border-color: #24346A;
    box-shadow: 0 0 0 2px #24346A;
}

/* "No finishes available for this colour" message (Point 1, 5 Aug) */
.gsuk-no-finishes {
    font-size: 13px;
    color: #777;
    font-style: italic;
}

/* Size buttons — all EQUAL WIDTH regardless of label length. Laid
   out as a wrapping grid of equal-width columns rather than relying
   on each button's own content width. */
.gsuk-swatches[data-gsuk-swatch-type="size"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.gsuk-swatch-size {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid #ccc;
    background: #F3F3F3;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gsuk-swatch-size:hover {
    border-color: #24346A;
}

.gsuk-swatch-size.gsuk-selected {
    background: #24346A;
    border-color: #24346A;
    color: #fff;
}

.gsuk-swatch-size.gsuk-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: line-through;
}

.gsuk-swatch-label {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

/* Native "Clear" link below the size selection — hidden per Hayley's
   feedback (1 Aug). Not removed via PHP since it's WooCommerce's own
   default output; CSS is simpler and fully reversible if it's ever
   wanted back. */
.reset_variations {
    display: none !important;
}

/* Variation description — moved under the image gallery via JS
   (see setupDescriptionRepositioning in gsuk-variation-swatches.js) */
.gsuk-variation-description {
    margin-top: 16px;
}

.gsuk-variation-description-heading {
    font-weight: 700;
    margin-bottom: 6px;
}

/* ============================================================
   Responsive adjustments
   ============================================================ */

@media (max-width: 782px) {
    .gsuk-swatch-colour {
        width: 30px;
        height: 30px;
    }

    .gsuk-swatch-finish {
        width: 48px;
        height: 48px;
    }

    .gsuk-swatches[data-gsuk-swatch-type="size"] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .gsuk-swatch-size {
        padding: 7px 10px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .gsuk-swatches {
        gap: 8px;
    }

    .gsuk-swatch-colour {
        width: 28px;
        height: 28px;
    }

    .gsuk-swatches[data-gsuk-swatch-type="size"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .gsuk-swatch-size {
        padding: 6px 8px;
        font-size: 12px;
    }
}