/**
 * Farmhouse Pet Supply — Product Reviews
 * Premium styling for the WooCommerce reviews section, aligned to the theme
 * design system (Lora headings, Inter body, forest green + amber, token spacing).
 * All rules scoped under .product-reviews.
 */

.product-reviews {
    padding: var(--spacing-xl, 2rem) 0;
    border-top: 1px solid rgba(45, 85, 48, 0.12);
    background: var(--color-background, #FAF9F6);
}
.product-reviews .container-premium {
    max-width: var(--container-narrow, 800px);
    margin: 0 auto;
    padding: 0 var(--spacing-lg, 1.5rem);
}

/* Section title (we supply our own; hide WC's default "Reviews" h2) */
.product-reviews__title {
    font-family: var(--font-heading, 'Lora', Georgia, serif);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: var(--line-height-tight, 1.15);
    color: var(--color-brand-green, #2D5530);
    text-align: center;
    margin: 0 0 var(--spacing-lg, 1.5rem);
}
.product-reviews__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: var(--spacing-sm, 0.5rem) auto 0;
    background: var(--color-brand-amber, #D4A373);
    border-radius: var(--border-radius-full, 9999px);
}
.product-reviews #reviews,
.product-reviews .woocommerce-Reviews { margin: 0; }
.product-reviews #comments > h2 { display: none; }

/* Empty state */
.product-reviews .woocommerce-noreviews {
    text-align: center;
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--color-muted-grey, #6B6B6B);
    font-size: var(--font-size-lg, 1.125rem);
    margin: 0 0 var(--spacing-lg, 1.5rem);
}

/* Review list — cards */
.product-reviews .commentlist {
    list-style: none;
    margin: 0 0 var(--spacing-xl, 2rem);
    padding: 0;
    display: grid;
    gap: var(--spacing-md, 1rem);
}
.product-reviews .commentlist li.review,
.product-reviews .commentlist li.comment {
    background: var(--color-white, #fff);
    border: 1px solid rgba(45, 85, 48, 0.08);
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    padding: var(--spacing-lg, 1.5rem);
}
.product-reviews .comment_container { display: flex; gap: var(--spacing-md, 1rem); align-items: flex-start; }
.product-reviews .comment_container img.avatar {
    width: 48px; height: 48px; margin: 0; float: none;
    border-radius: var(--border-radius-full, 9999px);
    border: 2px solid var(--color-accent-light, #F5F1EB);
}
.product-reviews .comment-text { flex: 1; }
.product-reviews .woocommerce-review__author {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 600;
    color: var(--color-text-primary, #2C2E30);
}
.product-reviews .woocommerce-review__published-date {
    color: var(--color-muted-grey, #6B6B6B);
    font-size: var(--font-size-sm, 0.875rem);
    margin-left: var(--spacing-sm, 0.5rem);
}
.product-reviews .description p {
    font-family: var(--font-body, 'Inter', sans-serif);
    line-height: var(--line-height-base, 1.8);
    color: var(--color-text-primary, #2C2E30);
    margin: var(--spacing-sm, 0.5rem) 0 0;
}

/* Stars — amber/gold for a premium feel */
.product-reviews .star-rating { color: var(--color-brand-amber, #D4A373); margin-bottom: var(--spacing-xs, 0.25rem); }
.product-reviews .star-rating::before { color: rgba(45, 85, 48, 0.18); }
.product-reviews .star-rating span::before { color: var(--color-brand-amber, #D4A373); }

/* Respond / form area */
.product-reviews #review_form_wrapper { margin-top: var(--spacing-lg, 1.5rem); }
.product-reviews .comment-reply-title {
    font-family: var(--font-heading, 'Lora', Georgia, serif);
    font-size: var(--font-size-xl, 1.25rem);
    color: var(--color-brand-green, #2D5530);
    display: block;
    margin-bottom: var(--spacing-md, 1rem);
}

/* Login-required callout — classy */
.product-reviews .must-log-in {
    background: var(--color-accent-light, #F5F1EB);
    border: 1px solid rgba(45, 85, 48, 0.12);
    border-radius: var(--border-radius-lg, 12px);
    padding: var(--spacing-lg, 1.5rem);
    text-align: center;
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--color-text-primary, #2C2E30);
}
.product-reviews .must-log-in a {
    color: var(--color-brand-green, #2D5530);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.product-reviews .must-log-in a:hover { color: var(--color-brand-amber-hover, #C4935F); }

/* Rating selector (logged-in) */
.product-reviews .comment-form-rating label {
    display: block; font-weight: 600; margin-bottom: var(--spacing-xs, 0.25rem);
    font-family: var(--font-body, 'Inter', sans-serif);
}
.product-reviews p.stars a,
.product-reviews p.stars a::before { color: var(--color-brand-amber, #D4A373); }

/* Form fields */
.product-reviews .comment-form { display: grid; gap: var(--spacing-md, 1rem); }
.product-reviews .comment-form label {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 600; color: var(--color-text-primary, #2C2E30);
}
.product-reviews .comment-form textarea,
.product-reviews .comment-form input[type="text"],
.product-reviews .comment-form input[type="email"] {
    width: 100%;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--font-size-base, 16px);
    color: var(--color-text-primary, #2C2E30);
    background: var(--color-white, #fff);
    border: 1px solid rgba(45, 85, 48, 0.20);
    border-radius: var(--border-radius-md, 8px);
    padding: 0.75rem 1rem;
    transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}
.product-reviews .comment-form textarea:focus,
.product-reviews .comment-form input[type="text"]:focus,
.product-reviews .comment-form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-brand-green, #2D5530);
    box-shadow: 0 0 0 3px rgba(45, 85, 48, 0.12);
}

/* Submit — matches the primary CTA (forest pill, lift on hover) */
.product-reviews .form-submit input[type="submit"],
.product-reviews #respond input#submit {
    display: inline-block;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--color-brand-green, #2D5530);
    border: none;
    border-radius: var(--border-radius-full, 9999px);
    padding: 0.85rem 2rem;
    cursor: pointer;
    transition: background var(--transition-base, 250ms ease),
                transform var(--transition-base, 250ms ease),
                box-shadow var(--transition-base, 250ms ease);
}
.product-reviews .form-submit input[type="submit"]:hover,
.product-reviews #respond input#submit:hover {
    background: #1e3a20;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(45, 85, 48, 0.3);
}

@media (max-width: 600px) {
    .product-reviews .comment_container { flex-direction: column; }
    .product-reviews__title { font-size: 1.6rem; }
}