/* ========================= EPO PIGMENT SWATCHES ========================= */

/* Hide original EPO select but keep it accessible for the form */
.ad-epo-pigment-select-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/* EPO pigment swatches: make the value cell behave like WD's variations form */
.ad-epo-pigment-selection-section .tc-epo-element-variations td.value.cell.with-swatches {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Remove extra bottom gap under the swatches in this context */
.ad-epo-pigment-selection-section .tc-epo-element-variations td.value.cell.with-swatches .wd-swatches-product {
    margin-bottom: 0;
}

/* Wrapper containing swatches + Clear */
.wd-swatch-line {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Push Clear to the right */
.ad-epo-pigment-selection-section .wd-swatch-line .wd-reset-var {
    margin-left: auto;
    white-space: nowrap;
    width: unset !important;
}

/* EPO quirk: child product title must be enabled for pigment swatches to render */
.ad-epo-pigment-selection-section .tc-epo-element-product-container-cart .product-title {
    display: none;
}


/* ========================= RESPONSIVE SWATCH LAYOUT ========================= */

@media (max-width: 1024px) {

    /* Stack swatches and Clear */
    .ad-epo-pigment-selection-section .wd-swatch-line {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Keep Clear below the swatches and aligned left */
    .ad-epo-pigment-selection-section .wd-reset-var {
        position: unset;
        margin-top: 15px;
        margin-left: 0;
        margin-right: auto;
    }
}


/* ========================= MOBILE SWATCH LABELS ========================= */

@media (max-width: 768px) {

    /* Stack the EPO attribute label and swatches vertically */
    .ad-epo-pigment-selection-section .tc-epo-element-variable-product-attribute {
        display: flex !important;
        flex-direction: column;
    }

    /*
     * Shared sizing values for:
     * - EPO-generated pigment swatches
     * - Native WoodMart pigment swatches
     */
    .ad-epo-pigment-selection-section,
    form.variations_form {
        --ad-swatch-tile: var(--wd-swatch-h);
        --ad-swatch-gap: 6px;
        --ad-label-lines: 2;
        --ad-label-lh: 12px;
        --ad-label-fs: 12px;
        --ad-swatch-width: 90px;
    }

    /*
     * Make each swatch a vertical stack:
     * color tile on top, visible label underneath.
     */
    .ad-epo-pigment-selection-section .wd-swatches-product .wd-swatch,
    form.variations_form .wd-swatches-product .wd-swatch {
        --wd-swatch-brd-color: transparent !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;

        height: calc(
            var(--ad-swatch-tile)
            + var(--ad-swatch-gap)
            + (var(--ad-label-lines) * var(--ad-label-lh))
        ) !important;
    }

    /* Keep the color tile at WoodMart's native swatch height */
    .ad-epo-pigment-selection-section .wd-swatches-product .wd-swatch .wd-swatch-bg,
    form.variations_form .wd-swatches-product .wd-swatch .wd-swatch-bg {
        border: 1px solid var(--brdcolor-gray-200) !important;
        height: var(--ad-swatch-tile) !important;
        width: 100%;
        margin-bottom: var(--ad-swatch-gap) !important;
        flex: 0 0 auto !important;
        display: block;
    }

    /* Force color names to remain visible below the tiles */
    .ad-epo-pigment-selection-section .wd-swatches-product .wd-swatch .wd-swatch-text,
    form.variations_form .wd-swatches-product .wd-swatch .wd-swatch-text {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;

        font-size: var(--ad-label-fs) !important;
        line-height: var(--ad-label-lh) !important;
        text-align: center !important;

        white-space: normal !important;
        max-width: var(--ad-swatch-width) !important;
        height: calc(var(--ad-label-lines) * var(--ad-label-lh)) !important;
        overflow: hidden !important;
    }

    /* Disable hover tooltips on mobile */
    .ad-epo-pigment-selection-section .wd-swatches-product .wd-swatch.wd-tooltip::before,
    .ad-epo-pigment-selection-section .wd-swatches-product .wd-swatch.wd-tooltip::after,
    form.variations_form .wd-swatches-product .wd-swatch.wd-tooltip::before,
    form.variations_form .wd-swatches-product .wd-swatch.wd-tooltip::after {
        display: none !important;
    }
}