/* ==========================================================================
   GLOW — Reviews app skins (Judge.me + Loox)

   1. Native badge        — theme stars fed by Shopify review metafields
   2. Judge.me live skin  — maps theme tokens onto Judge.me's widget classes.
                            Safe to ship: colours, type, spacing, buttons.
   3. Loox live skin      — badge + iframe wrapper (widget internals are
                            styled in Loox admin; see /shopify/README.md)
   4. Preview only        — `.reviews-mock` scope; never loaded in Shopify
   ========================================================================== */

/* ---- 1. Native rating badge --------------------------------------------- */
.rating-native { display: inline-flex; align-items: center; gap: 5px; }
.rating-native b { font-weight: 500; color: var(--c-ink); }
.rating-native > span:last-child { color: var(--color-muted); }

/* ---- 2. Judge.me — live skin -------------------------------------------- */
.jdgm-widget { font-family: var(--font-body) !important; color: var(--color-text); }
.jdgm-star { color: var(--color-star) !important; }
.jdgm-star.jdgm--off { opacity: .22; }

/* Preview badge (cards, PDP, quick view) */
.jdgm-preview-badge { display: inline-flex; }
.jdgm-prev-badge { display: inline-flex !important; align-items: center; gap: 6px; }
.jdgm-prev-badge__stars { display: inline-flex; gap: 1px; }
.jdgm-prev-badge__stars .jdgm-star { font-size: 11px !important; padding: 0 !important; }
.jdgm-prev-badge__text { font-size: 12px; color: var(--color-muted); visibility: visible !important; }
.p-rating .jdgm-prev-badge__stars .jdgm-star, .pdp__rating .jdgm-prev-badge__stars .jdgm-star { font-size: 13px !important; }
.p-rating .jdgm-prev-badge__text { text-decoration: underline; text-underline-offset: 3px; }

/* Product reviews widget */
.jdgm-rev-widg { padding: 0 !important; border: 0 !important; background: none !important; }
.jdgm-rev-widg__title { display: none !important; } /* theme renders the section heading */
.jdgm-rev-widg__header {
  display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 48px); align-items: center;
  padding: clamp(20px, 2.6vw, 32px); margin-bottom: var(--sp-4); border-radius: var(--r-lg); background: var(--c-bone);
}
.jdgm-rev-widg__summary { display: grid; gap: 6px; margin: 0 !important; }
.jdgm-rev-widg__summary-average { font: 400 64px/1 var(--font-display); color: var(--c-ink); }
.jdgm-rev-widg__summary-stars .jdgm-star { font-size: 16px !important; }
.jdgm-rev-widg__summary-text { font-size: 13px; color: var(--color-muted); }
.jdgm-histogram { display: grid; gap: 6px; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.jdgm-histogram__row { display: grid; grid-template-columns: auto minmax(0, 1fr) 40px 56px; gap: 10px; align-items: center; font-size: 12px; color: var(--color-muted); cursor: pointer; }
.jdgm-histogram__star .jdgm-star { font-size: 11px !important; }
.jdgm-histogram__bar { height: 4px !important; border-radius: var(--r-pill); background: var(--c-sand) !important; overflow: hidden; }
.jdgm-histogram__bar-content { height: 100%; border-radius: inherit; background: var(--c-ink) !important; }
.jdgm-histogram__frequency { text-align: right; }
.jdgm-write-rev-link, .jdgm-ask-question-btn, .jdgm-sub-btn {
  display: inline-flex !important; align-items: center; justify-content: center; height: var(--btn-h); padding: 0 26px !important;
  border-radius: var(--r-pill) !important; border: 1px solid var(--c-ink) !important; background: transparent !important; color: var(--c-ink) !important;
  font: 600 12px/1 var(--font-body) !important; letter-spacing: var(--tracking-caps); text-transform: uppercase; white-space: nowrap; text-decoration: none !important;
  transition: background var(--dur), color var(--dur);
}
.jdgm-write-rev-link:hover, .jdgm-sub-btn:hover { background: var(--c-ink) !important; color: var(--c-ivory) !important; }
.jdgm-sub-btn { background: var(--c-ink) !important; color: var(--c-ivory) !important; }
.jdgm-rev-widg__sort-wrapper { display: flex; justify-content: flex-end; padding: 8px 0; border: 0 !important; }
.jdgm-sort-dropdown {
  height: 36px; padding: 0 32px 0 14px; border-radius: var(--r-pill); border: 1px solid var(--c-line-strong); appearance: none; cursor: pointer;
  background: var(--c-porcelain) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1B18' stroke-width='1.5'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  font: 400 13px var(--font-body); color: var(--c-ink);
}
.jdgm-rev { padding: var(--sp-6) 0 !important; border-top: 1px solid var(--color-border) !important; }
.jdgm-rev__header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.jdgm-rev__icon { width: 40px !important; height: 40px !important; border-radius: 50% !important; display: grid !important; place-items: center; background: var(--c-bone) !important; color: var(--c-ink) !important; font: 600 12px/1 var(--font-body) !important; order: 0; }
.jdgm-rev__author-wrapper { order: 1; display: inline-flex; align-items: center; gap: 6px; }
.jdgm-rev__author { font-size: 14px; font-weight: 600; color: var(--c-ink); }
.jdgm-rev__buyer-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--c-sage-soft) !important; color: var(--c-success) !important; font: 600 10.5px/1 var(--font-body); letter-spacing: .04em; }
.jdgm-rev__br { order: 2; flex-basis: 100%; height: 0; }
.jdgm-rev__rating { order: 3; }
.jdgm-rev__rating .jdgm-star { font-size: 12px !important; }
.jdgm-rev__timestamp { order: 4; margin-left: auto; font-size: 12px; color: var(--color-muted); }
.jdgm-rev__title { display: block; margin-bottom: 6px; font: 400 22px/1.15 var(--font-display) !important; color: var(--c-ink); }
.jdgm-rev__body, .jdgm-rev__body p { font-size: 14.5px; line-height: 1.6; color: var(--color-text); }
.jdgm-rev__custom-form { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.jdgm-rev__cf-ans { display: inline-flex; gap: 4px; margin: 0; padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-bone); font-size: 12px; }
.jdgm-rev__prod-info-heading { font-weight: 400; color: var(--color-muted); }
.jdgm-rev__pics { display: flex; gap: 8px; margin-top: 12px; }
.jdgm-rev__pic-img { width: 76px !important; height: 76px !important; object-fit: cover; border-radius: var(--r-sm); }
.jdgm-rev__actions { margin-top: 12px; font-size: 12.5px; color: var(--color-muted); }
.jdgm-rev__votes { display: flex; align-items: center; gap: 10px; }
.jdgm-rev__thumb-up, .jdgm-rev__thumb-down { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--c-line-strong); color: var(--c-ink); cursor: pointer; }
.jdgm-rev__thumb-up .ico { width: 12px; height: 12px; }
.jdgm-paginate { display: flex; justify-content: center; gap: 6px; padding-top: var(--sp-6); border-top: 1px solid var(--color-border); }
.jdgm-paginate__page, .jdgm-paginate__next-page { min-width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--c-line-strong); color: var(--c-ink) !important; font-size: 13px; cursor: pointer; text-decoration: none !important; }
.jdgm-paginate__page.jdgm-curt { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-ivory) !important; }

/* Reviews carousel (home) */
.jdgm-carousel-item { padding: var(--sp-5) !important; border-radius: var(--r-md); background: var(--c-porcelain) !important; border: 1px solid var(--color-border); text-align: left !important; }
.jdgm-carousel-item__review-rating .jdgm-star { font-size: 12px !important; }
.jdgm-carousel-item__review-title { margin: 10px 0 6px; font: 400 21px/1.15 var(--font-display) !important; color: var(--c-ink); }
.jdgm-carousel-item__review-body, .jdgm-carousel-item__review-body p { font-size: 14px; line-height: 1.55; color: var(--color-text); }
.jdgm-carousel-item__reviewer-name { font-size: 12.5px; font-weight: 500; color: var(--c-ink); }
.jdgm-carousel-item__product-title { font-size: 12.5px; font-weight: 500; color: var(--c-ink); }
.jdgm-carousel__left-arrow, .jdgm-carousel__right-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--c-line-strong); }

/* ---- 3. Loox — live skin ------------------------------------------------ */
.loox-rating { display: inline-flex; align-items: center; }
.loox-rating-content { display: inline-flex; align-items: center; gap: 1px; }
.loox-rating .loox-icon { width: 11px; height: 11px; color: var(--color-star) !important; fill: currentColor !important; }
.p-rating .loox-rating .loox-icon, .pdp__rating .loox-rating .loox-icon { width: 13px; height: 13px; }
.loox-rating-label { margin-left: 6px; font-size: 12px; color: var(--color-muted); }
.p-rating .loox-rating-label { text-decoration: underline; text-underline-offset: 3px; }
#looxReviews, #looxCarousel { display: block; width: 100%; }
#looxReviews iframe, #looxCarousel iframe { display: block; width: 100% !important; border: 0; }

/* ---- 4. Preview only ---------------------------------------------------- */
.rv-app-bar { display: flex; justify-content: flex-end; margin-bottom: var(--sp-4); }
.rv-app-head { align-items: flex-end; flex-wrap: wrap; }
.rv-preview { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border-radius: var(--r-pill); border: 1px dashed var(--c-line-strong); background: var(--c-porcelain); font-size: 12px; }
.rv-preview > span { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 8px; color: var(--color-muted); }
.rv-preview .ico { width: 14px; height: 14px; }
.rv-preview a { padding: 6px 12px; border-radius: var(--r-pill); font-weight: 500; color: var(--c-ink); transition: background var(--dur-fast); }
.rv-preview a:hover { background: var(--c-bone); }
.rv-preview a.is-active { background: var(--c-ink); color: var(--c-ivory); }
.p-reviews__app { display: block; }

/* Judge.me icon-font fallback (the real app ships its own star font) */
.reviews-mock .jdgm-star { display: inline-block; font-style: normal; line-height: 1; }
.reviews-mock .jdgm-star::before { content: "★"; font-family: Arial, sans-serif; }

/* Judge.me carousel layout (the live app lays this out itself) */
.reviews-mock .jdgm-carousel__item-container { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--grid-gap)) / 3); gap: var(--grid-gap); overflow-x: auto; scrollbar-width: none; }
.reviews-mock .jdgm-carousel-item { display: flex; flex-direction: column; gap: 12px; }
.reviews-mock .jdgm-carousel-item__review { flex: 1; }
.reviews-mock .jdgm-carousel-item__product { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.reviews-mock .jdgm-carousel-item__product-image { width: 40px; height: 44px; border-radius: var(--r-sm); background: var(--tint); overflow: hidden; display: grid; place-items: center; }
.reviews-mock .jdgm-carousel-item__product-image .pa { width: 100%; height: 100%; }
.reviews-mock .jdgm-carousel__arrows { display: none; }
.reviews__grid--app .reviews__summary .arrow-btn { display: none; }
.reviews__app { min-width: 0; }

/* Loox widget stand-in (approximates Loox's default masonry, tuned to tokens) */
.loox-mock__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; margin-bottom: var(--sp-4); border-radius: var(--r-lg); background: var(--c-bone); }
.loox-mock__score { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--color-muted); }
.loox-mock__score b { font: 400 44px/1 var(--font-display); color: var(--c-ink); }
.loox-stars { display: inline-flex; gap: 1px; color: var(--color-star); }
.loox-stars .loox-icon { width: 13px; height: 13px; fill: currentColor; }
.loox-stars .loox-icon--off { opacity: .22; }
.loox-mock__write { height: 42px; padding: 0 22px; border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-ivory); font: 600 12px/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.loox-mock__grid { columns: 4 220px; column-gap: 12px; }
.loox-mock__card { break-inside: avoid; margin-bottom: 12px; border-radius: var(--r-md); overflow: hidden; background: var(--c-porcelain); border: 1px solid var(--color-border); }
.loox-mock__card img { width: 100%; height: auto; display: block; }
.loox-mock__body { display: grid; gap: 6px; padding: 14px; font-size: 13.5px; line-height: 1.5; }
.loox-mock__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; color: var(--c-ink); }
.loox-mock__name span { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--c-success); }
.loox-mock__product { font-size: 12px; font-weight: 500; color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.loox-mock--rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 12px) / 3); gap: 12px; overflow-x: auto; scrollbar-width: none; }
.loox-mock--rail .loox-mock__card { margin: 0; }
.loox-mock--rail img { aspect-ratio: 8 / 7; object-fit: cover; }
.loox-frame-note { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--color-muted); }

@media (max-width: 1023px) {
  .jdgm-rev-widg__header { grid-template-columns: minmax(0, 1fr); }
  .reviews-mock .jdgm-carousel__item-container, .loox-mock--rail { grid-auto-columns: 70%; }
}
@media (max-width: 767px) {
  .rv-app-bar { justify-content: flex-start; }
  .loox-mock__grid { columns: 2 140px; }
  .reviews-mock .jdgm-carousel__item-container, .loox-mock--rail { grid-auto-columns: 86%; }
}