/*
 * ARCpoint product-icon presentation.
 *
 * Matches the redesign mockup: an orange circular badge with a white FA glyph
 * sitting at the top of the existing test-card grid item.
 *
 * The icon span ships with `.custom-product-image` so legacy hover/transform
 * rules in category.css and search-test-styles.css keep applying. Higher-
 * specificity selectors below override the geometry from those rules
 * (`.custom-product-image { width: 100%; height: auto; }`) without modifying
 * those files.
 */

/* Reset the wrapper that previously held a square photo. With a circular
   badge we don't want a forced aspect ratio or clipping. */
.custom-product-image-wrapper {
    aspect-ratio: auto;
    background: transparent;
    overflow: visible;
    text-align: center;
}

.custom-product-image-wrapper .arcpoint-product-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    aspect-ratio: 1 / 1;
    margin: 16px auto;
    background: #F6871F; /* brand orange, matches mockup */
    color: #ffffff;
    border: 3px solid #ffffff; /* thin white ring around the badge */
    border-radius: 50%;
    /* Inner subtle outline so the white ring still reads against a white card.
       Pairs with the box-shadow that appears on .custom-product-item:hover. */
    box-shadow: 0 0 0 1px rgba(1, 43, 73, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box;
}

.arcpoint-product-icon i {
    font-size: 40px;
    line-height: 1;
}

/* Force the title and price to centre regardless of the parent's text-align.
   `search_test_page_product_display` sets the card to text-align:left so
   inheritance alone wouldn't centre them. */
.custom-product-title,
.custom-product-price {
    text-align: center;
}

/* Subtle card-level hover: small lift + soft shadow + icon scale + a touch of
   warmth on the price. Designed to read as "this whole card is interactive"
   without committing to the full button-swap from the mockup (see
   /plan-icons-css.md for that follow-up). */
.custom-product-item {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 6px;
}

.custom-product-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(1, 43, 73, 0.12);
}

.custom-product-item:hover .arcpoint-product-icon {
    transform: scale(1.06);
    box-shadow:
        0 0 0 1px rgba(1, 43, 73, 0.10),
        0 6px 14px rgba(246, 135, 31, 0.30);
}

.custom-product-item:hover .custom-product-title {
    text-shadow: 0 1px 0 rgba(1, 43, 73, 0.06);
}

.custom-product-item:hover .custom-product-price {
    text-shadow: 0 1px 0 rgba(246, 135, 31, 0.20);
}

/* Keep the legacy ":hover .custom-product-image" zoom from category.css
   working — the icon span carries .custom-product-image, so the hover scale
   above already supersedes that rule via specificity. */

/* The legacy magnifier overlay was a "click to enlarge" hint for the photo.
   With an icon there is nothing to enlarge — hide it. */
.custom-product-image-wrapper .custom-overlay {
    display: none;
}

/* Cart and mini-cart use small thumbnails. WooCommerce sets a fixed width on
   the <img>; mirror that for the badge so the row layout doesn't shift. */
.woocommerce-cart-form .product-thumbnail .arcpoint-product-icon,
.woocommerce-mini-cart .arcpoint-product-icon,
.cart_item .product-thumbnail .arcpoint-product-icon {
    width: 56px;
    height: 56px;
    margin: 0;
}

.woocommerce-cart-form .product-thumbnail .arcpoint-product-icon i,
.woocommerce-mini-cart .arcpoint-product-icon i,
.cart_item .product-thumbnail .arcpoint-product-icon i {
    font-size: 22px;
}

/* Single product page is intentionally left close to the legacy layout. The
   badge scales up so it occupies the gallery slot but keeps brand colours. */
.woocommerce-product-gallery .arcpoint-product-icon {
    width: 180px;
    height: 180px;
    margin: 24px auto;
    display: flex;
}

.woocommerce-product-gallery .arcpoint-product-icon i {
    font-size: 80px;
}