/* =============================================================================
   TechZone — Shop Archive Polish
   Fixes two issues on the shop/category grid:
   1. Rogue "Clear" reset-variation link showing under each product tile.
   2. First-product-only visual jitter caused by the Clear link taking layout
      space (which the plugin hides with visibility:hidden, not display:none).
   Applies to both plugin variants (woo-variation-swatches free & pro).
   ============================================================================= */

/* ── 1. Hide the "Clear" reset link entirely on archive by default ────────────
   The plugin toggles a `.show` class on this <li> when a swatch is clicked.
   We change the mechanism from visibility (which reserves space) to display,
   so no empty gap remains and no rogue "Clear" text ever surfaces on load.   */

.woocommerce ul.products li.product .wvs_archive_reset_variations,
.woo-variation-swatches ul.variations .wvs_archive_reset_variations,
.wp-block-getwooplugins-variation-swatches ul.variations .wvs_archive_reset_variations {
    display: none !important;
}

/* Only reveal it when the plugin's own JS adds the `.show` class after the
   shopper clicks a swatch — this preserves the plugin's intended UX.         */
.woocommerce ul.products li.product .wvs_archive_reset_variations.show,
.woo-variation-swatches ul.variations .wvs_archive_reset_variations.show,
.wp-block-getwooplugins-variation-swatches ul.variations .wvs_archive_reset_variations.show {
    display: inline-flex !important;
    visibility: visible !important;
}

/* Style the Clear link so it looks like a native chip on the product card */
.woocommerce ul.products li.product .wvs_archive_reset_variations.show a,
.woo-variation-swatches ul.variations .wvs_archive_reset_variations.show a {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    padding: 2px 8px;
    margin-top: 4px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fafafa;
    transition: color .15s, border-color .15s, background .15s;
}

.woocommerce ul.products li.product .wvs_archive_reset_variations.show a:hover,
.woo-variation-swatches ul.variations .wvs_archive_reset_variations.show a:hover {
    color: #d33;
    border-color: #d33;
    background: #fff;
    text-decoration: none;
}

/* Remove default plugin margin/gap left over from hidden Clear <li> */
.woocommerce ul.products li.product ul.variations {
    margin-bottom: 0;
}

/* ── 2. Quick-shop bag icon (first hover action) — first product consistency ─
   The Ecomus loop wraps this in .product-loop-button-atc. On the first product
   card, some browsers render an implicit inline gap because the previous
   sibling (.wvs_archive_reset_variations hidden by visibility) still occupied
   space. Now that Clear is display:none, the icons align uniformly. Belt-and-
   braces reset of the bag button's box so alignment is identical everywhere. */

.woocommerce ul.products li.product .ecomus-button.product-loop-button-atc {
    box-sizing: border-box;
}

/* Ensure quick-shop icon is centered inside its circle even on first product */
.woocommerce ul.products li.product .ecomus-button.product-loop-button-atc .ecomus-svg-icon,
.woocommerce ul.products li.product .ecomus-button.product-loop-button-atc svg {
    display: block;
    margin: 0 auto;
}