.card-hover-primary__custom:hover {
    background-color: var(--ar-info) !important
}

.form-check-input__custom:checked {
    background-color: var(--ar-info) !important;
    border-color: var(--ar-info) !important;
}

.nav-item:hover>.nav-link,
.nav-item:hover>.nav-link * {
    color: var(--ar-info) !important;
}

/* Uniform square product frames: any upload aspect fits without distortion */
.product-img-frame {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Main product image: fixed 1:1 stage so portrait/landscape/square
   uploads all occupy the same box with no stretching */
.pd-main-stage {
    aspect-ratio: 1 / 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pd-main-stage .product-img-frame {
    max-width: 100%;
    max-height: 100%;
}

/* Card grid images: same fixed stage so rows stay aligned */
.card-hover .product-img-frame {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
}

/* Product gallery thumbnails (scrollable row) */
.pd-thumb {
    width: 74px;
    height: 74px;
    flex: 0 0 auto;
}
.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pd-thumb.active {
    border-color: var(--ar-primary) !important;
    box-shadow: 0 0 0 1px var(--ar-primary);
}

/* Color swatch fills: soft inset hairline so light colors (e.g. white)
   stay visible on white backgrounds without a hard outer border.
   Inset shadow follows the circle; nearly invisible on dark colors. */
.swatch-fill {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.dark-mode .swatch-fill {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}