.woocommerce-product-gallery__image {
    position: relative;
    overflow: hidden;
}

.zoom-hint {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    z-index: 99;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.woocommerce-product-gallery__image:hover .zoom-hint {
    opacity: 0;
}

.woocommerce-variation.single_variation {
    display: none !important;
}

/* Hero video slide (a video filename stored in the custom image_1 field).
   Match the sizing of the image it replaces so the carousel layout is stable. */
.wehaj-hero-video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Hide the "More pieces" products section (the loop carousel/grid before the
   footer) on the Wehaj product page. Targeted by :has() on the product-loop
   widget rather than the per-site Elementor data-id, and scoped to the
   single-product template + the Wehaj SKU body class (covers -en / -ar / bare).
   Replaces the old .elementor-element-fa7d35c rule, which relied on a per-site id
   and only hid the heading. */
body[class*="product-sku-aishasummer"] .elementor-location-single > .e-con:has(.elementor-widget-loop-carousel),
body[class*="product-sku-aishasummer"] .elementor-location-single > .e-con:has(.elementor-widget-loop-grid) {
    display: none !important;
}

/* Variation dropdown borders. On live, LiteSpeed's CSS optimization strips the
   Elementor inline custom-CSS that draws these borders, so the selects render
   border-less. Re-declare it here, targeting the selects by their stable IDs (the
   attribute slugs — identical on every site) so an ID selector out-ranks the
   high-specificity Elementor form-field rule that otherwise wins. Purge LiteSpeed
   after deploy so it regenerates its combined CSS including this rule. */
#pa_product-type,
#pa_gold-color,
#pa_stone-1,
#pa_stone-2,
#wehaj-ring-size {
    border: 1px solid rgba(139, 139, 139, 0.5) !important;
}

/* Hide the stray "diamonds" category (WooCommerce force-assigns it as the site
   default product category whenever this product is saved with none) from the
   Wehaj product breadcrumb, along with the separator image right after it.
   Targeted by href — not a fragile nth-child position — and scoped to the Wehaj
   product via its SKU body class (covers -en / -ar / bare SKU variants). */
body[class*="product-sku-aishasummer"] .breadcrumb a[href*="/diamonds"],
body[class*="product-sku-aishasummer"] .breadcrumb a[href*="/diamonds"] + img {
    display: none !important;
}