/**
 * USAR Reviews Manager — WooCommerce product-page layout.
 * Loaded only on single-product pages (see class-woocommerce.php).
 * Complements assets/frontend.css; reuses its card / summary / button styles.
 *
 * @since 0.8.0
 */

/* ---- 1. Compact star summary near the title/price ---- */
.usar-rm-wc-toprating{margin:.35rem 0 1rem}
.usar-rm-wc-toprating__link{display:inline-flex;text-decoration:none;transition:opacity .15s}
.usar-rm-wc-toprating__link:hover{opacity:.82}
/* The pill itself is styled by .usar-rm-summary--compact in frontend.css. */

/* ---- 2. Full reviews section below the product summary ---- */
.usar-rm-wc-reviews{
    max-width:none;
    margin:2.5rem 0 1rem;
    padding-top:2rem;
    border-top:1px solid #e3e7ee;
    font-family:'Inter',-apple-system,sans-serif;
    scroll-margin-top:90px; /* so the #anchor jump doesn't hide under sticky headers */
}
.usar-rm-wc-reviews__head{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:1rem;flex-wrap:wrap;margin:0 0 1.25rem;
}
.usar-rm-wc-reviews__title{
    font-family:'Playfair Display',Georgia,serif;
    font-size:26px;font-weight:700;color:#1a3354;margin:0;line-height:1.2;
}
.usar-rm-wc-reviews__badge{
    font-size:13px;font-weight:700;color:#1c7c46;
    background:#e8f6ee;border:1px solid #bfe6cd;
    padding:.3rem .7rem;border-radius:30px;white-space:nowrap;
}

/* Two-column card grid on the product page (frontend.css defaults to 1 col). */
.usar-rm-wc-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}

.usar-rm-wc-reviews__more{margin:1.5rem 0 0;text-align:center}

/* ---- Photo hardening (defeats the product-page image-zoom plugin) ----
 * On single-product pages the USAR Image Zoom plugin wraps <img> in
 * <span class="usar-zoom-wrap"> and adds a magnifier overlay, which breaks
 * the review card's fixed 120x120 photo box and lets the image overlap the
 * reviewer name/footer. These rules lock the photo back into a fixed,
 * in-flow box and hide the magnifier on review photos. Scoped to the
 * product-page section so the standalone /reviews/ page is untouched. */
.usar-rm-wc-reviews .usar-rm-card__photo{
    width:120px !important;height:120px !important;
    min-width:120px !important;max-width:120px !important;
    object-fit:cover !important;border-radius:8px !important;
    position:static !important;float:none !important;transform:none !important;
    margin:0 !important;display:block !important;
}
/* Keep any zoom wrapper as a fixed-size flex cell instead of an inline span. */
.usar-rm-wc-reviews .usar-rm-card__body .usar-zoom-wrap{
    flex:0 0 120px !important;width:120px !important;height:120px !important;
    display:block !important;position:relative !important;overflow:hidden !important;
    border-radius:8px !important;margin:0 !important;
}
.usar-rm-wc-reviews .usar-zoom-wrap .usar-rm-card__photo{width:120px !important;height:120px !important}
/* Hide the injected magnifier / non-image overlay on review photos. */
.usar-rm-wc-reviews .usar-zoom-wrap > :not(img){display:none !important}
/* Insurance: never let the footer sit under a floated/absolute photo. */
.usar-rm-wc-reviews .usar-rm-card__meta{clear:both !important}
.usar-rm-wc-reviews .usar-rm-card__body{align-items:flex-start !important}

@media (max-width:782px){
    /* On phones the card stacks; let the photo be a full-width banner. */
    .usar-rm-wc-reviews .usar-rm-card__photo{
        width:100% !important;max-width:100% !important;height:200px !important;
    }
    .usar-rm-wc-reviews .usar-rm-card__body .usar-zoom-wrap{
        flex:1 1 auto !important;width:100% !important;height:200px !important;
    }
}

/* ---- Responsive ---- */
@media (max-width:782px){
    .usar-rm-wc-list{grid-template-columns:1fr}
    .usar-rm-wc-reviews__title{font-size:22px}
    .usar-rm-wc-reviews{margin-top:2rem;padding-top:1.5rem}
}