.memez-swatches{
    margin-top:12px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
/* Border for all color swatches */
.klbtheme-type-color span.klbtheme-term::before{
    content:"";
    position:absolute;
    left:-2px;
    right:-2px;
    top:-2px;
    bottom:-2px;
    border:1px solid #d9d9d9;
    border-radius:50%;
    pointer-events:none;
}

/* Selected swatch */
.klbtheme-type-color span.klbtheme-term.klbtheme-selected::before{
    border-color:#000;
}

/* ============================================================
 * MEMEZ product CARDS: no size/variation SELECTION on the card.
 * Colour shows as a display-only indicator; a single big
 * "add to cart" button links to the product page (choose there).
 * (Selection itself lives on the single product page.)
 * ============================================================ */

/* Hide the on-card variation SELECTION UI + any SIZE swatches.
   Scoped to shop/related grids (.products) so the single product page is untouched. */
.products form.variations_form.memez-card-simplified table.variations,
.products form.variations_form.memez-card-simplified .variations,
.products .memez-card-simplified .quantity,
.products .memez-card-simplified .reset_variations,
.products .memez-card-simplified .woocommerce-variation-add-to-cart,
.products .memez-card-simplified .single_add_to_cart_button,
.products .add_to_cart_button.product_type_variable,
/* Out-of-stock variable products lose the .add_to_cart_button class
   (they render as a plain .button.product_type_variable "Select options"
   link), so the rule above missed them and the default theme button showed
   next to the memez-card-cta = duplicate. Hide those too, but never the CTA. */
.products a.button.product_type_variable:not(.memez-card-cta),
.products .memez-size-swatch {
    display: none !important;
}

/* Colour = display-only indicator (keep the look, remove the function). */
.products .memez-card-colors { margin: 8px 0 10px; }
.products .memez-card-colors,
.products .memez-card-colors * { cursor: default; pointer-events: none; }
.products .memez-card-colors .memez-swatch-label { color: #777; }

/* Card "add to cart" CTA — links to the product page, styled like the site buttons.
   Slightly smaller than the main buttons, with a soft lift + press animation. */
.products a.memez-card-cta,
.products .memez-card-cta.button {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 9px 0 0 !important;
    padding: 10px 14px !important;
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
    color: #fff !important;
    border: 1px solid #0a0a0a !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    opacity: 1 !important;
    will-change: transform;
    transition: transform .2s cubic-bezier(.2,.8,.25,1), background-color .2s ease, box-shadow .2s ease;
}
.products a.memez-card-cta:hover {
    background: #1c1c1c !important;
    background-color: #1c1c1c !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 7px 16px rgba(10,10,10,.22);
}
.products a.memez-card-cta:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(10,10,10,.20);
}


/* ============================================================
   MEMEZ: Consistent card layout — the "add to cart" button sits
   at the SAME position on every card, whether the product has
   colours or not, and whether it is in stock or out of stock.
   (Equal-height cards + push the price/button block to the bottom.)
   ============================================================ */
.products .product{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.products .product > .product-inner{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.products .product .product-body{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Price + CTA block anchored to the bottom, so all buttons line up. */
.products .product .product-body .product-cart{
    margin-top: auto;
}
/* Stock line sits right under the button, consistently. */
.products .product .product-body .product-stock{
    margin-top: 8px;
}